Москва +7 (495) 772 97 91

Что такое Figma: полная инструкция по использованию редактора

Figma (Фигма) — это частично бесплатный онлайн-редактор векторной графики, позволяющий работать в командах. Презентации, прототипы, макеты сайтов, лендинги, векторную графику, интерфейсы, иллюстрации и мобильные приложения — все это можно сделать в редакторе. Простыми словами, Figma — это мощный векторный редактор с поддержкой разных платформ.

Для работы с этим редактором нужен браузер и подключение к интернету. Если вы хотите использовать редактор только для себя, можно обойтись бесплатным тарифом. Для командной работы лучше выбрать платный тарифный план.

Для чего нужна Figma

Вот лишь три примера силы «Фигмы»:

  1. Вы подготовили 100 макетов, но понадобилось внести изменение в название пункта меню. Воспользовавшись соответствующим компонентом редактора, вы решите эту проблему за 20-30 секунд.
  2. Вам необходимо сверстать макеты для 5 разных экранов. Задавать разрешения для каждого из них вручную не придется: в редакторе есть готовые фреймы, а также предусмотрена необходимая высота/ширина для экранов разных типов устройств.
  3. Вы хотите работать над прототипом сразу с несколькими участниками — верстальщиком, дизайнером, продакт-менеджером — и видеть вносимые ими изменения в реальном времени. Для Figma нет ничего проще.

Перечислим все плюсы Figma:

  1. Работа по принципу «нарисовал = сверстал». Это не Photoshop, где можно создать такие элементы, которые будет невозможно перенести на верстку: например, какие-то многослойные растровые изображения или изображения с сохранением нескольких масок.
  2. Есть бесплатная версия. Это все то же самое, что и в платных тарифных планах: неограниченное количество личных файлов, соавторов, плагинов и шаблонов, мобильное приложение. Ограничения: нельзя создать более трех Figma-проектов и трех FigJam-файлов.
  3. Можно работать в команде. При необходимости вы можете дать доступ любому сотруднику компании, чтобы он не обращался к вам каждый раз, когда нужно уточнить какую-либо деталь по проекту. Больше не нужно пересылать большое количество скриншотов между несколькими участниками проекта и пытаться понять, как именно макет отзывается на то или иное действие. Просто отправьте URL на проект и участники смогут посмотреть все, что их интересует (кнопка «Поделиться прототипом» или «Share Prototype»).
  4. Работа происходит в облаке, и вы не зависите от конкретного компьютера или любого другого устройства. Главное — помнить свой логин и пароль для авторизации в сервисе.
  5. При необходимости вы можете скачать десктоп-клиент. Figma также предлагает оффлайн-версию для пользователей, которые имеют ограничения по использованию интернета. По сути, разницы между оффлайн и онлайн-версиями нет, но в оффлайн-версии Figma не будет вести учет ваших изменений и синхронизировать их.
  6. Большое количество интеграций с продуктами других разработчиков. Например, с Principle, Flinto, Sketch для расширения функциональности редактора, добавления новых инструментов и оптимизации работы над теми компонентами, которым в Figma уделено недостаточное внимание.
  7. Полная кроссплатформенность. Работайте на любых устройствах (есть приложение для Android и iOS), а также на самых популярных операционных системах, включая Windows и macOS.
  8. Можно пользоваться сторонними плагинами. Они значительно расширяют функциональность редактора «из коробки». Например, плагин «Chroma» позволяет работать с цветовыми стилями в пару кликов.
  9. Есть поддержка анимации. Можно создавать анимацию интерфейса без дополнений и плагинов: это переходы, наслоения и многое другое.
  10. Продукт постоянно «допиливается» и улучшается. Разработчики вносят дополнения, улучшают функционал редактора, добавляют новые возможности.
  11. Есть режим работы для разработчиков. Благодаря ему можно за несколько секунд получить все необходимые по проекту данные: например, технические параметры конкретного изображения, а также их свойства, текстовый контент или, например, узнать расстояние между конкретными объектами на странице.
  12. Поддержка дочерних и родительских компонентов. Если вы один раз внесли изменение в родительский компонент, оно отобразится во всех дочерних элементах.

Работа с компонентами выручит вас при редактировании большого количества проектов или при работе над сложносоставными проектами.

Не лишен графический редактор ряда недостатков. Некоторые из них — условные, другие — вполне реальные и мешают работе:

  1. Для полноценной работы нужен постоянный доступ в интернет.
  2. Импорт работает некорректно. Импортируя сложные элементы, вы должны быть готовы к тому, что все составляющие объекта «едут» в произвольную сторону. Особенно текстовые блоки и все используемые в оригинале маски. Даже простейший SVG (Scalable Vector Graphics — масштабируемая векторная графика) не может быть импортирован полностью корректно.
  3. Нет полноценной системы тегов. Если вам нужно, например, разбивать файлы внутри команды на большое количество папок, редактор вас не выручит. Разбивка на проекты — это максимум, что предлагает «Фигма» с точки зрения иерархии файлов.
  4. Есть баги. Например, при изменении размера текста, когда он может смещаться и выходить за заданные границы.
  5. Обучиться за пару часов не получится. Даже если вы уже работали с векторными редакторами и сейчас, к примеру, переезжаете со Sketch или Illustrator. И тем более придется потратить время на обучение, если вы не работали с такими инструментами.
  6. Для командной работы возможностей бесплатного тарифа точно будет недостаточно. Приготовьтесь платить: самый доступный тариф — от 12 долларов в месяц.
  7. Нет версии под Linux. Но есть неофициальные десктоп-приложения от разных разработчиков, например, Figma-linux.
  8. Пропадают изображения шрифтов и других элементов, если долгое время работать сразу с несколькими макетами.
  9. Справочные материалы только на английском языке, да и любительских сообществ по Figma гораздо меньше, чем по тому же Adobe Illustrator.

С теорией все. Теперь переходим к практике. Запасайтесь чаем и чем-нибудь хрустящим: мы начинаем!

Как работать с «Фигмой». Основные операции

Чтобы начать пользоваться сервисом, откройте его сайт и нажмите кнопку «Sign up» в правом верхнем углу экрана:

Регистрируемся на сайте
Регистрируемся на сайте

Укажите свой e-mail, введите пароль и нажмите «Create account»:

Заполните форму авторизации или авторизуйтесь при помощи Google
Заполните форму авторизации или авторизуйтесь при помощи Google

В случае успешной авторизации появится новое окно, где нужно рассказать о себе. Выберите имя и род деятельности:

Выберите имя и укажите, какой работой вы занимаетесь
Выберите имя и укажите, какой работой вы занимаетесь

Нажмите кнопку «Create account»: все, аккаунт зарегистрирован. Мы сразу попадаем в менеджер файлов:

Так выглядит главный экран менеджера файлов
Так выглядит главный экран менеджера файлов

В любом случае нам понадобится создать новый файл. Чтобы это сделать, кликните по кнопке «New design file» в левой части экрана:

Кликните по синей кнопке, чтобы создать новый дизайн или прототип
Кликните по синей кнопке, чтобы создать новый дизайн или прототип

Вы сразу попадете в окно графического редактора:

Обновленный интерфейс графического редактора
Обновленный интерфейс графического редактора

Инструменты, интерфейс и все кнопки графического редактора мы разберем ниже, а сейчас расскажем, как работать с составными частями сервиса.

Если же вы хотите импортировать файл из Figma, Sketch или файл изображения, на главном экране нажмите кнопку «Import file» в правом углу экрана и выберите необходимый файл на жестком диске компьютера:

Импортируем файл в графический редактор
Импортируем файл в графический редактор

Если вы не хотите пользоваться онлайн-версией редактора, скачайте десктоп-клиент. Для этого откройте раздел «Загрузки» на сайте редактора и выберите клиент для используемой операционной системы:

Скачиваем десктоп-клиент для Windows или macOS
Скачиваем десктоп-клиент для Windows или macOS

Здесь же вы можете загрузить мобильное приложение для iOS или Android, а также инсталляторы для шрифтов для Windows или macOS.

Как работать в менеджере файлов

Давайте посмотрим, как устроен менеджер файлов Figma. Тем более, в последних версиях он значительно изменился с точки зрения дизайна и расположения ключевых компонентов.

Менеджер файлов — это инструмент для управления проектами. Здесь можно:

  • изменить настройки профиля;
  • присоединиться к коммьюнити;
  • обновить тарифный план;
  • создать новую команду и т. д.

Верхнее навигационное меню содержит несколько элементов:

Верхнее меню менеджера файлов редактора
Верхнее меню менеджера файлов редактора

Кнопка выбора пользователя (крайний левый верхний угол с вашим именем). Она позволяет быстро переключаться между несколькими пользователями, привязанными к вашему аккаунту.

Кнопка выбора пользователя
Кнопка выбора пользователя

Отсюда же можно быстро перейти в Community. Это огромное сообщество пользователей редактора и просто его фанатов по всему миру.

Поисковая строка (в верхнем навигационном меню). При помощи нее вы можете быстро найти необходимые файлы, людей или команды, которым они принадлежат:

Поисковая строка в менеджере файлов
Поисковая строка в менеджере файлов

Иконка колокольчика. Это раздел уведомлений, которые относятся к вашим проектам или работе в команде. Очень полезный инструмент, если вы работаете сразу в нескольких проектах и боитесь что-то упустить:

Уведомления о новых действиях в ваших проектах и ваших командах
Уведомления о новых действиях в ваших проектах и ваших командах

Аватар профиля (в правом углу экрана). Отсюда происходит управление вашим внутренним профилем:

Аватар пользователя в правом углу экрана
Аватар пользователя в правом углу экрана

Здесь много инструментов и функций, поэтому взглянем на них детально.

Internal profile. Здесь вы можете:

  • посмотреть файлы с привязкой к конкретным проектам;
  • добавить описание к профилю;
  • увидеть свою принадлежность к определенным командам;
  • посмотреть недавние проекты.
Настройки профиля в разделе «Internal profile«
Настройки профиля в разделе «Internal profile»

Plugins. Отсюда происходит управление уже установленными плагинами.

Найти их вы можете в разделе Community. Кроме того, в этом разделе отображаются плагины, которые вы разрабатывали самостоятельно.

Внимание: чтобы создавать и управлять собственными плагинами, вам необходимо установить десктоп-клиент.

Settings. Здесь происходит управление настройками вашего аккаунта. Вы можете изменить:

  • имя аккаунта;
  • email;
  • пароль;
  • а также включить двухфакторную аутентификацию.

