Обзор программы Figma

Обзор Figma

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

Не совсем разумно сравнивать Figma с другими программами для разработки интерфейсов. Прежде всего потому, что Figma является облачным веб-сервисом предоставляющим нативные программы для установки на Mac и Windows. Т.е. вы можете даже ничего не устанавливать, а работать через браузер. Если кратко, то Figma это как Sketch, только без плагинов и с немного другой системой реализации Символов и некоторых других функций в лучшую сторону.

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

Давайте перечислим все особенности.

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

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

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

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

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

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

Хранение файлов

Забудьте про Dropbox, Google Drive и другие сервисы, в которых раньше вы хранили файлы проекта. Все ваши файлы хранятся в облаке Figma. Пора забыть про сочетание клавиш CTRL + S (CMD + S для Mac), чтобы сохранить измения, потому что в Figma это происходит автоматически.

Сохранение превью изображений

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

Комментирование макетов

Раньше это был затруднительный процесс. Давайте вспомним как это было:

  • Получали текстовый список комментариев из которого было не всегда понятно о каком месте идет речь.
  • Делали скриншот через сервис и сверху писали комментарий.
  • Оборачивали макеты в PDF и там писали комментарии.
  • Использовали Dropbox или Invision в качестве сервиса комментирования.

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

Прототипирование

Invision, Marvel и другие сервисы, которые мы использовали раньше больше не нужны. Т.к. функция прототипирования встроена в Figma по умолчанию.

Режим презентации

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

Символы

Гораздо более удобная система работы Символов по сравнению со Sketch. Позволяет в очень наглядной форме на панели слоев наследовать символы. А также изменять любые свойства экземпляра: текст, включать и отключать видимость слоев, изменять размер и главное стили.

Панель символов

Теперь нет необходимости в странице Symbols как в Sketch. В Figma есть панель, находящаяся в одном ряду с панелью слоев, которая отображает все символы проекта и предоставляет удобный поиск по имени символа.

Библиотека компонентов

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

Производительность

Заявляю, как человек, который проработал 7 лет в Photoshop, 3 года в Fireworks и 3 года в Sketch, что Figma работает гораздо быстрее Sketch, который как известно в плане производительности оставляет далеко позади Photoshop.

Режим просмотра

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

Панель Сode

Для верстальщиков и программистов в Figma есть специальная панель Code, на которой можно скопировать CSS-стили для Web, а также код-разметки расположения и стилей для Android и iOS.

Интеграция

Figma интегрируется с Zeplin. А также файлы Figma можно встраивать в файлы Dropbox Paper.

Сетки

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

Вы можете:

  • Создать неограниченое количество сеток на одном макете.
  • Cделать сетки резиновыми или статичными.
  • Раскрасить каждую сетку в отдельным цвет.

Фреймы

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

Это не законченая статья. Продолжение следует.