Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

Что такое 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