Отсюда также можно обновить текущий тарифный план и включить уведомление о файлах или о появлении новых комментариев от других пользователей:

Настройки аккаунта пользователя
Настройки аккаунта пользователя

Get desktop app. Скачайте десктоп-клиент графического редактора в один клик.

Нажмите Get desktop app, чтобы скачать десктоп-клиент редактора
Нажмите Get desktop app, чтобы скачать десктоп-клиент редактора

Add account. Добавление нового аккаунта.

Log-out. Выйти из текущего аккаунта.

С верхним меню — все. Теперь переходим к рассмотрению левого навигационного меню:

Навигационное меню в левой части экрана
Навигационное меню в левой части экрана

Что здесь есть:

Recents. Быстрый доступ к недавним проектам. Все файлы, которые вы открывали недавно, будут отображаться здесь.

Раздел Recents в менеджере файлов
Раздел Recents в менеджере файлов

Drafts. Быстрый доступ к черновикам. На этом экране вы увидите все сохраненные проекты, которые вы перевели в черновики.

Раздел Drafts в менеджере файлов
Раздел Drafts в менеджере файлов

Community. Быстрый доступ к одноименному на сайте Figma. Здесь доступно более тысячи шаблонов, виджетов, плагинов, созданных профессиональными разработчиками и энтузиастами.

Раздел Community содержит тысячи дополнений для графического редактора
Раздел Community содержит тысячи дополнений для графического редактора

Upgrade. Обновление текущего тарифного плана. Кнопка пригодится, если вы планируете работать в командах или возможностей бесплатного тарифного плана вам не хватает.

Нажмите эту кнопку, чтобы обновить текущий тарифный план
Нажмите эту кнопку, чтобы обновить текущий тарифный план
  • Starter: бесплатный навсегда, максимум три проекта.
  • Professional: 12 долларов в месяц.
  • Для организаций: 45 долларов в месяц.

Team project. В этом разделе появятся пользователи, редактировавшие ваши проекты. Доступ к файлам в вашем проекте может получить любой участник такой команды.

Раздел Team project находится в левом навигационном меню
Раздел Team project находится в левом навигационном меню

Также обратите внимание на две кнопки в правом углу экрана:

Кнопки «Добавить в избранное» и «Поделиться»
Кнопки «Добавить в избранное» и «Поделиться»

Благодаря этим кнопкам вы можете добавить командный проект в избранное или поделиться им. В последнем случае нужно будет отправить инвайт другому пользователю. Для этого указывается один или несколько е-мейлов и выбирается роль пользователя — просмотр или редактирование:

Пробуем поделиться проектом с другим пользователем
Пробуем поделиться проектом с другим пользователем

Create new team. Создание новой команды. После создания команды вы можете пригласить в нее других пользователей.

Как работать в Figma. Практика

Интерфейс графического редактора Figma необычный, он не похож на Adobe Illustrator, Sketch или Canva:

Рабочая область «Фигмы»
Рабочая область «Фигмы»

Да, интерфейс полегче, чем в том же Adobe Photoshop. Но открыв графический редактор впервые, можно запутаться или попасть в небольшой ступор.

Полезная подсказка: используйте функцию «Quick actions», чтобы быстро найти необходимое меню, команду или плагин. Она находится в меню «Файл» или вызывается при помощи сочетания горячих клавиш Control + /.

Прежде чем смотреть все панели и меню редактора, давайте разберем самые частые сценарии его использования.

Функция «Quick actions» — это быстрый доступ ко всем меню и командам, которые есть в «Фигма»
Функция «Quick actions» — это быстрый доступ ко всем меню и командам, которые есть в «Фигма»

Как работать с фреймами

Чтобы открыть окно редактирования фрейма, используйте верхнее навигационное меню или нажмите клавишу F. В открывшемся меню справа вы увидите девять готовых сценариев для нового фрейма:

Подгонять разрешения для разных экранов вручную больше не придется
Подгонять разрешения для разных экранов вручную больше не придется

Доступны следующие варианты:

  1. Телефон.
  2. Планшет.
  3. Десктоп.
  4. Презентация.
  5. Умные часы.
  6. Бумажные листы (A4 и A6, например).
  7. Социальные сети.
  8. Community.
  9. Архивные фреймы.

При необходимости вы можете быстро проверить созданный объект. Для этого откройте вкладку «Inspect» в правом углу экрана и выберите операционную систему или просто проверьте код в «стилях»:

Вкладка «Inspect» создана специально для разработчиков
Вкладка «Inspect» создана специально для разработчиков

Она позволяет просматривать и копировать существующий код и его значения для любых проектов. Скопируйте отдельные позиции или целые наборы значений, чтобы значительно ускорить и упростить процесс разработки.

Редакторы могут получить доступ к вкладкам «Дизайн» и «Прототип» на правой боковой панели. Зрители имеют доступ только к вкладкам «Проверка» и «Экспорт».

Вкладки «Дизайн» и «Прототип»
Вкладки «Дизайн» и «Прототип»

Как создать новый макет

Выделите необходимый слой правой кнопкой мыши и перетащите курсор, удерживая ее. Отпустите правую кнопку и посмотрите в правую часть редактора. Нам необходимо перейти на вкладку «Design»:

Открываем ее, чтобы получить доступ к макету сетки
Открываем ее, чтобы получить доступ к макету сетки

