Что такое Figma: возможности и принципы работы

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

Что такое Figma

Figma — кросс-платформенный онлайн-сервис для дизайнеров интерфейсов и веб-разработчиков.

Figma позволяет разрабатывать интерфейсы в онлайн-приложении. У Figma две ключевые особенности: доступ к макету прямо из окна браузера и возможность совместной работы над документами.

Разработка Android UI Kit в Figma

Возможности и особенности Figma

Многопользовательский режим редактирования

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

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

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

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

Команда создана — теперь пригласите ее участников и назначьте уровень доступа к проекту.

Облачный сервер хранения файлов

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

Компоненты

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

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

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

В Figma эта проблема решена: изменяете радиус скругления одной кнопки — меняются стили всех элементов с этим стилем.

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

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

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

Фреймы

Очень похожи на артборды в Photoshop, но имеют большую гибкость в работе — они хорошо масштабируются и их с легкостью можно использовать в других фреймах. Для фреймов есть предустановленные размеры устройств: Phones, Tablet, Desktop, Watch, Paper, Social Media. Поэтому нет надобности держать их в голове и путаться в размерах.

Фрейм iPhone X и iPhone 8

Сетки

Панель Grid Layout позволяет быстро создать любую сетку.

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

Десктопная версия

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

Условная бесплатность

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

  • Максимум два редактора.
  • Максимум три проекта.
  • История версий хранится 30 дней.

Если вам станет тесно на бесплатном тарифе, можете перейти на Professional стоимостью $12 в месяц или Organization — $45 в месяц.

Сравнить тарифы можно на официальном сайте Figma.

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

Дизайнеру важны скорость работы над проектом и коммуникация в процессе. Эти и многие другие задачи позволяет решить онлайн-сервис Figma.

У Figma низкий порог вхождения и мощный потенциал при кажущейся простоте. Чтобы все возможности программы с самого начала работали на вас, обратите внимание на курс Skillbox по Figma. Там расскажут многие тонкости и неочевидные моменты, которые впоследствии сэкономят вам время.

Курс «Figma для веб-дизайнера»
Полное руководство по cамому прогрессивному инструменту для дизайнеров: навыки быстрой работы с высоким качеством. На протяжении курса вы с нуля создадите проект, при создании которого задействуете все возможности Figma.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox