Дизайн сайтов с помощью Figma.

(Фигма) Figma – это онлайн-сервис, предназначенный для дизайнеров, разработчиков, маркетологов и менеджеров, для создания прототипа сайта, его дизайна и разработки интерфейсов.

Для чего нужен этот сервис?

Главными особенностями Figma являются:

• Можно совместно работать с документами.
• Прямо из окна браузера имеет доступ к макету.

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

Какие проекты можно создавать в Figma?

В Figma можно:

• Создание интерактивного прототипа сайта, векторной графики, приложения.
• Некоторые дизайнеры создают макеты сайтов для Тильды. Тильда – это конструктор сайтов.
• Более гибкая работа с интерфейсной графикой.

Прототип.

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

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

Интерфейс.

Интерфейс – это внешний вид. Figma позволяет создавать иконки, кнопки и формы обратной связи. Также можно настроить эффекты:

• Раскрыть списки.
• Создать анимацию для попапов и блоков.
• Сделать кнопки (кликабельные).

Интерфейсы и прототипы, сделанные в Figma:

• Прототип панели управления Tesla Model 3, а также элементы ее интерфейса.
• Интерфейс мобильных приложений Figma IOS UI kit.

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

В Figma присутствуют основные инструменты, которые нужны для работы с векторными объектами, также можно экспортировать дизайны в форматах SVG, и импортировать объекты из редактора Sketch, Adobe или Illustrator.

Figma предназначена не только для дизайнеров, но и для предпринимателей, менеджеров проектов и SMM-щиков, которые могут создавать различные рекламные объявления или работать с проектами с Диаграммой Ганта.

В Figma есть режим Developer Handoff, для разработчиков. Его используют направляющие, дабы определять расстояния до объектов и размеры, CSS – скопировать стили элементов, код для IOS, Android.

Преимущества, которыми обладает Figma.

• Доступность.
• Наличие Мультиплеера.
• Кроссплатформенность.
• Удобство.
• Работа с векторной графикой.
• Позволяет создавать компоненты.
• Подключаемые плагины.

Доступность.

Если сравнивать с популярными на сегодняшний момент продуктами, например пакет Adobe (Adobe XD, Illustrator, Photoshop) или Sketch, то Figma выигрывает по доступности, ведь данная программа условно бесплатная. Разумеется, при вложении, появляются определенные дополнения, но и без них продукт очень достойный.

Наличие Мультиплеера.

Если коротко, то это возможность работы над одним проектом нескольким людям. Можно наблюдать на мониторе, как дизайнеры правят свои проекты realtime. Это похоже на teamViewer. Дизайнеру больше не нужно держать все макеты локально, теперь все хранится в облаках. Нет необходимости больше пересылать скриншоты менеджеру, создание проекта стало довольно публичным занятием, единственное, что нужно – это браузер с нормальной скоростью Интернета.

Кроссплатформенность.

Теперь не важен вид операционных систем дизайнера и верстальщика, будь то MacOS, Windows или Linux. Они смогут без каких-либо проблем работать над одним проектом.

Удобство.

В случае, если вы привыкли к работе с графическими редакторами посредством hot key, то вы быстро сможете освоиться даже с новым функционалом. Функционал клавиш довольно схож с Photoshop или Sketch.

Работа с векторной графикой.

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

Создание компонентов.

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

Подключаемые плагины.

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