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

Что такое Figma и для чего она нужна?

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

Создание прототипа

Это первоначальная модель страницы, сайта или приложения. С ней заказчику будет проще понять, как будет выглядеть функционал будущей страницы, и как пользователи будут взаимодействовать с продуктом. При создании прототипа дизайнер отрисовывает экраны(т.е. рисует видимую часть экрана устройства) и создает связи между ними.

Создание элементов интерфейса

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

Создание элементов с использованием векторной графики

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

Какие особенности есть в Figma?

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

Фигма дает возможность работать над проектом совместно в режиме реального времени.

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

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

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

Особенность для разработчиков

В фигме есть специальный режим “Developer Handoff”. Он позволяет определять расстояния между объектами и элементами, определять их размер, копировать CSS-стили элементов, их код для Android и iOS. Это упрощает и ускоряет процесс верстки макета сайта, сервиса или приложения.

Как начать работать с Figma?

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

Либо, скачать приложение на свое устройство по ссылке.

Чтобы узнать подробнее про интерфейс и начало работы с сервисом стоит посмотреть официальную документацию Figma. 

Резюмируем

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