Мар 13, 2020

Figma — мощный инструмент для дизайна, прототипирования и разработки

Frame 1 1 - Figma — мощный инструмент для дизайна, прототипирования и разработки

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

Что такое Figma

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

Frame 2 18 1024x341 - Figma — мощный инструмент для дизайна, прототипирования и разработки

До релиза Figma дизайнерам казалось, что облачный редактор с комфортной работой в браузере — только мечты. Однако инструмент превзошел все ожидания. Figma привлекает максимальным удобством. Стоит только создать макет и просто отправить клиенту ссылку на него. Также инструмент дает пространство для работы в команде.

Благодаря разработке Figma, дизайнеры со всего мира создают миллионы UI-макетов, делятся фишками с большим комьюнити и активно создают новые плагины.

Почему Figma — профессиональный инструмент

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

Команда

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

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

Frame 2 15 1024x341 - Figma — мощный инструмент для дизайна, прототипирования и разработки
Как проекты отображаются внутри команды

Комментарии

Сервис позволяет легко дать доступ к документу как для коллег, так и для заказчиков. Уровень доступа владелец выбирает сам: к отдельным страницам, всем макетам или только черновикам. Пользователь с доступом может оставлять комментарии к проекту, которые дизайнер потом закрывает после выполнения работы.

Передача дизайна в разработку

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

Плюсы Figma

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

Простая работа с сервисом

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

Сервис бесплатный

Все функции для полноценного прототипирования в сервисе бесплатны и практически неограниченны. Единственные минусы бесплатной версии — отсутствие совместного редактирования и то, что история изменений хранится в течение 30 дней. Ограничения незначительны. Для команд сервис предлагает платные подписки с расширенными функциями для многопользовательской работы.

Frame 2 17 1024x341 - Figma — мощный инструмент для дизайна, прототипирования и разработки

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

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

Автоматическое сохранение и контроль версий

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

Компоненты

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

Фреймы

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

Frame 2 14 1 1024x341 - Figma — мощный инструмент для дизайна, прототипирования и разработки

Векторная графика

Figma предлагает базовый, но чрезвычайно эффективный набор инструментов, которого достаточно для большинства манипуляций с векторной графикой: от простой коррекции иконок до дизайна полноценного логотипа. Через буфер обмена можно легко вставить векторные объекты из привычного Adobe Illustrator. Также Figma открывает EPS и SVG файлы, стоит только перетащить их на холст.

Выравнивание элементов

В Figma расстановка элементов стала еще проще. Можно просто выделить нужные элементы и задать расстояние между ними. По сравнению с Photoshop или Illustrator инструменты выравнивания в Figma действуют точно так, как вы ожидаете. А с появлением функции Auto Layout выравнивание и дальнейшая перестановка элементов стали более плавными. Также сервис предлагает две уникальные функции Pack Horizontal и Pack Vertical. С их помощью дизайнеры могут быстро скомпоновать элементы.

Интерактивные прототипы

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

Копирование стилей

В Figma можно копировать как отдельные свойства, так и стиль объекта целиком. То же самое касается шрифтов. Кстати, пользователи могут использовать свои шрифты или же подключить Google Fonts.

Frame 2 16 1024x341 - Figma — мощный инструмент для дизайна, прототипирования и разработки

Плагины

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

Постоянные обновления

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

Минусы Figma

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

Стабильное подключение к интернету

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

Проблемы экспорта

Файлы из Figma можно экспортировать только в четыре формата: png, jpeg, svg, pdf. Для экспорта проектов в другие форматы дизайнерам приходится использовать дополнительные программы и плагины.

Подведем итоги

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