Свойства компонентов в Figma: boolean, text, swap, variant
Компонент без свойств — это жёсткая заготовка: чтобы поменять иконку или подпись, приходится заходить внутрь и править слои.
Свойства компонентов выносят управление наружу, в правую панель.
Дизайнер видит один набор понятных переключателей вместо десятка вложенных слоёв.
Зачем это нужно
Свойства описывают, что в компоненте можно менять.
Это может быть видимость слоя, подставляемый экземпляр, текст или вариант целиком.
Чем яснее описан компонент, тем меньше ошибок у тех, кто им пользуется.
Пять типов
В Figma есть пять типов свойств.
Boolean включает и выключает слой.
Instance swap позволяет заменить вложенный компонент.
Text открывает строку для правки текста.
Variant задаёт варианты внутри набора компонентов.
Slot создаёт свободную область для произвольного содержимого.
Boolean
Boolean работает только с видимостью слоя.
Это удобно для иконки в кнопке: вместо двух вариантов достаточно одного переключателя.
В документации прямо сказано, что других свойств boolean пока не поддерживает.
Instance swap
Это свойство показывает, какие вложенные экземпляры можно заменять.
При создании задаётся экземпляр по умолчанию.
Дополнительно можно указать предпочтительные варианты — список того, что дизайнер увидит в первую очередь.
Text
Text открывает для правки содержимое текстового слоя.
В экземпляре появляется поле, и текст меняется прямо на холсте.
Это самый частый тип свойства в интерфейсных библиотеках.
Variant
Variant описывает варианты набора: состояния, размеры, цвета.
Каждый вариант должен быть уникальной комбинацией значений.
Часть комбинаций можно не создавать: необязательно делать компонент под каждое возможное пересечение свойств.
О вариантах — в статье о вариантах компонентов.
Slot
Slot создаёт гибкую область, куда можно добавлять, редактировать и переставлять содержимое.
Это ответ на жёсткость обычных компонентов: в слот помещают что угодно, не разрывая связь.
Тип полезен для карточек, модальных окон и контейнеров со сменным содержимым.
Где создают свойства
Выделите главный компонент или набор компонентов.
В правой панели найдите раздел Properties.
Нажмите в нём и выберите тип из списка.
Откроется окно создания свойства, где задают имя и параметры.
Родительский и дочерний слой
Boolean, text и instance swap можно создать с дочернего слоя.
Тогда свойство сразу применится к этому слою.
С родительского слоя тоже можно, но потребуется дополнительный шаг: привязать свойство к дочерним слоям.
Variant создаётся только с родительского слоя.
Имя свойства
Имя должно объяснять смысл, а не устройство.
«Показать иконку» лучше, чем «Boolean 1».
Имена видны дизайнерам в панели экземпляра, и от них зависит, поймут ли компонент без объяснений.
Панель экземпляра
Когда свойство создано, у экземпляра появляется единый набор элементов управления.
Boolean показан переключателем.
Instance swap — выпадающим списком с пометкой, что экземпляр можно заменить.
Text — полем ввода.
Всё это находится в одном месте, а не разбросано по слоям.
Практика: кнопка с иконкой
Создайте компонент кнопки.
Внутри — текст и слой иконки.
Выделите слой иконки и создайте boolean.
В экземпляре появится переключатель видимости иконки.
Практика: карточка с иконкой
Вложите компонент иконки в карточку.
Создайте instance swap свойство для этого слоя.
Задайте иконку по умолчанию и список предпочтительных.
Теперь иконку меняют из панели, не заходя внутрь.
Практика: подпись кнопки
Создайте text-свойство для текстового слоя.
В экземпляре введите новый текст.
Проверьте, что при длинной подписи кнопка не ломается: ширина должна быть в авто-раскладке.
Свойства и переопределения
Правка свойства в экземпляре — это переопределение.
Оно сохраняется при обновлении компонента и может перекрыть новое значение.
Если переопределение больше не нужно, экземпляр сбрасывают.
О переопределениях — в статье о переопределениях экземпляров.
Свойства и библиотека
В библиотеке компонент со свойствами удобнее для команды.
Дизайнер открывает панель и видит, что можно менять, без изучения внутренностей.
О библиотеке — в статье о библиотеке компонентов.
Где ломается
Свойство не появилось у экземпляра. Оно создано на дочернем слое другого варианта.
Boolean не выключает слой. Свойство привязано к другому слою.
Список замены пустой. Не заданы предпочтительные экземпляры.
Variant не создаётся. Выделен дочерний слой, а не сам набор.
Текст обрезается. У текста фиксированная ширина.
Как не превратить компонент в конструктор
Свойств может быть сколько угодно, но чем их больше, тем сложнее компонент для команды. Практическое правило: если свойство нужно одному дизайнеру раз в месяц, лучше не добавлять его в панель, а сделать отдельный вариант. Пять-шесть понятных свойств читаются с первого взгляда, пятнадцать — превращают экземпляр в приборную панель, в которой никто не хочет разбираться.
Порядок в дизайн-системе
Свойства стоит вводить постепенно, по мере появления повторяющихся задач. Сначала текст и видимость иконки, затем замена вложенного элемента, потом варианты. Такой порядок совпадает с тем, как компонент реально используется. Если начать с полного набора сразу, половина свойств окажется невостребованной, а документация устареет раньше, чем её прочитают.
Как проверять компонент
Соберите из компонента три-четыре реальных экрана и попробуйте обойтись только панелью свойств. Если приходится заходить внутрь и двигать слои, значит, чего-то в свойствах не хватает. Если переключателей слишком много и они путаются, часть стоит убрать. Такой тест занимает полчаса и хорошо показывает, готов ли компонент к командной работе.
Свойства и код
При передаче в разработку свойства компонента помогают объяснить, какие параметры у элемента действительно настраиваемые. Разработчик видит тот же набор переключателей и понимает, что от него ждут в реализации: например, что иконка опциональна, а текст произвольный. Это снижает число вопросов на этапе вёрстки и делает макет ближе к тому, что получится в коде. О передаче — в статье о Dev Mode.
FAQ
Сколько типов свойств есть в Figma?
Пять: boolean, text, instance swap, variant и slot.
Что умеет boolean?
Только включать и выключать видимость слоя.
Можно ли создать variant с дочернего слоя?
Нет, variant создаётся только с родительского слоя или набора.
Где менять свойства?
В правой панели экземпляра, в разделе свойств компонента.