Как посмотреть код в figma

В современном веб-дизайне и разработке платформа Figma стала не просто инструментом для создания интерфейсов, а полноценным мостом между дизайнерами и программистами. Благодаря своей облачной природе и мощным функциям совместной работы, Figma позволяет командам быстро прототипировать, тестировать и передавать проекты на реализацию. Одним из ключевых этапов этого процесса является получение кода или технических данных из макета — именно это и называют «просмотром кода в Figma». Однако важно понимать: Figma сам по себе не генерирует исполняемый код, как Visual Studio или Webpack, но предоставляет разработчикам всё необходимое для его написания — от точных размеров и цветов до CSS-свойств и SVG-экспортов.

Что такое Dev Mode в Figma: основы и принципы

Figma — это векторный графический редактор, работающий в браузере и позволяющий создавать UI/UX-макеты с высокой точностью. С выходом функции Dev Mode платформа значительно расширила свою целевую аудиторию, включив в неё и фронтенд-разработчиков. Режим разработчика — это специальный интерфейс, который показывает технические характеристики выбранных элементов: размеры, цвета, тени, шрифты, отступы и другие свойства, которые можно перевести в код.

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

Основная ценность Dev Mode — в минимизации недопонимания между дизайном и реализацией. Раньше разработчику приходилось вручную измерять отступы, подбирать цвета по HEX-коду и угадывать значения border-radius. Теперь вся эта информация доступна в одном окне, что экономит время и снижает количество ошибок при верстке.

Как попасть в режим разработчика: пошаговая инструкция

Доступ к коду в Figma начинается с активации Dev Mode. Процесс прост и одинаков как для десктопного приложения, так и для веб-версии.

1. Откройте файл Figma в браузере или в приложении.
2. Убедитесь, что вы находитесь на странице с нужным макетом (например, «Desktop View» или «Mobile Screen»).
3. В правом верхнем углу интерфейса найдите кнопку с надписью Design.
4. Нажмите на неё и выберите пункт Dev из выпадающего меню.
5. Интерфейс изменится: слева останется холст, а справа появится панель с технической информацией.

Теперь, когда вы в Dev Mode, выберите любой элемент на макете — фигуру, текст, кнопку или группу. В правой панели отобразятся все его свойства: расположение (X, Y), размеры (width, height), заливка, обводка, тени, размытие, шрифты и отступы. Эти данные можно использовать напрямую при написании HTML и CSS.

Если вы работаете с компонентом (например, кнопкой из библиотеки), Figma покажет, является ли он экземпляром мастер-компонента, и предложит ссылку на оригинал. Это помогает отслеживать единые стандарты в проекте.

Переключение между платформами

Figma позволяет просматривать код не только в формате CSS, но и для мобильных платформ. В верхней части правой панели есть переключатель, где можно выбрать:

• CSS — для веб-разработки;
• iOS — Swift/UIKit свойства;
• Android — XML-представление;
• React — экспериментальный формат (через плагины).

Выбрав, например, iOS, вы увидите не HEX-цвета, а UIColor.init(red:green:blue:alpha:) с нормализованными значениями от 0 до 1. Это удобно для нативных разработчиков, которые не хотят конвертировать единицы вручную.

Как читать и использовать код в Figma: CSS, iOS, Android

После перехода в Dev Mode важно научиться правильно интерпретировать отображаемые данные. Figma не пишет готовый блок кода целиком, но предоставляет все фрагменты, из которых его можно собрать.

Рассмотрим пример: у вас есть кнопка с синим фоном, белым текстом, радиусом скругления 8 пикселей и тенью.

CSS-свойства

При выборе платформы CSS вы увидите:

• Background: #2F80ED;
• Border Radius: 8px;
• Box Shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
• Font: Inter, 16px, Semi-Bold, line-height 24px.

На основе этого легко написать стиль:

