Найти тему
Web-designer

Figma. Знакомство

Оглавление

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

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

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

Прототип

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

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

-2

Интерфейс

Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.

-3

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

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

Что ещё можно делать в Фигме

Фигмой могут пользоваться не только дизайнеры. Неочевидные сценарии использования сервиса можно посмотреть в разделе Templates.

-4

Предприниматели, специалисты по SMM и менеджеры проектов могут использовать Фигму для ведения проектов с помощью Диаграммы Ганта и создания рекламных объявлений с шаблонами для Facebook.

Для разработчиков, Фигма предлагает режим Developer Handoff, который позволяет использовать направляющие для определения расстояний до объектов и их размера, а также копировать CSS-стили элементов и их код для Android и iOS.

Кроме того, есть режим Dev Mode, который напоминает инспектор браузера. Если вы дизайнер и часто взаимодействуете с разработчиками, этот инструмент поможет облегчить коммуникацию с ними. В режиме Dev Mode можно объединить библиотеку дизайна, базу кода и инструменты управления проектами, не переключаясь между вкладками.ый напоминает инспектор браузера. Если вы работаете дизайнером и часто взаимодействуете с разработчиками, этот инструмент поможет облегчить коммуникацию с ними. В Dev Mode можно объединить библиотеку дизайна, базу кода и инструменты управления проектами, не переключаясь между вкладками.

Совместная работа в Фигме

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


Три причины выбрать Фигму для совместной работы

  • Кроссплатформенность. Работать в сервисе можно из браузера, с любого устройства и в любой операционной системе. Не нужно скачивать дополнительные приложения, чтобы согласовать дизайн.
  • Облачный сервис. Фигма — онлайн-редактор, поэтому результаты работы сохраняются в облаке, их видят все члены команды. В любой момент можно посмотреть изменения, которые внёс коллега, и восстановить резервную копию, если нужно.
  • Обратная связь. К макету в Фигме участники могут оставлять комментарии и получать фидбек от коллег. Согласования пройдут быстрее, а история переписки не затеряется в почте.

Если вас это заинтересовало, переходите на канал и подписывайтесь. Далее я расскажу об основных инструментах.