Здесь нас интересует функция «Layout Grid», или макет сетки. Сперва выберите необходимый слой в левом меню (Layers). Затем, чтобы настроить параметры сетки, кликните по иконке макета:

Нажмите на эту иконку
Нажмите на эту иконку

Теперь переходим в параметры макета сетки.

Чтобы настроить сетку для слоя, кликните по иконке Layout grid settings
Чтобы настроить сетку для слоя, кликните по иконке Layout grid settings

Вы можете выбрать тип (строки, столбцы или сетка), задать размер, цвет, и при необходимости — канал прозрачности.

Как работать со шрифтами

Чтобы добавить в проект текст, перейдите в одноименный раздел через верхнее навигационное меню или нажмите клавишу «T»:

Инструмент «Text» для работы с типографикой проекта
Инструмент «Text» для работы с типографикой проекта

Правой кнопкой мыши выделите необходимую область и напечатайте текст. В правом окне вы увидите все необходимые дизайнеру параметры: выравнивание, стиль, размеры, тип начертания, цвет, слои, заливка, эффекты (включая тени) и многое другое:

Работа с текстом. Параметры типографики выделены красным
Работа с текстом. Параметры типографики выделены красным

Если шрифтов Google вам недостаточно, можно использовать те, которые есть у вас на жестком диске или флешке. Для этого установите плагин с необходимым функционалом, например, Font Helper.

Как просмотреть созданный дизайн на разных экранах и разных типах устройств

Прототипирование в «Фигме» сделано не настолько подробно, как в специализированных инструментах, но для решения базовых задач вполне сгодится. Откройте необходимый проект и перейдите на вкладку «Prototype»:

Перейдите на выделенную вкладку (Prototype), чтобы открыть инструмент прототипирования
Перейдите на выделенную вкладку (Prototype), чтобы открыть инструмент прототипирования

Допустим, нам необходимо создать прототип для iPhone 11. Выбираем эту модель в списке «Device», затем настраиваем ориентацию экрана, тип модели и получаем предпросмотр (но это еще не все):

Выберите необходимое устройство для прототипирования
Выберите необходимое устройство для прототипирования

В строке «Background» вы можете изменить цвет фона.

После того, как все параметры устройства будут настроены необходимым образом, кликните по иконке треугольника в правом верхнем углу экрана:

Нажмите кнопку «Present», чтобы сымитировать созданный дизайн на экране необходимого устройства
Нажмите кнопку «Present», чтобы сымитировать созданный дизайн на экране необходимого устройства

Мы получили результат с учетом необходимой ориентации экрана и типа устройства:

Так наш дизайн будет выглядеть на экране iPhone 11
Так наш дизайн будет выглядеть на экране iPhone 11

Как работать со слоями

Все созданные элементы отображаются на вкладке «Layers» (Слои), которая находится в крайней левой части экрана:

Работа с группировкой слоев интуитивно понятная. Можно копировать, заменять, вставлять
Работа с группировкой слоев интуитивно понятная. Можно копировать, заменять, вставлять

Со слоями вы можете делать все то же самое, что и в других графических редакторах. Например:

  1. Копировать.
  2. Вставлять.
  3. Заменять.
  4. Работать с группами слоев.
  5. Скрывать / показывать.
  6. Менять ориентацию.
  7. Добавлять маски.
  8. Добавлять автоматические слои.

На этой же вкладке отображаются все созданные вами группы объектов.

Редактирование фотографий или иных изображений

Конечно, многообразия инструментов растровых редакторов здесь нет и в помине, но базовые возможности — изменение параметров изображения, фильтры, эффекты — здесь доступны.

Чтобы добавить новое изображение в проект, откроете меню «File» и выберите пункт Place Image:

Выберите пункт Place image
Выберите пункт Place image

Найдите необходимые изображения на жестком диске компьютера. Теперь кликните правой кнопкой по рабочей области в необходимом месте — все, изображение успешно добавлено в ваш проект.

Когда вы используете метод «Поместить изображение» (Place image) — получаете возможность добавлять несколько изображений одно за другим. Все они обрабатываются как заливки и вы можете использовать этот метод для добавления выбранных изображений к уже существующим фигурам.

Один из вариантов использования Place image — быстрое добавление изображений профиля к трем различным дизайнам (круг, квадрат и прямоугольник с закругленными углами), которые вы хотите протестировать.

Переходим к редактированию изображения. Сделайте двойной клик по добавленной картинке в окне визуального редактора — откроются основные параметры изображения:

Окно редактирования свойств изображения
Окно редактирования свойств изображения

У изображения можно изменить экспозицию, контраст, насыщенность, цветовую температуру, оттенок, светлые тона и тени. Как видим, минимальные инструменты для цветокоррекции в редактор предусмотрены.

Здесь даже есть редактирование наложения слоев, которое сделано по типу Adobe Photoshop:

Выберите метод наложения
Выберите метод наложения

Наконец меняем то, как слои будут накладываться друг на друга:

Изменяем режим наложения слоев
Изменяем режим наложения слоев

Вот другие важные функции редактирования изображения, которые могут вам понадобиться:

  • Fill — изменение свойств заливки.
  • Crop — обрезка картинки с фиксацией необходимой вам части.
  • Tile — плитка. Называется так потому, что вся область экрана будет заполнена небольшими копиями главной картинки.

Также можно отразить изображение по горизонтали или вертикали (сочетание горячих клавиш Shift + V и Shift + H, соответственно).

