Глава 3.2.1. Обзор интерфейса Figma

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

Фигма использует в качестве основных единиц пиксели (px) и показывает все цвета в шестнадцатеричном формате (#000000) или RGBA (rgba(0, 0, 0, 0)), и большинство параметров можно скопировать сразу в CSS. Это интуитивный и универсальный инструмент, его можно использовать в браузере, а можно установить программу (есть для Windows, MacOS, скачать можно по ссылке). Там же можно скачать приложение для смартфонов Figma Mirror, оно позволяет показывать на смартфоне макеты из обычной версии Фигмы.

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

Регистрация в Фигме

Затем вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для ознакомления с инструментами приложения.

Образцы макетов в Фигме

Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение.fig или.sketch, при этом файл с расширением.sketch Фигма конвертирует в свой формат.

При импорте макета нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте. По умолчанию Фигма синхронизирована с Google Fonts, но если вы используете локальные шрифты, нужны дополнительные действия. Чтобы установить в браузерной версии Figma Font Helper, который подключит локальные шрифты, нужно зайти в Menu > Help and Account > Account Settings > Fonts.

Figma Font Helper загружается в настройках аккаунта Загрузка шрифтов в Фигму

Выгружаются макеты только в.fig и.pdf. С форматом.psd Фигма не работает.

Выгрузка макета

Подписка и объём бесплатной версии

Загруженными в Фигму файлами можно делиться. Присланные файлы открываются в режиме просмотра, чтобы их добавить к себе, нужно нажать на кнопку Duplicate.

Копировать макет в свой кабинет

В режиме просмотра доступны CSS, экспорт изображений и измерения размеров, в целом можно этим ограничиться. В режиме просмотра, правда, нельзя ничего настроить: ни направляющие, ни модульную сетку, ни фон рабочей области, ни слои не объединить. К тому же сами значения параметров (цвет, заливка, высота H, ширина W …) в режиме просмотра видны только в CSS, а не в интуитивно понятном визуальном виде.

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

Замечание

Напоминаем, что графические редакторы и просмотрщики показывают то, как макет сделал дизайнер. Структура макета может не совпадать с семантической разметкой или с тем, как лучше верстать и указывать стили. Всё, что можно узнать из Фигмы или любого другого редактора, нужно сверять с реальной картинкой (можно воспользоваться инструментом PerfectPixel, например), спецификацией и здравым смыслом.

Теория~ 5 минут