Свойства компонентов: boolean, text, instance swap

Свойства компонентов делают инстанс гибким: показать иконку, сменить текст, подменить вложенный элемент — всё с панели.

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

Помимо вариантов, у компонента есть три типа свойств, которые выносятся на панель инстанса: boolean (видимость), text (текст) и instance swap (подмена вложенного компонента). Они радикально упрощают работу.

Boolean property — видимость

Вместо двух вариантов «с иконкой» и «без иконки» используйте булево свойство:

1. В мастере выделите слой иконки.
2. В секции Layer на панели нажмите ромб создания свойства видимости (Boolean).
3. Назовите его Show icon.
4. Теперь у инстанса появится переключатель Show icon — вкл/выкл иконку одним кликом.

Text property — текст

Чтобы менять текст инстанса прямо с панели, без двойного клика:

1. Выделите текстовый слой в мастере.
2. Создайте text-свойство и назовите его, например Label.
3. У инстанса появится поле Label — вписываете текст прямо там.

Instance swap — подмена

Если внутри компонента есть вложенный компонент (например иконка), instance swap позволяет менять его на другой:

1. Выделите вложенный инстанс в мастере.
2. Создайте свойство instance swap, назовите Icon.
3. У инстанса появится выпадашка, где можно выбрать любую другую иконку из библиотеки.

Кнопка со свойствами на панели инстанса

  ┌─ Properties ──────────────┐
  | State:      [Default  ▾]  |  <- variant
  | Show icon:  [ ✓ ]         |  <- boolean
  | Label:      [ Купить    ] |  <- text
  | Icon:       [ cart    ▾]  |  <- instance swap
  └───────────────────────────┘

Свойства предпочтения и порядок на панели

Все свойства компонента собираются в секции Properties мастер-компонента, и там же задаётся их порядок — именно в этом порядке они появятся на панели инстанса. Ставьте сверху самые частые: обычно это вариант (State), затем текст подписи, затем переключатели и подмены. Продуманный порядок делает компонент приятным в использовании для всей команды.

Свойства можно переименовывать и удалять в любой момент, а также применять одно text-свойство сразу к нескольким слоям (например, если подпись дублируется). Это называется привязкой свойства к слою и настраивается значком ромба у соответствующего слоя.

Вложенные свойства (nested instances)

Если внутри вашего компонента лежит другой компонент со своими свойствами, Figma умеет «пробрасывать» их наружу — это nested instances. Например, компонент «Карточка» содержит компонент «Кнопка»; вы можете вынести свойства кнопки на уровень карточки, чтобы менять текст кнопки прямо из инстанса карточки, не проваливаясь внутрь. Это делает сложные компоненты управляемыми с одной панели и здорово экономит время.

Горячие клавиши

Частые ошибки

• Плодят варианты вместо boolean. «С иконкой / без иконки» — это одно булево свойство, а не два варианта.
• Забывают применить text-свойство. Если поле текста не появилось на инстансе — проверьте, что свойство привязано к нужному слою.
• Не используют instance swap для иконок. Одна кнопка с подменяемой иконкой заменяет десяток отдельных кнопок.

Совет профи: один умный компонент вместо десяти

Свойства компонентов — это то, что превращает жёсткий шаблон в гибкий конструктор. Одна кнопка с вариантом State, boolean-свойством Show icon, text-свойством Label и instance swap для иконки заменяет десятки отдельных кнопок на все случаи жизни. Команда управляет ею с одной панели, не проваливаясь внутрь и не плодя дубли. Проектируя компонент, всегда спрашивайте себя: «что здесь будет меняться от случая к случаю?» — и выносите именно это в свойства. Расставьте свойства на панели в удобном порядке (частые сверху), дайте им понятные имена. Хорошо спроектированный компонент со свойствами — это подарок всей команде: им пользуются охотно, а дизайн остаётся согласованным без вашего постоянного контроля.

Чек-лист

• Создал boolean-свойство для видимости иконки.
• Создал text-свойство для подписи.
• Настроил instance swap для вложенной иконки.
• Управляю инстансом полностью с панели свойств.

Итоги. Три свойства компонентов — boolean, text и instance swap — превращают инстанс в гибкий конструктор, управляемый с панели. Они сокращают число вариантов и ускоряют работу. Дальше — вложенные компоненты и сборка сложных блоков.