Часто требуется быстро удалить фон на фотографии. К сожалению, сделать это так быстро, как в Adobe Photoshop, не получится. Наиболее эффективные решения для этой задачи представлены отдельными плагинами, например, Remove BG.

Как изменять стиль сразу для нескольких элементов в проекте

Сформируйте любой необходимый в проекте объект. Например, полигон. Добавьте его на фрейм как обычно. Выделите объект правой кнопкой и найдите уже знакомую нам строку Fill (заливка):

Настройки заливки в навигационном меню справа
Настройки заливки в навигационном меню справа

Кликните на иконку Style и выберите цвет из необходимой коллекции:

Кликните значку Style в строке Fill
Кликните значку Style в строке Fill

Это очень удобно. Функцию особенно ценят дизайнеры, работающие сразу с несколькими проектами. Больше не нужно вручную подбирать цвета каждый раз при изменении какого-либо объекта. Достаточно один раз добавить все необходимые цвета в конкретный стиль, сохранить его и затем использовать любое количество раз.

Интерфейс Figma

Мы увидели, как выполнять ряд наиболее популярных операций в редакторе. Пришло время посмотреть, как устроен интерфейс редактора, содержащий десятки команд для их проведения. Прочитайте этот раздел внимательно и до конца. Вопросов типа «где и что находится» больше не возникнет.

File

Меню управления файлом. В нем вы можете создать новый файл «дизайна», новый Fig-Jam или файл из Sketch. Также доступны следующие функции:

  • Place Image. Вставить картинку на конкретную точку рабочей области.
  • Safe to version history. Сохранить файл в историю версий.
  • Save local copy. Сохранить локальную копию файла.
  • Show version history. Показать историю версий.
  • Export. Экспортировать текущий проект.
  • Export frames to PDF. Экспортировать фреймы в PDF-формат. Чтобы совершить экспорт, в проекте должны присутствовать фреймы верхнего уровня.
Меню File используется для глобального управления файлами в редакторе
Меню File используется для глобального управления файлами в редакторе

Edit

Стандартное для всех графических редакторов меню редактирования. В нем доступны следующие функции:

  • Undo. Отменить.
  • Redo. Повторить.
  • Copy as. Копировать как. Можно сохранить в CSS, SVG или PNG.
  • Paste over selection. Вставить выделение.
  • Paste to replace. Вставить для замены.
  • Duplicate. Дублировать или скопировать.
  • Delete. Удалить.
Меню Edit создано для редактирования объектов
Меню Edit создано для редактирования объектов

Также доступна работа со значениями объекта:

  • Set default properties. Установить значения по умолчанию.
  • Copy / Paste properties. Функция копировать / вставить, для ускорения работы, также доступна.
  • Pick color. Это функциональная пипетка для выбора цвета. Просто кликните по необходимому пикселю, и цвет автоматически добавится в инструмент.

Широко представлены инструменты выделения:

  • Select all. Выбрать все выделения.
  • Select none. Снять все выделения.
  • Select inverse. Выбрать инверсию.
  • Select all with the same properties. Выбрать все с идентичными параметрами.
  • Select all with same: variant / fill / instance / stroke / font / effect / text. Удобный инструмент, если вам нужно выделить все с определенным эффектом или штрихом, например.

View

В этом разделе вы можете получить доступ ко всем функциям, которые касаются просмотра проекта и его элементов:

  • Pixel Grid. Показать сетку.
  • Layout grids. Вывести сетки слоев.
  • Rulers. Линейки.
  • Show slices. Показать фрагменты. Фрагменты позволяют указать определенную область экрана для экспорта, даже если они не объединены в одну группу. Просто перетащите фрагмент вокруг области, которую вы хотите экспортировать, и добавьте параметры экспорта в объект-фрагмент.
  • Comments. Показывать комментарии в проекте.
  • Show outlines. Показывать контуры.
  • Pixel preview. Предварительный просмотр в пикселях.
  • Mask outlines. Добавить маску на контур.
  • Frame outlines. Показывать контуры фрейма.
  • Resource use. Показать использование ресурсов.
Меню View
Меню View

Также здесь находятся инструменты просмотра, касаемые интерфейса программы:

  • Show / hide UI. Показать / спрятать пользовательский интерфейс.
  • Multiplayer cursors. Активировать многопользовательские курсоры.
  • Panels. Отсюда вы можете открыть все виды панелей: панель слоев, библиотеки, дизайна, прототипирования, панель инспекции кода.
  • Все инструменты типа Zoom (in / out / fit / 100 % и так далее). Для увеличения и отдаления рабочей области.
  • Previous / Next page. Для навигации между страницами.
  • Find previous / next frame. Для навигации между фреймами.

Object

Меню управления объектами проекта. Доступны следующие функции:

  • Group selection. Выбор группы.
  • Create section. Создать новую секцию или раздел.
  • Frame selection. Выбор фрейма.
  • Ungroup selection. Отвязать от группы выделенное.
  • Use as mask. Применить в качестве слоя-маски.
  • Ad auto layout. Создать автоматический слой.
  • Create component. Сформировать отдельный компонент.
  • Restore default thumbnail. Восстановить миниатюру по умолчанию.
  • Reset all overrides. Сбросить значения всех переопределений. Переопределения — это изменения, которые вы вносите в свойства каждого экземпляра (instance). Благодаря переопределениям вы можете настроить экземпляр в соответствии с его новым контекстом.
  • Detach instance. Отсоединить экземпляр.
  • Main component. Управление основным компонентом. В этом меню вы можете открыть основной компонент, присоединить переопределения к основному компоненту, восстановить основной компонент.

