Настройка Dev Mode: Экспорт ассетов, получение кода - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Настройка Dev Mode: Экспорт ассетов, получение кода

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

Теперь, когда вы освоили общие функции Dev Mode, пора перейти к практике: экспорту ассетов и получению готового кода. Это две ключевые возможности, которые упрощают работу дизайнера с разработчиком.

Экспорт ассетов для разработчиков

Dev Mode позволяет разработчикам самостоятельно экспортировать графические ассеты — иконки, иллюстрации, изображения — в разных форматах. Это экономит ваше время и снижает число ошибок.

  1. Выберите элемент. В Dev Mode выберите любой слой или группу слоёв для экспорта.
  2. Найдите панель «Export». Она находится в правой боковой панели Dev Mode.
  3. Настройте формат.
    • Форматы: Figma предлагает широкий выбор:
      • PNG: для растровых изображений с прозрачностью или без неё.
      • JPG: для фотографий и сложных растровых изображений без прозрачности (файл меньше).
      • SVG: для векторных иконок, иллюстраций, логотипов. Идеален для масштабируемых элементов.
      • PDF: для печати или документов.
    • Масштаб: Выберите масштаб экспорта, например, 1x, 2x, 3x для разных разрешений мобильных экранов или 0.5x для уменьшения. Для SVG масштаб обычно не нужен, так как это векторный формат.
    • Суффикс: Добавьте суффикс (например, @2x) к имени файла, чтобы разработчикам было удобнее.
  4. Экспортируйте. Нажмите кнопку Export, чтобы сохранить ассет.

Совет: Для иконок всегда используйте SVG. Убедитесь, что ваши SVG-иконки оптимизированы (без лишних групп, пустых слоёв, с объединёнными контурами). Так они будут максимально «чистыми» для разработчиков. Это можно сделать прямо в Figma или с помощью плагинов.

Получение кода и спецификаций

Dev Mode автоматически генерирует фрагменты кода и спецификации для выбранных элементов. Это помогает разработчикам быстро переводить дизайн в работающий продукт.

  1. Выберите элемент. Выберите фрейм, компонент или любой другой элемент на холсте.
  2. Перейдите на вкладку «Code». Она находится в правой боковой панели Dev Mode.
  3. Выберите платформу. В верхней части панели «Code» выберите целевую платформу: Web, iOS или Android. Это повлияет на синтаксис генерируемого кода.
    • Web: Генерирует CSS, HTML, а также фрагменты для React, Vue и других фреймворков.
    • iOS: Генерирует код для Swift/SwiftUI.
    • Android: Генерирует код для Kotlin/Compose.
  4. Просмотрите и скопируйте код.
    • Вы увидите CSS-свойства, размеры, отступы, типографику и цвета, применённые к выбранному элементу.
    • Для компонентов с Auto Layout Dev Mode покажет соответствующие свойства Flexbox.
    • Если вы используете переменные Figma, Dev Mode отобразит их названия, что позволит разработчикам использовать дизайн-токены.
    • Нажмите Copy snippet или Copy all, чтобы скопировать нужный фрагмент кода.

Важно: Генерируемый код — это отправная точка, а не готовое решение. Разработчикам всё равно придётся адаптировать его под свою кодовую базу, архитектуру и стандарты проекта. Dev Mode значительно ускоряет этот процесс, предоставляя точные значения и свойства.

Сравнение изменений

Ещё одна мощная функция Dev Mode — возможность сравнивать изменения между версиями дизайна. Это особенно полезно, когда нужно быстро понять, что именно изменилось в макете.

  1. Выберите фрейм. Выберите фрейм, который хотите сравнить.
  2. Перейдите на вкладку «Changes». Она находится в правой боковой панели Dev Mode.
  3. Выберите версию. Выберите, с какой предыдущей версией вы хотите сравнить текущий фрейм. Figma покажет визуальные и структурные различия.

Это позволяет разработчикам быстро увидеть, какие элементы были добавлены, удалены, изменены или перемещены, что упрощает адаптацию кода.

Практическое задание

Откройте любой из ваших предыдущих файлов в Figma, где вы создавали компоненты с Auto Layout и Variants.

  1. Переключитесь в Dev Mode.
  2. Выберите один из ваших компонентов (например, кнопку или карточку).
  3. Изучите панель Code:
    • Посмотрите, как Figma генерирует CSS-свойства для вашего компонента.
    • Если вы использовали переменные для цветов или отступов, обратите внимание, как они отображаются в коде.
  4. Попробуйте экспортировать иконку или изображение из вашего файла в формате SVG и PNG.

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