Мар 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. Если поменять параметры в главной копии, все остальные также изменят внешний вид. Однако и каждую копию можно изменять автономно от остальных.

READ  Как создать уникальную иконку для приложения
READ  Cтоит ли разрабатывать виджеты для вашего приложения iOS?

Фреймы

Фреймы напоминают привычные артборды, но они более гибкие и отлично масштабируются. Если вы никак не могли запомнить точные размеры экранов для разных устройств, в 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, чтобы сделать его еще более полезным. Инструмент одинаково хорошо подойдет как для новичков, так и для дизайнеров с опытом. Несомненно, если вы еще не успели поработать с сервисом, вам стоит попробовать. Для многих он стал основным инструментом работы с прототипами.