Что это за программа Figma, ее функционал и как пользоваться

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

Описание сервиса

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

Figma обладает следующим функционалом:

• Макеты проектов, а также внесенные изменения, могут просматривать и редактировать онлайн все участники. Теперь не нужно обращаться к ответственному сотруднику, чтобы выяснить текущее состояние проекта – любой сотрудник сам в состоянии увидеть актуальную версию макета.
• Это браузерное приложение, которое не требует скачивания дополнительного ПО. Так, чтобы показать проект сотрудникам или клиентам, можно настроить доступ к программе и напрямую отправить им ссылку.
• Платная версия обладает дополнительным функционалом для совместной работы, что особенно удобно для крупных проектов.

Поддерживаемые функции

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

Шаблоны

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

Для создания стилей цвета в данном редакторе необходимо выполнить три простых шага:

• Отберите компонент, которому нужно присвоить нужный цвет.
• Найдите раздел «Fill» в разделе «Design» и тапните по иконке «Style».

• Тапните по кнопке «+» – «Create Style», задайте нужное имя стилю. Нажмите «Сохранить».

Таким же образом задается стиль текста:

• Выделите текст на макете.

• Найдите раздел «Text» в меню «Design» и кликните на значок «Style».
• Кликните кнопку «плюс» («Create Style»), присвойте имя стилю текста. Подтвердите действие через сохранение.

Создание компонентов также упрощено до нескольких простых шагов:

• Выберите элемент, который хотите превратить в компонент.
• Нажмите на значок «Create Component», расположенный по центру вверху экрана.

• Элемент отобразится слева в разделе «Assets». При необходимости перетащите его на макет проекта.

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

Фреймы

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

Создание фрейма легко выполняется через кнопку «F». Далее в разделе «Design» подбирается необходимый размер. В Figma вы можете разместить несколько фреймов на одной странице и адаптировать дизайн под разные устройства, что позволяет удобно работать с различными макетами на одной площадке. Фрейм позволяет без особых усилий контролировать расположение отдельных деталей или целых блоков. Рабочая область растягивается с сохранением положения всех элементов – через удержание клавиши «Cmd» на операционной системе macOS или «Ctrl» на Виндоус.

Прототипы

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

Прототипы подготавливаются следующим способом:

• Нарисуйте схематично окна приложения или веб-сайта, разместив их в нужном порядке.
• Перейдите в раздел «Prototype», расположенный между разделами «Inspect» и «Design» в правой панели Фигмы.

• Выберите цвет фона и тип устройства, по отношению к которому создается прототип.

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

Сообщества

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

Раздел «Community» расположен на стартовом экране в верхнем углу слева, где указано название аккаунта. Для доступа к сообществу нужно перейти в эту вкладку и выбрать нужную категорию. Если открыт рабочий файл, можно нажать на иконку «Resources» в верхнем меню и выбрать «Go to Community» в разделе «Plugins» или «Widgets».

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

Система контроля версий

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

Экспорт данных

Figma предлагает разработчикам специальную вкладку «Inspect», которая находится в верхней части правой панели и предоставляет информацию о каждом элементе макета. Благодаря автоматическому созданию CSS-кода и версий для Android и iOS, разработчики могут быстро получить необходимые данные для своих проектов. Эти данные могут быть экспортированы в нужном формате через функцию «Export», которая находится на вкладке «Design». Таким образом, разработчик может быстро экспортировать и получить нужные данные для разработки своего проекта.

 Встроенный чат

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

Чтобы начать обсуждение, нужно найти иконку «Add comment» на верхней панели или нажать «C». Затем выбирается элемент дизайна, к которому появились вопросы, и вводится текст комментария. Каждый сотрудник с доступом к этой странице увидит данный комментарий.

Платный тариф Figma включает голосовой чат для совместной работы. Работники веб-проекта созваниваются в самом веб-редакторе, разбирают нюансы по текущему макету и вносят необходимые правки без сторонних приложений, вроде Zoom или Discord.