webdonsk.ruКак сделать скетч в фигме
Добавил пользователь Skiper Обновлено: 31.08.2024
Что такое Figma
Раньше команде дизайнеров было сложно одновременно работать над одним проектом, показывать готовые варианты клиентам и отдавать макеты разработчикам. Чтобы открыть макет, нужно было скачивать, устанавливать и настраивать отдельные программы типа Adobe Photoshop.
Возможности Figma
Создание прототипов
Отрисовка элементов интерфейса
Работа с векторными объектами
Создание блок-схем
Плюсы и минусы Figma
Перед началом использования сервиса, важно узнать о его сильных и слабых сторонах.
Не работает без интернета
Ограниченные возможности работы с текстом
В программе нельзя сделать отступ между абзацами, поставить межбуквенный интервал и настроить интерлиньяж
Чтобы начать самостоятельную работу нужна только регистрация в сервисе, все инструменты программы доступны сразу, также в бесплатной версии можно давать доступ на просмотр документа. Для совместной работы необходимо выбрать платный тариф
Нельзя добавить плагины
Нельзя настроить горячие клавиши
Основные инструменты Figma
Фреймы
Модульная сетка
Сетка — это линии и клетки, которые позволяют выравнивать и упорядочивать все объекты дизайна во фрейме. Сетки создаются через панель Grid Layout. В сервисе можно поменять цвет сетки, растянуть её или настроить нужный размер, в одном макете можно использовать неограниченное количество сеток.
Компоненты
Компоненты — это объекты пользовательского интерфейса, которым можно задавать общие стили и при необходимости быстро их изменять. Допустим, вы создали макет из 30 страниц, а заказчик попросил поменять шрифт в заголовках, чтобы не менять всё вручную, можно использовать компоненты и заменить шрифт лишь в одном заголовке, остальные изменятся автоматически.
Векторные формы
В онлайн-сервисе есть основные векторные объекты: прямоугольник, линия, треугольник, стрелка, круг и звезда. Они позволяют отрисовывать кнопки, плашки и другие элементы интерфейса. Создать векторные объекты можно инструментом Shape Tool.
Изображения
В макет можно добавить любое изображение и начать работу с ним. Для этого нужно открыть панель File и использовать инструмент Place Image или просто перетащить нужные картинки с рабочего стола.
История версий
Все изменения, внесённые в документ, автоматически сохраняются в облаке. При совместном доступе можно отслеживать историю действий каждого сотрудника, просматривать и восстанавливать предыдущие версии документа. Также всем версиям можно присвоить названия.
Кому пригодится Figma
Изначально программа создавалась для дизайнеров, но сейчас ей пользуются люди самых разных профессий. Рассказываем кому и как сервис помогает решать рабочие задачи.
Дизайнерам
Дизайнеры могут создавать интерактивные прототипы будущих веб-сайтов, сервисов и приложений, а также работать с векторной графикой.
Разработчикам
Блогерам
Smm-специалистам
Smm-специалисты могут использовать многочисленные шаблоны для постов в соцсетях, чтобы создавать баннеры для ютуба, рекламу в инстаграме и др. А также создавать рекламные объявления на основе готовых шаблонов для фейсбука.
Менеджерам
Редакторам
Редакторы могут схематично отрисовывать иллюстрации к статьям и передавать их в работу дизайнерам, а также создавать диаграммы и блок-схемы для управления редакцией.
Начало работы в Figma
Для начала работы нажмите кнопку Sign up в правом верхнем углу, чтобы зарегистрироваться в сервисе
Для регистрации нужно ввести адрес электронной почты и сгенерировать пароль.
После регистрации вы можете начать работу над своим первым проектом. Чтобы открыть рабочую область нажмите на крестик рядом с вкладкой Drafts. Все файлы, которые вы открывали ранее, можно увидеть во вкладке Recent, она находится выше.
Так создаётся новый файл
После того как откроется рабочая область, создайте фрейм и задайте размер вашему будущему макету. Можно ввести данные самостоятельно в поле Design либо выбрать размер из готовых шаблонов.
Начать работу совсем несложно. Это простая и интуитивно понятная программа, но чтобы освоить все её тонкости и дополнительные возможности, придётся потратить время: посмотреть ролики на ютубе и почитать обучающие статьи. В сети можно найти много роликов по работе с онлайн-сервисом. Также разработчики создали большую базу знаний, найти ответ на интересующий вопрос или инструкцию по применению того или иного инструмента можно на сайте Figma.center. Если нет много времени на освоение сервиса, можно выбрать более короткий путь.
Как быстро освоить онлайн-сервис Figma
Срок обучения: 1 месяц
Стоимость обучения: бесплатно
На этом интенсиве вы всего за три дня научитесь работать с фреймом и сеткой, поймёте принципы работы с текстом и сможете создать свой первый дизайн: иконку или баннер. На интенсиве вы сможете пообщаться с другими участниками курса и получить обратную связь от преподавателей.
Срок обучения: 3 дня
Стоимость обучения: бесплатно
Срок обучения: 4 месяца
Стоимость обучения: 22 400 руб.
Коротко о главном
Возможно, вы недавно услышали о Figma. Это веб-приложение (с гибридной нативной версией), цель которого – решить ту же проблему, которую решает Sketch: упростить и ускорить проектирование и прототипирование программного обеспечения.
Когда два приложения решают одну и ту же проблему, зачем вам учиться использовать новое, если вы знаете, как пользоваться старым? В этой статье я расскажу, почему и когда вам следует обратить внимание на Figma, даже если вы уже выбрали для себя Sketch.
Почему вы должны подумать о Figma
Первый вопрос, на который мы должны ответить: что Figma делает лучше, чем Sketch, и имеют ли эти аспекты значение для вас? Ответ заключается в том, что оба приложения прекрасны, и у каждого есть свои плюсы и минусы. Поэтому, когда вы решаете какую программу использовать, вы должны рассмотреть сильные и слабые стороны обоих приложений и оценить их исходя из своих потребностей.
Когда речь заходит о Figma все сводятся к следующим двум аспектам:
- Она бесплатна для личного использования, это означает, что, если вы работаете с сообществом открытого исходного кода, это устраняет барьер для сотрудничества.
- Она кроссплатформенная и даже работает в браузере, что еще больше упрощает это сотрудничество.
Кроме того, вы можете поделиться файлом с правом только комментировать или только просматривать. Тот факт, что вам не нужно беспокоиться о версии файла, устраняет много проблем. В результате, если вы работаете в команде, Figma нет равных. Если в вашем проекте участвует кто-то, не работающий на Mac и Sketch, Figma – лучший выбор.
Что нужно знать, переходя со Sketch
В большинстве случаев Figma и Sketch невероятно похожи. Первоклассный интерфейс Sketch – первое, что покажется практически идентичным в Figma. Есть бесконечное рабочее пространство, слои находятся слева, контекстные свойства справа.
Первое, что вы захотите сделать – установить десктопное приложение.
Если вы хотите преобразовать фрейм в группу или наоборот, в правом верхнем углу есть раскрывающееся меню.
Совет: Если вы хотите изменить размер фрейма и не хотите искажать его содержимое, удерживайте клавишу ? во время изменения размера.
Когда вы создаете новый главный компонент в Figma, он мгновенно появляется и сохраняется там, где вы его создали. К этому нужно привыкнуть, но, когда привыкните, сможете оценить функциональность компонентов Figma. Мы вернемся к этому аспекту позже.
Совет: Дважды кликните по иконке слоя, чтобы отцентрировать этот элемент на экране.
Обработка файлов
Примечание: бесплатная версия Figma хранит только 30-дневную историю версий. Если вы хотите неограниченную историю версий, перейдите на платную версию.
Переопределение символов и компонентов
У Figma совершенно другой интерфейс для переопределений, что может сбивать с толку, если вы пришли из Sketch и ищите панель переопределений. Вы не найдете ее, потому что вместо использования отдельной панели вы переопределяете свойства компонента, просто редактируя их напрямую. Figma позволяет вам исследовать все слои компонента напрямую, как если бы это была простая группа:
Также есть кнопка для сброса любых созданных вами переопределений, это маленький ромб со стрелкой внутри:
Поскольку вы можете добавлять или удалять любой стиль компонента, скрывать или отображать любой слой, на практике это делает переопределения Figma мощнее, чем в Sketch, где вы ограничены только функциями, отображаемыми на панели переопределений.
Однако основное ограничение переопределений компонента Figma заключается в том, что вы не можете изменять размеры или положение вложенного элемента. Например, если у вас есть компонент кнопки, вложенный в компонент заголовка, вы не можете изменить размер или положение кнопки, она заблокирована на месте и действует в соответствии с применяемыми к ней ограничениями масштабирования. Единственное исключение – текстовое поле будет расширяться, если вы напишете более длинный текст, если это не противоречит его ограничениям.
Эти ограничения масштабирования очень мощные и действуют, как сочетание классических правил адаптивного дизайна и ограничений, которые вы могли бы использовать при разработке приложений для iOS. Ключевым аспектом создания многократно используемых компонентов Figma является освоение этих ограничений.
Одним из вариантов использования является создание иконки, которая находится в конце выровненного по левому краю текста. Применяя правильные ограничения, вы можете сделать этот текст редактируемым и при этом быть уверенным, что иконка находится на нужном месте.
Слабые стороны Figma
Пока вы еще размышляете, нужно ли вам переходить со Sketch, имейте ввиду, что Figma не хватает несколько аспектов, которые есть у Sketch. Важно помнить об этих недостатках принимая решение.
Прочее
Изменение масштаба:
- Удерживайте z и кликните мышкой, чтобы увеличить.
- Удерживайте z и перетащите, чтобы увеличить область.
- Удерживайте z и ?, чтобы уменьшить масштаб.
- Удерживайте пробел для панорамирования.
Color Picker: Кликните по образцу цвета, затем используйте клавиши со стрелками ? и ?, чтобы осветлить или затемнить цвет.
Панель свойств: вы можете выбрать заливку, обводку или эффект, щелкнув по пространству вокруг него. Затем вы можете скопировать его (?C) и вставить в любой другой символ или фигуру (?V), чтобы вставить скопированное свойство.
Группы: если вы удалите все элементы в группе, она исчезнет. Точно так же, если вы создаете текстовую область и ничего не пишете, она исчезнет. Никаких пустых групп!
Изображения: когда вы добавляете растровое изображение, оно действует как заливка внутри прямоугольника (например, background-image в CSS). Это позволяет легко применить маску к изображению, просто изменив размер прямоугольника. Меньше масок!
В Figma есть еще несколько полезных функций, например, инструменты, которые помогут вам с сетками макетов, возможность добавлять реальные образцы цветов, которые можно применять к компонентам вместо заливок. Но я оставлю их на потом, когда вы разберетесь с основами.
Стоит ли переключаться на Figma?
На момент написания этой статьи, нельзя реально предположить, что Figma лучше, чем Sketch, как и наоборот. Оба приложения имеют свои сильные и слабые стороны, и тот факт, что они сосуществуют, означает, что на рынке присутствует здоровая конкуренция, которая принесет пользу обоим. На самом деле, некоторые из основных причин использования Figma (работает в браузере, отлично подходит для совместной работы) в той или иной форме в 2019 году уже относится и к Sketch. Зная это, стоит ли менять рабочий инструмент?
Вам следует рассмотреть возможность перехода на Figma, если сильные стороны (в том числе сообщество) перевешивают недостатки (изучение нового инструмента, отсутствие поддержки плагинов).
Вам не следует переключаться на Figma, если эти основные преимущества не важны для вас или вашей команды, или, если вы полагаетесь на определенный плагин или сложившийся рабочий процесс.
Sketch – это замечательное приложение, и если оно вам подходит, оставайтесь с ним. Если вы действительно хотите переключиться на Figma, не делайте этого, если вам нужно выполнить проект в сжатые сроки, потому что, хотя кривая обучения при переходе из Sketch невелика, она все-таки есть. Вместо этого, когда у вас будет время, прочтите учебные руководства. А затем переключайтесь на новый инструмент, когда будете готовы. Я надеюсь, что эта статья помогла вам с выбором инструментов дизайна!
Создать дизайн сайта в Figma на сегодняшний день – наиболее простой и быстрый способ реализации web-проекта. Платформа отличается интуитивным интерфейсом, простотой, возможностью совместной работы. На этом плюсы не ограничиваются, их куда больше, но и недостатками приложение не обделено.
И все же, работать в Figma удобно, приятно, а главное просто. Больше никаких заморочек с выгрузками из Adobe Illustrator, корпений в Sketch. О том, почему стоить переходить на Figma, какими плюсами и минусами обладает приложение и как начать в нём работать, вы узнаете из нашего материала.
6 причин популярности редактора Figma
Figma — это графический онлайн-редактор для дизайнеров и веб-разработчиков, позволяющий создавать интерактивные макеты, прототипы, векторные файлы, прорисовывать детали интерфейса.
Еще не так давно для организации командной работы дизайнеров каждому специалисту необходимо было установить у себя специальную программу вроде Adobe Illustrator, скачать на свой компьютер макет, настроить интерфейс и затем после любых правок отправлять на проверку откорректированные файлы. Принцип действия редактора Figma совершенно отличается.
6 причин популярности редактора Figma
Программа имеет открытый исходный код, поэтому к разработке дизайна сайта в может подключаться любое число специалистов с любых устройств. Всё, что для этого нужно – стабильный интернет и какой-либо браузер.
Figma снискала себе популярность по целому ряду причин:
- Возможность организации совместной работы.
Особенно это ценная опция, когда речь идет о масштабных проектах. Вообще, Figma – единственный графический дизайнер, позволяющий объединить в одном рабочем пространстве всех необходимых специалистов (в качестве добавленных пользователей):
- дизайнеры в едином окне выполняют отрисовки;
- верстальщики корректируют и редактируют файл;
- менеджер следит за всем процессом, управляет им, указывает на проблемные места;
- разработчики вносят свои коррективы еще до момента подачи проекта на согласование заказчику. Это позволяет изначально вынести оценку предстоящим работам, продумать дизайн, чтобы в процессе реализации было меньше проблем.
Ваш Путь в IT начинается здесь
Подробнее
Внутри дизайнерского окна каждый из специалистов может задавать вопросы, писать свои комментарии, что значительно упрощает весь процесс работы. Это, в частности, касается согласования рабочих моментов, на обсуждение которых в чате обычно уходит довольно много времени. Приложение сохраняет в истории файла все написанные к нему комментарии.
Настройки приватности тоже предусмотрены достаточно гибкие:
Сохранение материалов (на срок 30 дней) в собственный облачный сервис происходит на автомате. При этом макеты можно в любой момент открывать, копировать, редактировать. Любые исправления тоже сохраняются в автоматическом режиме.
При работе над долгосрочными проектами с макетами поступаете как с обычными документами, то есть просто скачиваете к себе на компьютер и там сохраняете. Желательно каждую новую версию подписать и добавить небольшое описание, чтобы потом не запутаться.
Хотите больше зарабатывать или работать удалённо? Запутались в разнообразии профессий и не знаете, куда двигаться?
Команда GeekBrains вместе с экспертами по построению карьеры подготовили документы, которые помогут найти и выбрать востребованную высокооплачиваемую профессию.
Обзор Figma для пользователей Sketch
Figma — это приложение, которое ускоряет и упрощает создание прототипов и программное обеспечение. Figma и Sketch схожи по своей функциональной значимости, однако на нее следует обратить внимание. Ниже в статье представлены все плюсы и минусы использования данного приложения.
- Бесплатное пользование, и доступное сотрудничество в группах открытого исходящего кода
- Фигма кроссплатформенная и дает возможность пользователю выполнять действия в браузере.
Также в файле этой программы вы можете настраивать разные режимы, как просто ознакомительный просмотр или доступ с режимом внесения правок. Данная программа очень удобна в проектном пользовании, где некоторые из членов могут просто наблюдать за процессом, не принимая участия.
Если вы решили перейти на Figma со Sketch
Обе программы практически идентичны и имеют схожий интерфейс. Первое, что можно заметить это расположение панелей меню, и нескончаемое пространство рабочей области. Для большего удобства работы в приложении, вам необходимо будет установить его на рабочий стол, а не использовать браузерную версию.
Разница в использовании Figma заключаться еще и в том, что на рабочем столе незначительно отличаются возможности работы с элементами и увеличенное время запуска, чем при применении в браузере.
Фреймы и холсты
Файлы
Для сохранения файла и истории в приложении, нажмите в верхнем левом углу ( /) и выберите File -> Save to Version History (S). У вас сохраниться возможность просматривать историю и восстанавливать предыдущие версии в случае необходимости. Предыдущая версия в случае восстановления будет дополнять новую, отображая прежние элементы.
- Удерживание Z с кликом мыши – увеличивает.
- Для увеличения выбранной области – перетащите зажатую Z.
- Удерживаемая комбинация z и — уменьшает масштаб.
- Для панорамирования зажмите пробел.
Color Picker: Затемнение или осветление цвета- клик по элементу, после чего нажать кнопки со стрелками ? и ?
Панель свойств: Кликнув на пространство вокруг объекта, вы сможете изменить его обводку, заливку или эффект.
Копирование — комбинация (C) и вставить (V).
Группы: При удалении всех объектов из группы, она также исчезнет.
Изображения: растровая картинка при добавлении отображается заливкой в средине прямоугольника. Что дает возможность использовать маску для картинки с помощью масштабирования прямоугольника.
В одной точке совмещены несколько соединений при использовании графики, в то время как в Иллюстратор или Скетч она может иметь только две.
Стоит ли переходить на Фигма?
Невозможно утвердительно сказать, что лучше Фигма или Скетч. Каждое из приложений имеет как сильные так и слабые стороны. Обе программы позволяют работать коллективно в браузере, однако стоит ли полностью переходить на одну из них и отказываться от другой?
В Фигма плюсов (возможность групповой работы) больше чем минусов (не поддерживаются плагины). Вам не следует переходить на эту программу, если новые плюсы не существенны для вас и устраивает привычный режим работы с использованием других программ.
Если вы привыкли к использованию Sketch, и вас все устраивает, тогда не следует переходить на другое приложение. Не стоит резко переходить на новую программу, когда вы находитесь в процессе выполнения работы с сжатыми сроками, это может только усложнить ситуацию. Надеюсь, что эта статья поможет вам в выборе наиболее подходящего инструмента.
Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна, и учиться Вам теперь станет в удовольствие!
Для дизайнеров существует великое множество программ, и каждая из них по-своему уникальна. Одним из самых популярных продуктов для UX/UI-дизайна является Figma.
Поговорим о том, что же представляет собой этот сервис, узнаем, в чем его главные особенности, а также задействуем его на практике.
Что такое Figma
Figma – онлайн-сервис для дизайнеров, веб-разработчиков и маркетологов. Он предназначен для создания прототипов сайтов или приложений, иллюстраций и векторной графики. В редакторе можно настроить совместную работу, вносить и обсуждать правки, причем как в браузере, так и через приложение на компьютере.
Возможности и особенности Figma
Хотелось бы сначала отметить ключевые моменты, благодаря которым Фигма набрала столь огромную популярность.
Если тех возможностей, что даются бесплатно, для вас недостаточно, то можно купить подписку. Описание тарифов ниже.
Минусы Figma
Естественно, графический редактор имеет пару недостатков, но они не столь существенно влияют на рабочий процесс при его грамотной организации. Например, требуется наличие подключения к интернету, ведь без него работать в Figma невозможно. А еще интерфейс редактора представлен только на английском языке.
Как пользоваться Figma
Разберу, как пользоваться Фигмой. Сначала речь пойдет о входе в аккаунт. Я покажу, как это сделать в браузере.
Я выбрала Google и авторизовалась через свой аккаунт. Следующий этап – ввод имени и выбор сферы. Также можно кликнуть по галочке для подписки на рассылку, далее нажимаем по кнопке для создания аккаунта.
Следом откроется рабочее пространство с ранее созданными проектами (если они, конечно, у вас были). Новички пройдут краткий ознакомительный курс по основным функциям. Теперь можно приступать к работе!
Создание нового файла
Импорт файлов
Если вы ранее использовали приложение Sketch, можете импортировать из него проекты в Figma. Как уже говорилось ранее, ни один элемент при этом не пострадает – шрифты, кривые и изображения никуда не денутся и не сместятся. Срабатывает даже простое перетаскивание файла из первого приложения во второй сервис. Доступно копирование отдельных элементов в формате SVG.
Разработка прототипов в Figma
Перейдем к элементам разработки интерфейсов. Рассмотрим настройку фреймов, слоев, макетов и сеток, типографики и многого другого.
Макеты и сетки
Просмотр прототипов
Работа с изображениями
В Figma можно перемещать изображения из разных источников – перемещать из памяти компьютера, а также копировать и вставлять из интернета. При этом не стоит забывать об авторских правах на картинки (об этом я, кстати, рассказывала ранее).
На этом работа с изображениями не ограничивается. В данном графическом редакторе предусмотрено наложение эффектов и изменение некоторых параметров. Все это доступно в специальной панели в правой части, которая выходит при выделении картинки.
Работа с компонентами
Работа со стилями и цветами
Графический сервис хорош еще тем, что в нем можно менять стили сразу нескольких элементов. А еще есть возможность создания собственного цветового варианта. Для этого необходимо просто создать объект, выделить его, затем нажать на квадратную кнопку, которая показана на скриншоте.
Слои и группы
Совместное использование
Мы помним, что в Фигма можно создавать и совместно редактировать различные проекты. Теперь подробнее нужно раскрыть тему создания команды и приглашения в нее других пользователей.
Типографика
По умолчанию в Фигма установлены шрифты Google. Для десктопной версии вы сможете установить специальный плагин Font Helper для использования локальных шрифтов с вашего компьютера.
Чтобы создать текст, следует выбрать соответствующую иконку в панели управления или нажать на латинскую букву T. Все настройки отображаются в правом окне, в том числе размер, цвет, выравнивание, тип шрифта, его стиль и прочие элементы.
Установка плагинов
Все установленные плагины можно посмотреть в одноименном разделе, перейдя в настройки профиля.
Фреймы
Чтобы увидеть параметры фрейма, необходимо нажать на кнопку F. Справа отобразится панель с разными вариантами артбордов. Можно в одном проекте выкладывать по несколько фреймов разных форматов, причем отдельно друг от друга.
Есть возможность создания артборда нужного вам размера. Для этого следует открыть соответствующий раздел и в рабочем пространстве с помощью мыши создать фрейм подходящего формата.
Заключение
Figma – действительно крутая программа. Даже у меня появилось желание заняться разработкой дизайна интерфейсов, настолько все просто и удобно. Начинающие пользователи легко разберутся с тем, как работать в ней.
Не забываем, что это идеальное решение для командной работы. Аналогов, конечно, много, но этот редактор определенно стоит уделенного ему внимания.
Читайте также: