Figma для разработчиков. Режим Dev Mode

Привет, я Миша, ux/ui-дизайнер в Noknok. Я встречал разработчиков, которые с Фигмой на «Вы». Сегодня я расскажу о функционале этого ресурса наглядно и простым языком.

С последним обновлением в Фигму добавился режим разработчика Dev Mode. Статья поможет разобраться с базовым функционалом Фигмы и новым режимом, чтобы работать быстрее и эффективнее.

1. Войдите в аккаунт Фигмы или зарегистрируйтесь.

2. Включите тумблер Dev Mode в правом верхнем углу.Теперь вы находитесь в режиме разработчика.

Мини-словарик для разработчика:

• Объект или блок — любой элемент в макете (это может быть инпут, кнопка, карточка);
• Компонент — элемент, вид которого фиксируется при создании; при изменении исходного компонента вид его копий меняется во всем проекте;
• Dev Mode — режим разработчика в Figma;
• Слои — содержимое блока: текст, иконки, кнопки;
• Фрейм (артборд) — рабочая область макета. Например, экран мобильного приложения — это фрейм.
• Страница — не путать с фреймом; это рабочая область, на которой размещен конкретный макет. Список страниц находится в левом меню Фигмы.

Изучим базовый функционал для навигации по макету.

Управление зумом:

• Прокрутка колесика мыши — вертикальное перемещение по макету;
• Shift + прокрутка колесика мыши — горизонтальное перемещение по макету;
• CTRL + прокрутка колесика мыши — увеличение/уменьшение масштаба;
• Зажатие левой кнопки мыши (ЛКМ) — свободное перемещение.

Выделение объектов:

• Щелчок ЛКМ — выбор объекта;
• Двойной щелчок ЛКМ — проваливаемся глубже в объект;
• CTRL + щелчок ЛКМ — проваливаемся в самую глубь слоя;
• Зажатие SHIFT + щелчок ЛКМ по нескольким объектам — выделение этих объектов;
• Выделение объекта + зажатие ALT — проверка расстояния от выбранного блока до другого элемента, на который наведен курсор.

1. Страницы показываются с меткой «Ready for dev». Страницы без метки можно посмотреть, нажав на кнопку «Show all pages».

2. На странице есть возможность отслеживать изменения макетов. Для этого:

2.1 Выбираем нужный фрейм и в правой панели нажимаем «Compare Changes».

2.2 Откроется модальное окно, в котором можно отследить изменения.

3. Слои будут в левом боковом меню снизу. При выделенном фрейме слои раскроются автоматически.

4. Inspect показывается в правом боковом меню. Изучим его возможности:

4.1 Dev Resources — прикрепление ссылки на документацию/файл разработки из GitHub или других сервисов. Нажмите «+» и вставьте ссылку.

4.2 Code — просмотр кода, сетки и значений на выбранном языке. Выберите нужный вам язык и смотрите данные. Есть возможность скопировать код.

4.3 При выделении компонента появится блок Component в правой панели меню.

4.3.1 Если кликнуть «Open in playground», откроется панель, в которой можно смотреть разные состояния компонента.

4.4 Colors показывает, какие цвета используются на выделенном элементе. Их можно скопировать нажатием на цвет.

4.5 Assets — это элементы, которые используются в выбранном блоке. Иконки можно скачать в выбранном формате. Компоненты можно изучить, нажав на раскрытую книжку.

4.6 Export — экспортирование объектов. Выделите объект или несколько объектов. Это может быть иконка, страница, блок, иллюстрация, изображение. Выберите формат файла, в котором хотите видеть экспортированный элемент, и нажмите «Export». Откроется стандартное окно с выбором папки, куда будет экспортирован элемент.

Спасибо, что дочитали статью. Буду рад обратной связи!

И поздравляю с днем программиста! Пусть все проекты будут интересными, а наше с вами сотрудничество гладким и плодотворным.

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