Figma — это графический онлайн-редактор для дизайнеров интерфейсов и веб-разработчиков. Сейчас это удобная, бесплатная альтернатива Photoshop. Большое преимущество платформы — возможность работать прямо в браузере. При этом есть и десктопная версия. Расскажем, что надо знать верстальщику при работе с макетом в Figma.

Регистрация и добавление нового макета

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

Форма регистрации
Форма регистрации

Затем вы попадёте в менеджер проектов, где увидите образцы макетов. Их можно использовать для ознакомления с инструментами приложения. Здесь же можно добавить свой проект, нажав на соответствующую иконку Import file. Макет проекта должен иметь расширение .fig или .sketch. При импорте из Sketch нужно не забыть дополнительно загрузить нестандартные шрифты, если они используются в проекте.

После добавления макет появится в общем списке, и можно будет приступить к работе с ним.

Импорт нового макета
Импорт нового макета

Структура макета и рабочие инструменты

Интерфейс в разделе работы с макетом состоит из нескольких блоков.

  1. В боковой панели слева показана вся структура проекта. Можно проследить вложенность элементов и найти нужный. Каждый тип элемента обозначен отдельной иконкой — текст, изображение, составной блок.
  2. Основная рабочая область в центре — для непосредственного взаимодействия с макетом.
  3. В верхней части страницы расположено основное меню. Большая часть инструментов в нём предназначены для дизайна, но вам точно пригодится меню масштабирования, расположенное справа.
  4. Боковая панель справа включает в себя три вкладки, но нам будут нужны только две из них — Design и Code. В этих вкладках находится вся доступная информация об элементе.
Интерфейс страницы работы с проектом
Интерфейс страницы работы с проектом

Работа с параметрами элементов

Основная задача верстальщика при работе с макетом — получить параметры элементов. Давайте разберём по пунктам, как это сделать в Figma.

Текст

Чтобы узнать все текстовые параметры, нужно выделить элемент и открыть вкладку Code в правой боковой панели. Там в списке свойств отобразятся все используемые параметры — название, размер, насыщенность и цвет шрифта, высота строки и остальные.

Работа с текстовыми элементами
Работа с текстовыми элементами

Изображение

Свойства width и height во вкладке Code расскажут о размере изображения.

Работа с изображениями
Работа с изображениями

Также можно скачать любое изображение из макета. Для этого нужно кликнуть по вкладке Design и там найти последний пункт Export. Далее в выпадающем меню выбрать формат, в котором вы хотите экспортировать изображение — PNG, JPG, SVG или PDF. Подробно о форматах изображений можно почитать в этой статье.

Экспорт изображений
Экспорт изображений

Цвет элемента

Во вкладке Code можно узнать фоновый цвет элемента — значение background.

Определение фонового цвета блока
Определение фонового цвета блока

Размеры элементов и расстояние между ними

Размер можно определить несколькими способами. Например, во вкладке Code посмотреть значения свойств width и height. Или просто выделить нужный блок — размер отобразится внизу элемента. Также можно узнать расстояние между любым элементом и соседними с ним. Для этого нужно выделить его, а затем наводить курсор на остальные элементы — будет появляться направляющая и значение.

Определение размеров элементов и расстояния между ними
Определение размеров элементов и расстояния между ними

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