Как получить максимум от Figma-плагина Codigma

1) С чего начать: что Codigma “понимает”

Ошибка номер один — рассчитывать, что инструмент “сам разберётся”. Codigma не читает мысли. Он читает структуру: фреймы, вложенность, правила размеров и отступов. Поэтому чем понятнее макет, тем меньше сюрпризов после экспорта.

Если экспорт вышел странным, чаще всего виновато одно из этих: где-то Auto Layout, а рядом абсолютное позиционирование; отступы “как получилось”; слои живут без нормальных контейнеров.

2) Auto Layout: половина успеха

Auto Layout — это про “правила”, а не про красоту. Когда правила есть (padding, gap, выравнивание, Fill/Hug), результат обычно получается стабильнее и ближе к тому, что вы ожидали.

Самое полезное в ежедневной работе

• Контейнеры — на Auto Layout (да, даже если внутри один элемент).
• Отступы делайте через padding родителя, а не “двигаем детей руками”.
• Один набор отступов на весь файл: 8 / 16 / 24 — и меньше хаоса.
• Fill/Hug выбирайте по смыслу: тянуться — Fill, по контенту — Hug.
• Не смешивайте подходы в одном блоке: половина вручную, половина Auto Layout — классический источник проблем.

3) Названия слоёв: чтобы было по-людски

“Frame 123” в моменте не мешает, но потом отнимает время. Особенно когда вы обсуждаете экспорт с разработчиками или пытаетесь быстро поправить блок. Лучше один раз назвать нормально — и забыть.

Что стоит сделать

• Фреймы называем по смыслу: Header, PricingCard, FeatureList, Sidebar.
• Слои называем по роли: Title, Subtitle, Icon, PrimaryButton.
• “Group 9” не оставляем в том, что вы собираетесь экспортировать.
• Убираем лишние обёртки: “фрейм в фрейме в фрейме” быстро раздувает структуру.

4) Компоненты/варианты: меньше ручной работы

Один экран можно “дотащить” руками. Но в продукте важнее другое: чтобы всё было одинаково и собиралось быстро. Поэтому выгодно сначала привести в порядок повторяющиеся элементы.

Что обычно стоит сделать компонентами

• Кнопки (primary/secondary/disabled)
• Инпуты (default/error/disabled)
• Карточки (товар, фича, отзыв)
• Навигация (табы, элементы сайдбара, топ-бар)

Где помогают варианты

Hover/active/disabled удобно держать вариантами — и дизайнеру понятнее, и после экспорта меньше вопросов “а это какой стейт?”. Размеры (sm/md/lg) — туда же.

5) Что выбирать в Figma (и что лучше не выбирать)

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

Обычно хорошо работает

• Целый экран (если он уже нормально собран)
• Один компонент (кнопка, карточка, модалка, навбар)
• Одна секция (hero, pricing, список фич) — самостоятельный кусок

Что часто портит результат

• “Половинки” (текст без контейнера, кусок карточки и т.п.)
• Слои внахлёст (держатся только на ручном позиционировании)
• Скрытые слои внутри выбранного блока (“пусть пока полежит”)
• Текст без чётких границ (когда выравнивание держится на “воздухе”)

6) Понятный процесс: 6 шагов

Самый быстрый способ — не “вымучивать идеально”, а работать итерациями: экспортнули → посмотрели → поправили → экспортнули снова.

1. Выберите один блок (компонент/секция/экран) и начните с него.
2. Проверьте Auto Layout + padding + gap.
3. Переименуйте ключевые слои (Header вместо Frame 123).
4. Сделайте экспорт и отметьте, что выглядит странно.
5. Лучше чинить в Figma, чем сразу костылить в коде.
6. Дальше масштабируйте: компонент → секция → страницы.

7) Частые проблемы и быстрые решения

“Отступы поехали / spacing другой”

• Отступ задаётся padding’ом родителя? Если нет — начните с этого.
• Gap значения одинаковые? (8/16/24)

“Что-то не тянется / не растягивается”

• На нужном слое стоит Fill или случайно остался Hug?
• У родительского фрейма понятное правило ширины? (fixed/fill/constraints)

“Слишком много вложенности”

• Уберите обёртки, которые не несут смысла для лейаута.
• Вместо Group лучше использовать фреймы с Auto Layout.

“Код тяжело читать”

• Переименуйте ключевые блоки (Header/Card/Title/Button).
• Повторяющиеся части сделайте компонентами/вариантами и экспортните заново.