.btn-primary {
  background-color: #2F80ED;
  color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

Обратите внимание: Figma автоматически предлагает CSS-свойства с префиксами, если они нужны (например, -webkit-border-radius), хотя в современных браузерах это уже редко требуется.

iOS и Android

Для мобильных разработчиков Figma даёт более специфичные данные. Например, в iOS-режиме:

• Цвет будет представлен как UIColor(red: 0.18, green: 0.5, blue: 0.92, alpha: 1.0);
• Шрифт — как UIFont.systemFont(ofSize: 16, weight: .semibold);
• Тень — через свойства layer.shadowColor, shadowOffset и т.д.

В Android-режиме вы увидите XML-подобные значения:

• Фон: android:background="#2F80ED";
• Текст: android:textSize="16sp", android:fontFamily="sans-serif-medium";
• Скругление — отдельный drawable или использование MaterialShapeDrawable.

Экспорт ресурсов: изображения, SVG, шрифты

Помимо стилей, Figma позволяет экспортировать сами элементы как файлы. Это критически важно для использования в коде — например, логотипов, иконок или сложных графических элементов.

Чтобы экспортировать объект:

1. Выделите нужный слой или группу.
2. В правой панели (вкладка Design или Dev) найдите раздел Export.
3. Нажмите +, чтобы добавить формат экспорта.
4. Выберите: PNG, JPG, SVG, PDF или JSON (для авто-экспорта).
5. Укажите масштаб: 1x, 2x, 3x (для ретина-экранов).
6. Нажмите Export и сохраните файл локально.

Когда использовать SVG

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

Пример экспортированного SVG:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
  <path d="M12 4L20 20H4L12 4Z" fill="#2F80ED"/>
</svg>

Плагины для разработчиков: упрощение получения кода

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

Популярные плагины

• Codegen — создаёт React, Vue или Angular компоненты на основе выбранных фигур.
• Tokens Studio — синхронизирует дизайн-токены (цвета, типографику) с кодовой базой через JSON или CSS-переменные.
• Zeplin for Figma — импортирует макеты в Zeplin для более глубокого handoff.
• Auto Layout to Code — конвертирует Auto Layout в Flexbox или CSS Grid.

Например, с помощью Codegen можно выделить карточку товара и одним кликом получить JSX-разметку с пропсами. Это особенно полезно в больших проектах с едиными компонентами.

Распространённые ошибки и как их избежать

Даже опытные разработчики допускают типичные ошибки при работе с кодом в Figma.

1. Игнорирование Auto Layout

Если макет использует Auto Layout, но разработчик верстает «в лоб», могут возникнуть проблемы с адаптивностью. Всегда проверяйте, есть ли у контейнера свойства Auto Layout — Figma покажет направление (horizontal/vertical), отступы и выравнивание.

2. Копирование значений с округлением

Figma может показывать 15.92px, а разработчик копирует как 16px. На одном элементе разница незаметна, но в системе это накапливается. Используйте точные значения или убедитесь, что округление согласовано с дизайнером.

3. Отсутствие связи с дизайн-системой

Если цвет #2F80ED используется как primary-blue, но в коде задан как жёсткий HEX, при изменении темы придётся менять всё вручную. Лучше использовать CSS-переменные: --color-primary: #2F80ED;.

4. Экспорт без оптимизации

Экспортированный SVG может содержать лишние группы, комментарии, имена слоёв. Перед использованием прогнайте его через оптимизатор (например, SVGO).

Экспертное мнение

Мы поговорили с Еленой Петровой, Product Designer в крупной продуктовой компании, которая более 5 лет использует Figma в мультидисциплинарных командах.

«Раньше handoff занимал два дня: встречи, правки, письма. Сейчас мы делаем это за час. Dev Mode стал стандартом. Но важно, чтобы и дизайнер, и разработчик понимали его ограничения. Например, Figma не покажет transition-duration или z-index, если он не задан явно. Поэтому мы договорились: все интерактивные состояния (hover, active) должны быть в макете, а анимации — описаны в комментариях.

Мы также внедрили Tokens Studio, чтобы цвета и отступы синхронизировались с Storybook. Это убирает расхождения и позволяет обновлять дизайн-систему в реальном времени.»

Вопросы и ответы

Заключение

Просмотр кода в Figma — это не магическая кнопка, а часть продуманного workflow между дизайном и разработкой. Благодаря Dev Mode, разработчики получают точные технические данные: размеры, цвета, шрифты, тени и возможности экспорта. Это ускоряет handoff, снижает количество правок и повышает качество продукта.

• Dev Mode — основной инструмент для получения кода в Figma.
• Поддерживаются CSS, iOS и Android форматы отображения свойств.
• Экспорт в SVG, PNG и других форматах позволяет использовать ресурсы в проекте.
• Плагины расширяют функциональность, но требуют проверки качества вывода.
• Точность и согласованность — ключ к эффективному использованию.