Компоненты — это элементы, которые вы можете применять повторно в любых своих проектах. Благодаря компонентам можно генерировать согласованные дизайны сразу для нескольких проектов. Вы можете сформировать компоненты из любых созданных слоев или объектов. Примеры компонентов: макеты, кнопки, иконки.

Одно из самых больших меню в редакторе — Object
Одно из самых больших меню в редакторе — Object

Также доступны следующие инструменты:

  • Bring to front / forward. Быстрый перенос на передний или задний план.
  • Send to back / forward. Отправка назад или вперед.
  • Flip horizontal / vertical. Быстрое отражение по горизонтали или вертикали.
  • Flip vertical. Отразить по вертикали.
  • Rotate 180° / 90°. Поворот объекта согласно требуемому углу. Доступен поворот вправо и влево.
  • Flatten selection. Сгладить выделение.
  • Outline Stroke. Работа с обводкой.
  • Boolean groups. Перенести в булевые группы. Булевые функции действительно полезны, когда дело доходит до проектирования сложных структур. Использование булевых групп (можно назвать их логическими группами) сэкономит много времени, которое раньше тратилось на ручное редактирование фигур. Доступны четыре типа булевых групп: объединение, вычитание, пересечение и исключение.
  • Rasterize selection. Растеризовать выделение. «Растеризация» позволяет преобразовать векторную форму (например, прямоугольник, круг или текст) и сгладить ее в пиксельное представление.

Здесь же вы найдете инструменты для показа / скрытия выделений (show и hide selection), блокировки (lock / unlock), скрытия остальных слоев (hide other layers), а также их сворачивания (collapse).

Можно быстро удалить заливку или обводку (remove fill и stroke, соответственно) либо удалить их вместе (Removal fill and stroke).

Vector

Меню управления векторами проекта. Векторы отличаются от инструментов типа перо. Перо и его вариации рисуют пути в виде петли с определенным направлением и всегда воссоединяются с оригинальной точкой. Вектор же не имеет направления и может разветвляется в любые стороны, также не требуется создание отдельного объекта для его пути. Так что можно создавать даже очень сложные объекты. Можно создавать внутри одного и того же объекта и с теми же свойствами. Удобно и наглядно.

Меню Vector
Меню Vector

Благодаря векторам можно создавать сложные объекты намного быстрее, чем при рисовании с помощью традиционных инструментов.

В меню Vector вы можете присоединить к вектору выделение, использовать плавное присоединение выделения, удалить и убрать эффект с выделения.

Text

Управление типографикой проекта. Для редактируемого текста доступно 11 функций:

  • Bold. Добавить начертание жирным.
  • Italic. Добавить начертание курсивом.
  • Underline. Сделать текст подчеркнутым.
  • Strikethrough. Сделать текст зачеркнутым.
  • Create link. Создать ссылку.
  • Bulleted list. Создать список с буллитами.
  • Numbered list. Создать список с цифрами.
  • Alignment. Выравнивание текста слева, по центру, справа. Также доступно выравнивание текста сверху, посередине и по низу.
  • Adjust. Регулировка параметров шрифта. Здесь вы можете настроить отступы, размер шрифта, его насыщенность, увеличить или уменьшить высоту строки, настроить межбуквенное расстояние.
  • Text Direction. Настройка направления текста: слева направо или справа налево.
 Меню Text
Меню Text

Arrange

Управление компоновкой объектов внутри проекта. Вы можете использовать следующие функции:

  • Round to pixel. Округлить до пикселя, чтобы удалить десятичные дроби таких атрибутов, как X, U, ширина, высота, граница и так далее.
  • Align left. Выровнять по левому краю.
  • Align horizontal centers. Выровнять горизонтальные центры.
  • Align right. Выровнять справа.
  • Align top. Выровнять сверху.
  • Align vertical centers. Выровнять вертикальные центры.
  • Align bottom. Выровнять по нижнему краю.
  • Tidy up или «Прибраться». Функция позволяет выравнивать любое количество объектов относительно друг друга. Она изменит отступы, расставит и поменяет их автоматически.
Наглядная демонстрация функции Tidy up
Наглядная демонстрация функции Tidy up
    • Pack horizontal. Скомпоновать элементы вплотную друг к другу горизонтально.

  • Pack vertical. Скомпоновать элементы вплотную друг к другу вертикально.
  • Distribute horizontal spacing. Распределить горизонтальное расстояние.
  • Distribute vertical spacing. Распределить интервал по вертикали.
  • Distribute left. Распределить слева.
  • Distribute horizontal centers. Распределить горизонтальные центры.
  • Distribute right. Распределить справа.
  • Distribute top. Распределить сверху.
  • Distribute vertical centers. Распределить вертикальные центры.
  • Distribute bottom. Распределить дно (по нижней границе).

Меню Arrange
Меню Arrange

Plugins

Этот раздел уже встречался нам. Просто напомним — в нем происходит управление плагинами. Можно запустить последний использовавшийся плагин, управлять плагинами, быстро перейти на страницу плагинов в Community.

