Использование Component Properties: Текстовые, булевы, инстансы

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

Здесь на помощь приходят Component Properties (Свойства компонентов) — мощный инструмент Figma, который сделает ваши компоненты ещё гибче и универсальнее.

Что такое Component Properties?

Component Properties — это настраиваемые параметры, которые вы добавляете к мастер-компоненту. Они позволяют менять определённые аспекты экземпляра компонента, не отсоединяя его от мастера и не создавая кучу вариантов.

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

Это значительно сокращает количество вариантов и делает дизайн-систему компактнее и управляемее.

Figma предлагает несколько типов свойств компонентов:

• Text Property (Текстовое свойство): Меняет текстовое содержимое внутри экземпляра. Идеально для кнопок, заголовков, текстовых полей.
• Boolean Property (Булево свойство): Включает или выключает видимость слоёв или объектов внутри компонента. Отлично подходит для отображения/скрытия иконок, индикаторов или других опциональных элементов.
• Instance Swap Property (Свойство замены экземпляра): Позволяет заменять один компонент на другой внутри экземпляра. Очень удобно, когда сложный компонент содержит другие компоненты (например, карточка с разными типами иконок или аватаров).

Как использовать Text Property

Текстовое свойство позволяет быстро менять текст в любом текстовом слое внутри компонента.

1. Создайте компонент: Сделайте фрейм, добавьте текстовый слой (например, "Текст кнопки") и превратите его в компонент.
2. Добавьте Text Property:
   • Выберите текстовый слой внутри мастер-компонента.
   • В правой панели "Design" найдите раздел "Content".
   • Наведите курсор на текстовое поле и нажмите иконку "Create Text Property" (квадрат с плюсом).
   • Назовите свойство, например, buttonText.
   • Нажмите "Create property".
3. Используйте: Теперь, когда вы создадите экземпляр этого компонента, в правой панели "Design" появится поле для изменения текста с именем buttonText.

Совет: Используйте понятные и короткие имена для свойств. Это облегчит работу с компонентами для вас и вашей команды.

Как использовать Boolean Property

Булево свойство управляет видимостью элементов.

1. Создайте компонент: Сделайте фрейм, добавьте текстовый слой и иконку (например, стрелку) рядом с ним. Превратите это в компонент.
2. Добавьте Boolean Property:
   • Выберите слой с иконкой внутри мастер-компонента.
   • В правой панели "Design" найдите раздел "Layer".
   • Наведите курсор на иконку глаза (видимость слоя) и нажмите иконку "Create Boolean Property".
   • Назовите свойство, например, showIcon.
   • Нажмите "Create property".
3. Используйте: Для экземпляра компонента в правой панели появится переключатель showIcon. Включите его, чтобы показать иконку, или выключите, чтобы скрыть.

Важно: Boolean Property работает только с видимостью слоя. Если нужно полностью удалить элемент из потока Auto Layout, используйте Auto Layout и устанавливайте width или height в 0, или используйте Variants.

Как использовать Instance Swap Property

Это свойство позволяет менять вложенные компоненты.

1. Подготовьтесь: Убедитесь, что у вас есть несколько компонентов, которые вы хотите иметь возможность заменять (например, разные иконки, аватары).
2. Создайте компонент: Сделайте фрейм и поместите в него один из ваших компонентов (например, иконку). Превратите фрейм в компонент.
3. Добавьте Instance Swap Property:
   • Выберите вложенный компонент (иконку) внутри мастер-компонента.
   • В правой панели "Design" найдите раздел "Instance".
   • Наведите курсор на выпадающий список выбора компонента и нажмите иконку "Create Instance Swap Property".
   • Назовите свойство, например, iconType.
   • Вы можете выбрать "Preferred values" (предпочтительные значения), чтобы предложить список компонентов для замены. Это очень удобно для дизайн-систем.
   • Нажмите "Create property".
4. Используйте: Для экземпляра компонента в правой панели появится выпадающий список iconType, позволяющий выбрать любой из доступных компонентов для замены.

Преимущества Component Properties

• Меньше Variants: Вместо десятков вариантов для каждой комбинации текста, иконок и состояний, используйте свойства.
• Проще работать: Дизайнерам не нужно искать нужный вариант в длинном списке, достаточно изменить несколько параметров.
• Больше гибкости: Компоненты становятся универсальнее и легко адаптируются под разные сценарии.
• Лучше организация: Ваша библиотека компонентов будет чище и понятнее.

Component Properties — это следующий шаг к созданию по-настоящему гибких и мощных компонентов. Они значительно упрощают дизайн-систему и ускоряют проектирование.

В следующем разделе мы углубимся в ещё один мощный тип свойства — Content Property (слоты), который позволит вам вставлять произвольный контент в компоненты, делая их ещё более универсальными.