Figsight #9: Война за память

Сегодня поговорим о том, как лучше организовывать компоненты
в Figma. Разберём основные варианты — от простых до самых необычных — и выясним, какой подойдёт именно вам.

Figma по умолчанию предлагает использовать Variants для организации компонентов. Это удобно и понятно. Но есть один минус: при использовании компонента загружаются все его варианты и слои, что увеличивает нагрузку на проект.

Пример: у нас есть компонент из 20 слоёв. Добавим три размера и два типа — это уже 120 слоёв. Добавим четыре состояния: обычное, при наведении, активное и дизейбл — уже 480 слоёв. Теперь представим, что у компонента есть версия с плейсхолдером и без — уже 960 слоёв. А если у нас есть версии с префиксом, постфиксом, и обе сразу, плюс базовый вариант без них — 3840 слоёв. Добавим вариант с лейблом — это уже 7680 слоёв!

Чем больше усложняем компонент, тем больше слоёв. Например,
в компоненте Input в VK UI целых 21 000 слоёв. Это нагружает проект, особенно если у вас много таких компонентов. Посмотреть использование памяти и количество слоёв в проекте можно через функцию фигмы Cmd / Command + /, далее Memory Usage.

На помощь приходят Component properties. С их помощью можно сократить количество вариантов. Например, мы можем настроить
вид префиксов, постфиксов и лейблов через свойства, а не через отдельные варианты. Это облегчает компонент, хотя делает его менее наглядным.

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

Другой вариант — использовать Instance Swap вместо вариантов.

Преимущества этого способа:Все виды компонентов отображаются
в панели Asset, и для каждого из них работает свой поиск. Переключение компонентов через Instance Swap отличается
от вариантов — это полноценный оверайд, что может быть полезно.
И самое важное: если какой-то вариант компонента не используется
в рабочем файле, он не будет загружен, что снижает нагрузку
на проект.

Это новое и довольно экстравагантное решение, но в некоторых случаях оно помогает облегчить компонент. Переменные
не нагружают Figma так, как это делают варианты. Например,
все состояния можно организовать через переключение модов.

Возьмём простую кнопку: текст и фон. Всё просто. Но что делать, если у вас 10 разных кнопок, и вы хотите управлять ими сразу? Возникает соблазн создать одну мастер-кнопку и использовать её для всех остальных.

Но будьте осторожны! UI-дизайнеры исследовали этот подход много лет и пришли к выводу, что со временем такая структура может начать работать не так, как хотелось бы.

Удобно менять содержимое компонентов через instance swap,

но, к сожалению, пока невозможно контролировать свойства заменяемых частей…😟 Или всё-таки можно? (Спойлер: об этом расскажем в следующей статье)

Решать вам! Каждый проект, команда и задача уникальны.
Лично я использую комбинацию всех этих методов: внешний вид компонента меняется через свап, размеры и состояния — через варианты, а часть свойств настраивается через Component properties. А об использовании переменных мы поговорим в следующей статье.