Меню управления плагинами
Меню управления плагинами

Integrations

Меню управления интеграциями. Здесь можно подключить уже привычные для вас инструменты — чтобы создать максимально «бесшовный» процесс проектирования. Например, существуют интеграции с Principle, Zeplin, Dribble, Slack.

Preferences

Меню управления пользовательскими предпочтениями. В частности, вы можете настроить привязку к геометрии / объектам / сетке (Snap to geometry / objects / pixel grid).

Меню Preferences
Меню Preferences

Также можно оставить инструмент выбранным после использования (инструмент Keep tool selected after use) или задействовать альтернативную обработку масштабирования (опция называется Use alternate zoom handling).

Чтобы было нагляднее, дадим несколько сценариев настроек редактора и покажем, какие функции позволяют их воплотить:

  • Нужно заменить стандартные кавычки на умные. Используйте функцию Substitute smart quotes. Примечание: умные кавычки используют автозамену. В начале слова такая автозамена предполагает, что вам нужна левая (открывающая) кавычка; в середине слова или в конце вы получите апостроф или правильную (закрывающую) кавычку.
  • Зуммировать клавиатуру к выделению. Используйте функцию Keyboard zooms into selection.
  • Выделять слои при наведении. Используйте функцию Highlight layers on hover.

Также вы можете переименовать дублированные слои (используйте опцию Rename duplicated layers) и отразить объекты во время изменения размера (Flip objects while resizing).

  • Use number keys for opacity. Используйте цифровые клавиши для задания непрозрачности.
  • Open links in desktop app. Разрешить открывать ссылки в десктоп-клиенте.
  • Nudge amount. Величина смещения. Это количество пикселей, на которое смещается редактируемый объект при перемещении.

Libraries

Меню управления библиотеками. Библиотека — это специальный файл, в котором хранятся готовые элементы, созданные другими дизайнерами.

Меню Libraries
Меню Libraries

Get desktop app

Быстрая ссылка на скачивание десктоп-клиента. Больше ничего здесь нет.

Help and account

Справочные материалы и настройки аккаунта. Вы можете:

  1. Открыть страницу помощи на сайте редактора.
  2. Увидеть полезные горячие клавиши.
  3. Открыть форум.
  4. Посмотреть видеоуроки.
  5. Получить информацию об изменениях в последних релизах.
Меню Get desktop app и Help and account
Меню Get desktop app и Help and account

Основные инструменты Figma

Разберем главные инструменты редактора, доступ к которым осуществляется через верхнее меню:

  • Move и Scale.
  • Frame и Slice.
  • Rectangle (позволяет создать не только квадрат, и другие геометрические формы).
  • Pen и Pencil.
  • Text.
  • Hand tool.

  • Comments.
Верхнее меню позволяет получить доступ к главным инструментам графического редактора
Верхнее меню позволяет получить доступ к главным инструментам графического редактора

Move tools. Горячая клавиша V

Инструменты, предназначенные для перемещения объектов. Вы можете выбирать, перемещать и изменять размер объектов на доске.

Использование инструмента Move на нескольких объектах
Использование инструмента Move на нескольких объектах

Также в этом разделе находится инструмент «Scale» (горячая клавиша K). Он позволяет масштабировать любой кадр, его содержимое и все эффекты до любой заданной ширины или высоты. Можно выбрать столько кадров и слоев, сколько хотите. Доступно масштабирование по ширине, высоте или процентам.

Использование инструмента Scale
Использование инструмента Scale

Выделите созданный объект левой кнопкой мыши:

Появится новое меню вверху экрана
Появится новое меню вверху экрана

При помощи этого меню вы можете:

  1. Edit object. Отредактировать объект. Удобно формировать и редактировать фигуры благодаря «Перу» или использовать инструмент «Форма» — чтобы перетаскивать изображение на холст. Сразу после создания необходимой фигуры используйте кнопку «Редактировать объект» (находится в самой панели инструментов), чтобы быстро войти в режим векторного редактирования. Для решения этой задачи вы также можете дважды кликнуть по объекту или использовать клавишу Enter.
  2. Create component. Создать на его основе компонент.
  3. Use as mask. Использовать в качестве маски. Используйте маски, чтобы показать определенные области объектов и скрыть остальные. Это может сделать любой, у кого есть доступ к редактированию файла.

Frame. Горячая клавиша F

Инструмент предназначен для работы с фреймами в редакторе. Вы можете добавлять слои прямо на холст. Если вы разрабатываете дизайн для определенного устройства или размера экрана, сможете создать отдельный контейнер для своих проектов. Здесь на помощь и придут фреймы:

Редактор выделяет жирным шрифтом фреймы верхнего уровня на панели слоев и показывает названия любых фреймов верхнего уровня на холсте
Редактор выделяет жирным шрифтом фреймы верхнего уровня на панели слоев и показывает названия любых фреймов верхнего уровня на холсте

Фреймы позволяют выбирать область холста для создания своих рисунков. В отличие от традиционных артбордов, с ними вы можете вкладывать кадры в другие кадры. Такой подход позволяет создавать более сложные конструкции, которые работают вместе.

Фреймы — основополагающий элемент дизайна. Этот элемент используется в качестве контейнера верхнего уровня (например, окно просмотра устройства) и/или представляет области или компоненты в создаваемом дизайне.

