Блог

Figma Dev Mode: как разработчику снимать размеры и стили и что дизайнер должен подготовить

Как использовать Dev Mode в Figma для точного handoff: inspect, code, assets/export и подготовка файла дизайнером.

FigmaHandoffDev Mode
Figma Dev Mode: как разработчику снимать размеры и стили и что дизайнер должен подготовить

Что дает Dev Mode разработчику

В Dev Mode разработчик снимает размеры, отступы, типографику и цвета напрямую из макета, а также копирует автогенерируемые фрагменты кода.

  • Inspect: расстояния, размеры, стили слоев.
  • Code: CSS/Swift/Android-сниппеты.
  • Assets: быстрый доступ к иконкам и графике.
  • Export: выгрузка SVG/PNG/JPG/PDF.

Что должен подготовить дизайнер

  • Привести компонентный нейминг к единому стандарту.
  • Отметить фреймы и экраны статусом Ready for dev.
  • Проверить export-настройки ассетов.
  • Добавить пояснения к нестандартной логике.

Topic Cluster

Хаб по теме: Figma

Главный материал кластера: Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить.

Как организовать стили в Figma: типографика, цвета, эффекты, нейминг — чтобы не было хаоса

Как организовать стили в Figma: типографика, цвета, эффекты, нейминг — чтобы не было хаоса

Система стилей в Figma без дубликатов и путаницы: структура типографики, цветовые группы, эффекты и единый нейминг.

Как собрать дизайн-систему в Figma с нуля: токены, компоненты, варианты, документация

Как собрать дизайн-систему в Figma с нуля: токены, компоненты, варианты, документация

Пошаговый подход к дизайн-системе: от токенов и atomic-компонентов до вариантов, библиотеки и документации для команды.

Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить

Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить

Разбираем частые ошибки Auto Layout и практичные исправления: Hug/Fill, отступы, выравнивание, поведение при изменении контента.

Как подготовить иконки для разработки: размеры, stroke, export, naming, sprite/SVG

Как подготовить иконки для разработки: размеры, stroke, export, naming, sprite/SVG

Чистая подготовка иконок для фронтенда: единые размеры, корректный SVG-export, нейминг и правила для спрайтов.

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Практичный handoff без потерь: какие состояния и спецификацию передавать, как оформить redlines и финальный checklist перед разработкой.

Related

Похожие статьи

Как организовать стили в Figma: типографика, цвета, эффекты, нейминг — чтобы не было хаоса

Как организовать стили в Figma: типографика, цвета, эффекты, нейминг — чтобы не было хаоса

Система стилей в Figma без дубликатов и путаницы: структура типографики, цветовые группы, эффекты и единый нейминг.

Как собрать дизайн-систему в Figma с нуля: токены, компоненты, варианты, документация

Как собрать дизайн-систему в Figma с нуля: токены, компоненты, варианты, документация

Пошаговый подход к дизайн-системе: от токенов и atomic-компонентов до вариантов, библиотеки и документации для команды.

Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить

Как правильно настроить Auto Layout в Figma: 10 типовых ошибок и как их исправить

Разбираем частые ошибки Auto Layout и практичные исправления: Hug/Fill, отступы, выравнивание, поведение при изменении контента.

Как подготовить иконки для разработки: размеры, stroke, export, naming, sprite/SVG

Как подготовить иконки для разработки: размеры, stroke, export, naming, sprite/SVG

Чистая подготовка иконок для фронтенда: единые размеры, корректный SVG-export, нейминг и правила для спрайтов.

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Как передавать макеты разработчику: спецификация, состояния, токены, redlines, checklist

Практичный handoff без потерь: какие состояния и спецификацию передавать, как оформить redlines и финальный checklist перед разработкой.

Как сделать “pixel perfect” без токсичности: допуски, критерии, что важно на самом деле

Как сделать “pixel perfect” без токсичности: допуски, критерии, что важно на самом деле

Баланс между точностью и скоростью: как согласовать допуски, не скатиться в перфекционизм и сохранить качество без конфликтов.