Что такое Figma

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

Особенности программы:

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

• Открывается через браузер, устанавливать дополнительные приложения не нужно. Это удобно, когда нужно показать макет клиенту или коллегам. Достаточно отправить ссылку и настроить права доступа.

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

Какие функции Figma нужны продакт-менеджеру

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

Прототипы

Чтобы не объяснять словами, как должно работать приложение или сайт, можно создать его прототип — модель будущего продукта. Добавить переходы между экранами, анимацию, выпадающее меню — так разработчику или клиенту будет проще представить, как выглядит макет на реальном устройстве. Также это поможет отследить ошибки в сценарии и исправить их до того, как проект уйдёт в разработку.

Вот как подготовить прототип:

1. Схематично нарисовать экраны приложения и расположить их в нужной последовательности.

2. Перейти на вкладку Prototype, она находится на правой панели редактора между вкладками Design и Inspect.

3. Выбрать устройство, для которого создаёте прототип, и цвет фона.

4. Выделить элемент интерфейса и настроить для него нужное действие из тех, что предлагает программа.

5. Посмотреть результат в режиме презентации.

Фреймы

Это основная рабочая область, на которой располагаются элементы макета. Новый проект в Figma начинается с выбора размера фрейма. Среди стандартных вариантов есть шаблоны для мобильных и десктоп-устройств, умных часов, постов для соцсетей, презентаций.

Создать фрейм быстрее всего с помощью горячей клавиши F. Затем в правом блоке во вкладке Design выбрать подходящий размер. Можно располагать на одной странице несколько фреймов и адаптировать дизайн под разные устройства. С фреймом удобно контролировать расположение блоков или отдельных деталей, которые находятся внутри него. Чтобы растянуть рабочую область, удерживайте клавишу Ctrl для Windows и Cmd для macOS, так элементы макета сохранят своё положение.

Шаблоны

Редактор позволяет создавать шаблоны цветов, текстов и повторяющихся элементов, например кнопок, иконок, подвалов сайтов. Их в программе ещё называют компонентами. Это упрощает работу и экономит время. Можно быстро собрать прототип из готовых деталей.

Стиль цвета создаётся за три шага:

1. Выбрать элемент нужного цвета.

2. Найти пункт Fill во вкладке Design и нажать иконку Style.

3. Нажать на плюс (Create Style), придумать название стиля цвета и сохранить его.

Аналогично можно сохранить стиль текста:

1. Выбрать нужный текст на макете.

2. Найти пункт Text во вкладке Design и нажать иконку Style.

3. Нажать на плюс (Create Style), придумать название для стиля текста и сохранить его.

Создать компонент ещё проще:

1. Выбрать элемент.

2. Нажать на иконку Create Component, которая находится в верхней части экрана по центру.

3. Новый компонент появится во вкладке Assets в левой панели, откуда его можно перетаскивать на макет.

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

Комьюнити

У Figma развитое сообщество разработчиков и дизайнеров, которые делятся своими проектами. Можно вдохновляться их работами или использовать готовые решения для своего макета. Вкладка Community находится на главном экране в левом верхнем углу, где указано имя вашего аккаунта. Перейдите в неё и выберите раздел, который вас интересует. Если у вас открыт рабочий файл, нажмите на иконку Resources в верхнем меню и найдите Go to Community во вкладке Plugins или Widgets.

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

Плагины — дополнительные приложения внутри редактора, которые расширяют его возможности. Например, плагин Unsplash позволяет добавлять изображения на макет. Чтобы им воспользоваться, нажмите Try it out. Откроется файл в Figma, перейдите в Resources, во вкладке Plugins выберете Unsplash и нажмите Run.

Виджеты — интерактивные объекты, которые помогают взаимодействовать с командой. Например, виджет Todo оставляет список задач для участников проекта, а виджет Voice Memo записывает голосовые сообщения для коллег. Чтобы использовать виджет, нажмите Try it out, перейдите в Resources, во вкладке Widgets выберите нужный инструмент и нажмите Add. Объект появится в файле вашего проекта, и его увидят все участники, у которых есть доступ.

История версий

Figma автоматически сохраняет изменения в макете. На бесплатном тарифе редактор хранит историю версий за последние 30 дней, на платном — неограниченное время. Когда в файле работает несколько человек, удобно отслеживать, кто и какие правки вносил. Также можно сохранять версии вручную и возвращаться к ним, если что-то пошло не так.

Виртуальная доска

FigJam — это отдельный сервис Figma для работы в команде. На интерактивной доске участники проекта могут в онлайн-режиме накидывать идеи, клеить стикеры, добавлять схемы и графики. Инструмент удобно использовать для мозгового штурма. Элементы с виртуальной доски можно переносить в файл в Figma.

Чтобы начать работу в сервисе, на главном экране Figma выберите New FigJam file. Откроется белый холст, который предстоит заполнить команде. Пользователи видят действия друг друга, могут общаться в текстовом чате и оставлять реакции.

Какие функции Figma помогут разработчикам

Доступ к проекту с любого устройства. Разработчику даже не нужно создавать аккаунт в Figma. Он может открыть файл по ссылке от дизайнера или продакт-менеджера и экспортировать необходимые данные.

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

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

Если хотите начать обсуждение, найдите иконку Add comment на верхней панели или нажмите горячую клавишу C. Выберите элемент дизайна, к которому появились вопросы, и введите текст. Ваше сообщение увидят все пользователи с доступом к этой странице.

Экспорт данных. В Figma есть специальная вкладка для разработчиков — Inspect, она находится в верхней части правой панели. Там отображается информация о каждом элементе макета.

Программа автоматически генерирует CSS-код, а также версии для iOS и Android. Разработчик может выгрузить данные в нужном формате через функцию Export, которая находится на вкладке Design.