Также в этом разделе находится «Срез», или «Slice». С его помощью просто выделить любую рандомную область проекта и затем отправить ее на экспорт, например, в SVG или JPG.

Этот инструмент позволяет разделить изображение на более мелкие части, которые соединяются вместе, как мозаика, но с прямыми краями. «Послайсить» изображение полезно, если у вас большое полотно. Разбивая его на части, вы добиваетесь того, что части изображения начнут загружаться первыми, давая пользователю знать, что дальше будет что-то еще.

Срез может находится прямо внутри группы элементов
Срез может находится прямо внутри группы элементов

Rectangle. Горячая клавиша R

Прямоугольник — одна из наиболее часто используемых фигур в Figma. Его отличительная особенность по сравнению с другими формами — возможность указывать независимые значения углового радиуса. Кроме прямоугольника, вы можете быстро добавить линию, стрелку, эллипс, полигон, звезду или любое изображение с вашего компьютера.

Инструменты внутри группы shape tools
Инструменты внутри группы shape tools

Pen. Горячая клавиша P

Инструмент нужен, чтобы соединять контуры с замкнутыми фигурами и создавать трехмерные формы так же, как если бы вы рисовали на бумаге. Самый наглядный сценарий: создаете куб только «Пером», после чего не нужно будет объединять или группировать 2D-фигуры вместе.

Куб, который мы создали пером
Куб, который мы создали пером

Также здесь находится инструмент «Pencil», или «Карандаш» (горячая клавиша для вызова Shift + P). Используйте его, чтобы делать наброски на холсте или других объектах.

Text. Горячая клавиша T

Удобное решение для создания текста и работы со шрифтами любой сложности. В этом инструменте все необходимое для создания типографики: шрифт, размер шрифта, его вес, высота строки и различные стили шрифта.

Примечательно, что в инструменте «Текст» есть собственная библиотека шрифтов. Работу с текстом мы уже разбирали в разделе «Интерфейс».

Работа с объектом типа «текст»
Работа с объектом типа «текст»

Hand Tool. Горячая клавиша H

Инструмент предназначен для просмотра проекта и позволяет нажимать по рабочей области экрана без случайной активации контуров при наведении, выделении или перемещении объектов.

«Рука» особенно выручает, если вы используете редактор на устройстве с сенсорным экраном
«Рука» особенно выручает, если вы используете редактор на устройстве с сенсорным экраном

Благодаря Hand tool вы можете перемещаться по файлу пальцами.

Add comment. Горячая клавиша С

Инструмент создан для работы с комментариями. Смысл комментариев такой же, как, например, в Google Docs. Комментарии можно использовать, чтобы отвечать на отзывы, корректировать свои проекты и ускорять итерации — и все это из исходного файла проекта. Вы и ваша команда можете писать комментарии к холсту или к определенным кадрам и слоям в файлах и прототипах. Редактор отображает комментарии прямо там, где вы их добавили на холсте.

Примеры комментариев для отдельных файлов
Примеры комментариев для отдельных файлов

Резюме

Мы убедились, что Figma — по-настоящему крутой инструмент как для одиночных дизайнеров, так и для больших команд. Используя этот редактор, ведущий специалист может проверить:

  • Что проектирует команда в настоящий момент, просто открыв общий файл,
  • Какие изменения были внесены сегодня, вчера, позавчера.
  • Если дизайнер неверно интерпретирует бриф или пользовательскую историю, то руководитель проекта может быстро вмешаться, скорректировать курс и сэкономить время.

Вот задание, которое поможет вам закрепить навыки, полученные сегодня:

  1. Придумайте один элемент интерфейса.
  2. Создайте для него три состояния.
  3. Разработайте дизайн элемента. Элемент должен корректно выводится в разных состояниях на одном экране.

Оценить статью
4 ответов

Комментарии

Написать комментарий
Популярные статьи автора
Кокос.com в рейтингах
Узнайте стоимость продвижения сейчас
Выберите удобный способ связи:
Выберите удобный способ связи:
Введите Ваш номер телефона:
Введите адрес Вашего сайта:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Введите Ваш Email:
Введите адрес Вашего сайта:
Нажимая кнопку «Получить предложение» вы соглашаетесь с Политикой конфиденциальности.
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Оперативно отвечаем в рабочее время: с 10:00 до 19:00
Вы уже проголосовали
+7 (495) 772 97 91
Возьмем ТОП вместе?
Здравствуйте, меня зовут
,
я представляю компанию
.
Со мной можно связаться по телефону
Со мной можно связаться по тел.
,
Спасибо!
Нажимая кнопку «Оставить заявку» вы соглашаетесь с Политикой конфиденциальности.
Цена лидов в различных нишах
Тематика Стоимость лида (Москва/Россия)
Отдых 500
Мебель 350
Оборудование 500
Бансковские услуги 500
Безопасность 500
Организация мероприятий, концерты, праздники 500
Недвижимость 500
Строительство и отделка 500
Грузоперевозки 500
Доставка еды 350
Юридические услуги 500
Бухгалтерские услуги 500
Пластиковые окна 500
Детские товары 350
Автозапчасти 350
Образование 500
Подпишитесь на рассылку
Не пропустите самое интересное из мира SEO и Digital. Только актуальные и самые крутые статьи.
Заявка успешно отправлена!
Наши сотрудники уже приступили к анализу Вашего сайта. Наш менеджер свяжется с вами в течении дня, спасибо!