Variants – новые вариативные компоненты в Figma


06.10.2020 Время чтения - 4 минуты 1027

Эта функция в настоящее время находится в стадии бета-тестирования. Figma будет сотрудничать с бета-тестерами Variants. Это необходимо для устранения ошибок, прежде чем сделать новую функцию доступной для всех.

Команда Figma планирует представить Variants для всех к концу ноября. Поддержка интерактивных компонентов появится в начале 2021 года.

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

Объединяйте варианты в один компонент с настраиваемыми свойствами и значениями. Они могут отображать фронтенд-код, упрощать библиотеки ресурсов и ускорять выбор подходящего варианта.

В нашем примере есть компонент кнопки, который обладает 24 вариациями. Их все вы можете наблюдать на скриншоте нашей дизайн-системы:

A screenshot of the canvas in Figma with 24 variants of a button component. The variants are grouped in a grid structure in one container and there are labels on the top and sides to explain the properties and values of the variants

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

  • Свойство Type со значениями Primary и Secondary.
  • Свойство Size со значениями Large и Small.
  • Свойство State со значениями Default, Pressed и Inactive.
  • Свойство Icon со значениями True и False.

Figma использует этот набор свойств и значений для идентификации каждого уникального образца. На скриншоте ниже видно все эти параметры для одной кнопки.

An instance of a single variant selected in the canvas. In the right sidebar we can see that it is a component of a button, which has the values of primary, large, and default.

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

Примечание: В варианты можно преобразовывать только компоненты. Того же самого вы не сможете сделать, например, с объектами или слоями.

Подготовка к работе с Variants

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

  1. Используйте последовательную систему именования;
  2. Организуйте компоненты на канвасе;
  3. Сгруппируйте связанные компоненты.

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

Используйте последовательную систему именования

Figma уже поддерживает систему именования через слэш / для организации компонентов. Вы можете использовать её, чтобы преобразовать существующие компоненты в Variants.

Мы рекомендуем использовать следующую структуру для любых компонентов, которые вы желаете преобразовать:

componentName/property1value/property2value/property3value

  • Любой текст перед первым / станет именем компонента. Каждый дополнительный / уровень будет создавать новое свойство.
  • По умолчанию Figma назовёт первое свойство Variant, следующее Property 2, затем Property 3 и так далее.
  • У каждого варианта должно быть определено значение для каждого свойства. Убедитесь, что в каждом компоненте используется одинаковое количество слэшей.
  • Если в вашей системе именования есть суффиксы, вы должны преобразовать их в слэш-уровни. Например: если у вас есть состояния компонентов для - hover или - pressed, создайте другой слэш-уровень для нового состояния.
  • Когда вы объединяете варианты в один компонент, Figma создаст переключатели для любых значений Yes/No или True/False.

Например: наш компонент кнопки имеет следующее имя:

Button/Primary/Large/Default/True

После преобразования это будет выглядеть так:

Component name: Button
Variant: Primary
Property 2: Large
Property 3: Default
Property 4: True

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

An annotated diagram which shows a list of variants for a button component before they are converted to variants. Next to that we see the instance section of the right sidebar after they have been converted to variants. There are lines that connect each level in the variant name to the property in the sidebar.

Организуйте компоненты на канвасе;

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

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

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

Figma группирует варианты в одном контейнере. По умолчанию она будет представлять этот контейнер с фиолетовой пунктирной обводкой. Как и в случае с обычными фреймами, вы можете настроить такие свойства как «Заливка» или «Обводка» в соответствии с вашей системой дизайна.

A screenshot of the button variants organized in a grid on the canvas. The properties and values are labelled. There is a line under each label to color-code it. The instance panel is also open in the right sidebar and is highlighted to match the color-coding of the labels in the canvas.

Сгруппируйте связанные компоненты.

При объединении компонентов Figma смотрит только на имена слоев, а не на имена страниц и фреймов. Если вы использовали страницы или фреймы для организации вариантов — они могут стать лишними при преобразовании.

Вы по-прежнему можете использовать страницы и фреймы верхнего уровня для создания дополнительной иерархии. Это улучшает организацию компонентов на панели ассетов и в меню «Instance».

Можно использовать подход, аналогичный системе дизайна Shopify Polaris. Она группирует наборы компонентов, которые функционально похожи. Например, кнопки и группы кнопок в разделе «Действия» или текстовое поле с полем выбора даты в разделе «Формы».

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

Любой, кто обращается к системам дизайна на панели ассетов или в меню «Instance» увидит один результат для одного компонента. После его размещения на канвасе, можно выбрать нужный вариант в инспекторе.

Источник.

Читайте также: Figma – код и дизайн стали ближе