Компоненты и стили

d

Почему простые компоненты ломают даунстримы: ваша типичная ошибка

Вы создали компонент, скопировали на второй экран, заменили текст — и через минуту макет рассыпался. Дело не в вашем усердии, а в отсутствии технически правильной структуры слоёв. Главная боль новичков: текст внутри компонента не подтягивается к авто-лейауту, потому что вы забыли обернуть его в Auto Layout с типом Fill. Без этого при замене текста кнопка не расширяется, а контент вылетает за границы. Практический шаг: создайте фрейм через Shift + A, задайте Padding 16px по горизонтали и 10px по вертикали, внутри разместите текстовый слой с параметром Fixed Width -> Hug. Только такое сочетание делает компонент эластичным к любой замене текста.

Стили в Figma, которые не работают в тёмной теме: очевидный, но игнорируемый факт

Вы создали цветовые стили с жёстко заданными HEX-значениями (#FF0000), скопировали макет в тёмный режим — и получили грязь. Потому что настоящая темизация в Figma строится через токены: символьные ссылки, а не финальные цвета. Например, вместо стиля Primary/Red/#FF0000 создайте стиль Primary/Red/Light: #FF0000 и Primary/Red/Dark: #B30000, но используйте переменные стилей в контейнере режимов — это делается через панель Variables в Figma (окно справа, вкладка Variables). Практический совет: заведите три слоя переменных: 'Light', 'Dark', 'HighContrast'. Только так, при переключении режима, каждый экран подхватывает свой набор цветов без двойных правок.

Варианты компонентов — ваш главный инструмент, если вы не забыли про 'Description'

Многие создают варианты (Variants) для кнопок, но игнорируют самый ценный атрибут — Description. Он позволяет вашим коллегам или вам через месяц понять, зачем вариант 'Primary/Disabled' имеет прозрачность 38% и отличается от 'Secondary/Disabled' по насыщенности. Убедитесь, что в панели 'Component Properties' для каждой вариации вы заполнили текстовое поле в нижней части окна (правый клик по атому -> 'Properties of...' -> 'Description'). Практический кейс: вариант 'Icon Button' без description приводит к тому, что другой дизайнер ставит иконку 12px туда, где должна быть 24px, ломая аксонометрию. Укажите в description: 'Icon size = 24px, padding around = 4px, тип иконки только outline'.

Дополнительный лайфхак: назначьте каждому варианту ключ Instance swap через свойство 'Main component' -> 'Instance swap' -> выберите набор иконок. Тогда при переключении варианта дизайнеру не придётся искать нужную иконку в панели слоёв — он просто тянет её из выпадающего списка. Это экономит до 12 секунд на каждую замену, что для команды из 5 человек за месяц — уже час сэкономленного времени.

Стили текста: выбор между 'Body' и 'Body 2' — не эстетика, а архитектура системы

Распространённое заблуждение: названия стилей текста отражают только размер. На деле стиль 'Body' с параметром Line-height = 170% создаёт другую микрографику, чем 'Body 2' с Line-height = 140%, даже при одном кегле. Это ломает сетку, когда вы заменяете один стиль на другой — межстрочные отступы не совпадают, и модульные расстояния '8-кратная сетка' нарушаются. Практическая мера: при создании семейства текстовых стилей задайте для каждого шага (H1, H2, Body, Caption) одинаковый Line-height multiplier (умножитель): например, 1.5 для заголовков и 1.6 для тела. Не меняйте базу после утверждения дизайн-системы, иначе вся разметка сломается.

Пример из практики: команда стартапа из 8 человек потеряла три дня на выправление расстояний между карточками, потому что 'Body' имел line-height 18px, а реальный шрифт был 16px/24px. Решение — задать line-height как множитель 1.6 (16*1.6=25.6px) вместо фиксированного px. Тогда при изменении кегля вверх/вниз межстрочный интервал синхронно меняется, не требуя ручной правки 200 карточек.

Как не сломать даунстримы при работе с эффектами и гридами: конкретная система валидации

Эффекты (теневые стили) и гриды видятся как визуальная разница, но при копировании между файлами они ведут себя ломано. Вы сохранили тень с размытием 20px в стиле 'Shadow/High', скопировали компонент в другой документ — тень исчезла. Причина: стиль эффекта не опубликован как отдельный элемент библиотеки, и Figma подставляет дефолтное 'None'. Действие: перед тем как создать компонент, который использует эффект, опубликуйте его в библиотеке. В меню 'Assets' → 'Libraries' → 'Publish library', включите галочку напротив эффектов. Только тогда цвет тени и её смещение будут распознаваться как токен, а не как локальное свойство.

Добавлено: 23.04.2026