Оптимизация компонентов через Variants - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Оптимизация компонентов через Variants

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

Мы уже освоили создание сложных компонентов с помощью Variants, используя разные свойства: состояния, размеры, типы. Теперь разберёмся, как сделать эти компоненты максимально эффективными, легко управляемыми и без лишнего «шума» в вашей дизайн-системе.

Зачем оптимизировать компоненты?

Оптимизация компонентов с Variants — это не просто про красоту. Это про производительность, масштабируемость и удобство работы. Неоптимизированные компоненты могут привести к проблемам:

  • Файл Figma «тяжелеет». Чем больше уникальных компонентов, тем больше размер файла.
  • Figma тормозит. Много компонентов — медленная работа.
  • Трудно управлять. Сложно найти нужный компонент, понять его назначение.
  • Дублирование работы. Создаёте похожие компоненты вместо использования Variants.
  • Проблемы с единообразием. Дизайн «плывёт» из-за отсутствия единого источника правды.

Variants позволяют значительно сократить количество мастер-компонентов, объединяя их в одну логичную сущность.

Как оптимизировать компоненты через Variants

1. Объединяйте похожие состояния

Вместо отдельных компонентов для каждого состояния (например, Button/Default, Button/Hover, Button/Pressed), объедините их в один мастер-компонент Button со свойством State.

  • Было:
    • Button/Primary/Default
    • Button/Primary/Hover
    • Button/Primary/Pressed
    • Button/Secondary/Default
    • Button/Secondary/Hover
    • Button/Secondary/Pressed
  • Стало: Один компонент Button с двумя свойствами: Type (Primary, Secondary) и State (Default, Hover, Pressed).

2. Используйте булевы свойства для опциональных элементов

Если элемент может быть показан или скрыт (например, иконка в кнопке, аватар в карточке), используйте булевы свойства (True/False) вместо отдельных Variants.

  • Пример: Кнопка с иконкой или без.

    • Было:
      • Button/Primary/Text Only
      • Button/Primary/With Icon
    • Стало: Один компонент Button со свойством Show Icon (True/False).

    Совет: Используйте свойство Layer в панели Design, чтобы управлять видимостью слоёв внутри компонента. Привяжите его к булевому свойству Variants. Так экземпляры компонента смогут динамически скрывать или показывать элементы.

3. Свойства для размеров и плотности

Если у компонента есть несколько размеров (Small, Medium, Large) или вариантов плотности (Compact, Default), объедините их в одно свойство Variant.

  • Пример:
    • Было:
      • Input/Default/Small
      • Input/Default/Medium
      • Input/Default/Large
    • Стало: Один компонент Input со свойством Size (Small, Medium, Large).

4. Давайте свойствам Variants понятные имена

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

  • Вместо Var1, Var2 используйте State, Type, Size, Icon.

5. Применяйте Auto Layout внутри компонентов

Auto Layout — ключ к гибким компонентам. Он позволяет компонентам автоматически подстраиваться под изменения контента или свойств Variants. Это уменьшает потребность в создании множества статических вариантов.

  • Убедитесь, что ваши мастер-компоненты используют Auto Layout для управления отступами, выравниванием и распределением элементов. Это особенно важно при изменении размеров или видимости элементов через Variants.

Практика: Оптимизируем кнопку

Давайте оптимизируем компонент кнопки для дизайн-системы.

  1. Создайте новый фрейм и назовите его "Оптимизация кнопки".
  2. Нарисуйте базовую кнопку: прямоугольник с текстом "Кнопка" и иконкой (например, стрелкой). Сгруппируйте их с помощью Auto Layout.
  3. Превратите её в компонент. Назовите Button.
  4. Добавьте свойства Variants:
    • Type: Primary, Secondary, Tertiary (измените цвета и стили для каждого типа).
    • State: Default, Hover, Pressed, Disabled (измените внешний вид для каждого состояния).
    • Size: Small, Medium, Large (измените padding и размер текста).
    • Icon: True, False. Для этого создайте внутри компонента слой с иконкой и привяжите его видимость к этому булевому свойству.
  5. Проверьте: Создайте несколько экземпляров кнопки и попробуйте менять их свойства. Убедитесь, что всё работает корректно и вы можете получить любую комбинацию состояний, типов, размеров и наличия иконки из одного мастер-компонента.

Важно: Цель оптимизации — не просто уменьшить количество мастер-компонентов, а сделать их гибкими и управляемыми. Хорошо оптимизированный компонент позволяет дизайнеру быстро собирать интерфейсы, не задумываясь о создании новых вариантов для каждого случая.

Оптимизация компонентов через Variants — мощный инструмент, который делает вашу дизайн-систему стройнее и эффективнее. Но чтобы компоненты были по-настоящему гибкими и адаптивными, нам понадобятся ещё более продвинутые возможности. В следующем разделе мы углубимся в Свойства компонентов (Component Properties). Они позволят кастомизировать экземпляры компонентов ещё точнее, используя текстовые, булевы свойства и даже слоты для вставки других компонентов.