Библиотека компонентов Figma: вес, варианты и порядок разгрузки
Библиотека компонентов должна экономить время: собрал систему, подключил в макеты, обновил один раз — обновилось везде. На практике большая библиотека начинает тормозить, а иногда файл просто не открывается без предупреждения о памяти.
Причина не в «плохой Figma». Причина в том, как устроены компонент-сеты и варианты.
Главное правило: варианты грузятся все
В документации Figma прямо сказано: Figma загружает все компоненты внутри компонент-сета. Это сделано, чтобы переключение между вариантами было мгновенным.
Отсюда следует неочевидный вывод: если у кнопки 60 вариантов (5 состояний × 4 размера × 3 стиля), то в файл, где используется одна кнопка, всё равно приедут все 60. Не «только выбранный вариант».
Поэтому «добавлю ещё вариант» — это не бесплатное действие. Каждый вариант — это отдельный компонент в памяти, даже если вы его никогда не выберете.
Свойства против вариантов
Figma предлагает пять типов свойств компонента:
- boolean — включает и выключает видимость слоя;
- instance swap — подменяет вложенный инстанс;
- text — меняет текст;
- slot — задаёт область для произвольного контента;
- variant — описывает варианты внутри сета.
Логика оптимизации: то, что можно выразить свойством, не нужно выражать вариантом.
Пример. У карточки товара есть бейдж «Скидка». Можно сделать два варианта — «с бейджем» и «без». А можно сделать один вариант и boolean-свойство, которое показывает или скрывает бейдж.
Документация Figma это подтверждает: boolean-свойства «хоть и используют скрытые слои, уменьшают количество вариантов и слоёв, улучшая использование памяти». То есть скрытый слой дешевле, чем отдельный компонент.
Когда библиотеку пора делить
Официальная рекомендация звучит так: если библиотека содержит много вариантов или файл близок к лимиту памяти — используйте component properties, чтобы сократить число компонентов и вариантов. Если и после этого файл у лимита — разделите библиотеку на несколько.
Как делить практично:
- По продукту. Веб-приложение и мобильное — разные библиотеки, если пересечение меньше половины.
- По типу. Иконки отдельно, компоненты интерфейса отдельно, маркетинговые блоки отдельно.
- По команде. Общая база — одна библиотека, узкие компоненты команды — другая.
Разделение не бесплатное: нужно поддерживать связи и публикации. Но один файл на 3000 компонентов почти всегда дороже в обслуживании, чем три по 1000.
Полезно знать: опубликованные компоненты и сеты можно переносить между файлами, не ломая связи с инстансами. Процесс двухшаговый — вырезать и вставить компоненты, затем опубликовать изменения.
Порядок разгрузки файла
- Откройте View → Memory usage и включите отображение памяти по слоям.
- Найдите самые тяжёлые компонент-сеты.
- Для каждого задайте вопрос: все ли варианты нужны в продукте?
- Переведите состояния и иконки на boolean и instance swap.
- Удалите неиспользуемые варианты и «мёртвые» компоненты.
- Скрытые слои, оставшиеся от старых версий, удалите.
- Если файл всё ещё у лимита — вынесите часть компонентов в отдельную библиотеку.
Публикация: как не сломать чужие файлы
Публикация библиотеки — точка, где ваши изменения попадают к другим. Figma в документации по управлению компонентами советует:
- понимать, какие изменения ломающие;
- тестировать изменения в файле-потребителе перед публикацией;
- при наличии плана Organization или Enterprise использовать ветку библиотеки для изолированной проверки.
Практические правила:
Переименование свойства — ломающее изменение. Инстансы в чужих файлах потеряют привязку к значениям.
Удаление варианта — ломающее. Все инстансы этого варианта придётся переназначать.
Добавление boolean-свойства — обычно безопасно. По умолчанию оно выключено, существующие инстансы не меняются.
Добавление варианта — безопасно, если он не подменяет старый.
Если сомневаетесь — публикуйте новое свойство рядом со старым, дайте команде месяц, потом удаляйте старое.
Почему «просто добавлю вариант» дороже, чем кажется
Разберём на числах, без выдуманных бенчмарков.
Кнопка с 4 размерами, 5 состояниями и 3 цветовыми стилями — это 60 вариантов. В компонент-сете каждый вариант хранит собственную структуру слоёв. Если внутри 12 слоёв, получается 720 слоёв только в одном сете.
Теперь добавьте иконку слева и справа как отдельные слои в каждом варианте — и число растёт дальше. Ни один из этих слоёв не нужен в конкретном макете, но все они загружаются.
Замените 3 цветовых стиля на вариантность через переменные, а состояния — на boolean и instance swap, и останется 4 варианта по размеру. Даже без замеров разница в структуре очевидна.
Как быстро найти тяжёлые сеты
Полный аудит библиотеки на 2000 компонентов занимает дни. Начните с выборки:
- Включите память по слоям и отсортируйте страницы по весу.
- Возьмите 5–10 самых тяжёлых компонент-сетов.
- Для каждого посчитайте варианты: если в сете больше 20–30 вариантов, он первый кандидат на разбор.
- Проверьте, нет ли дублей: два сета с одинаковыми названиями и разными вариантами — типичный след параллельной работы.
- Отдельно посмотрите на иконки: часто это самая многочисленная группа компонентов с минимальной вариативностью.
Так вы получаете список из десятка задач вместо «переделать библиотеку».
Признаки, что библиотека стала проблемой
- Файлы с библиотекой открываются заметно дольше остальных.
- Появляется предупреждение о памяти в файле, где используется всего пара компонентов.
- Дизайнеры копируют компоненты между файлами, потому что «подключение библиотеки слишком тяжёлое».
- В компонент-сете больше 30–40 вариантов, и никто не помнит, зачем они.
- Публикация библиотеки занимает минуты и вызывает вопросы «а что изменилось».
FAQ
Правда ли, что Figma грузит все варианты компонент-сета?
Да, это указано в документации: Figma загружает все компоненты в сете, чтобы быстро переключать варианты. Поэтому число вариантов напрямую влияет на память.
Что дешевле по памяти — вариант или boolean-свойство?
Boolean-свойство. Оно использует скрытый слой, но не создаёт отдельный компонент.
Нужно ли делить библиотеку на несколько файлов?
Если после перевода вариантов в свойства файл всё ещё у лимита памяти — да, документация прямо предлагает разделение.
Можно ли перенести компоненты в другой файл без потери связей?
Да. Нужно вырезать и вставить компоненты, а затем опубликовать изменения.
Как проверить изменение библиотеки до публикации?
Открыть файл-потребитель, подменить инстанс на обновлённый и пройтись по комбинациям свойств. На Organization и Enterprise можно использовать ветку.