Figma для разработчиков. Режим Dev Mode
Привет, я Миша, ux/ui-дизайнер в Noknok. Я встречал разработчиков, которые с Фигмой на «Вы». Сегодня я расскажу о функционале этого ресурса наглядно и простым языком.
С последним обновлением в Фигму добавился режим разработчика Dev Mode. Статья поможет разобраться с базовым функционалом Фигмы и новым режимом, чтобы работать быстрее и эффективнее.
Как начать работать в режиме Dev Mode
1. Войдите в аккаунт Фигмы или зарегистрируйтесь.
2. Включите тумблер Dev Mode в правом верхнем углу.Теперь вы находитесь в режиме разработчика.
Мини-словарик для разработчика:
- Объект или блок — любой элемент в макете (это может быть инпут, кнопка, карточка);
- Компонент — элемент, вид которого фиксируется при создании; при изменении исходного компонента вид его копий меняется во всем проекте;
- Dev Mode — режим разработчика в Figma;
- Слои — содержимое блока: текст, иконки, кнопки;
- Фрейм (артборд) — рабочая область макета. Например, экран мобильного приложения — это фрейм.
- Страница — не путать с фреймом; это рабочая область, на которой размещен конкретный макет. Список страниц находится в левом меню Фигмы.
Горячие клавиши
Изучим базовый функционал для навигации по макету.
Управление зумом:
- Прокрутка колесика мыши — вертикальное перемещение по макету;
- Shift + прокрутка колесика мыши — горизонтальное перемещение по макету;
- CTRL + прокрутка колесика мыши — увеличение/уменьшение масштаба;
- Зажатие левой кнопки мыши (ЛКМ) — свободное перемещение.
Выделение объектов:
- Щелчок ЛКМ — выбор объекта;
- Двойной щелчок ЛКМ — проваливаемся глубже в объект;
- CTRL + щелчок ЛКМ — проваливаемся в самую глубь слоя;
- Зажатие SHIFT + щелчок ЛКМ по нескольким объектам — выделение этих объектов;
- Выделение объекта + зажатие ALT — проверка расстояния от выбранного блока до другого элемента, на который наведен курсор.
Работа в Dev Mode
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 и при коммуникации с дизайнерами — постараюсь помочь. А также пересылайте эту статью своим коллегам.