Главное Свежее Вакансии   Проекты
Комментируемое:

Список ссылок временно недоступен
😼
Выбор
редакции
421 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.


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

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

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

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


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

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

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


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

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

Подготовка к работе с 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» в инспекторе. Это также изменит порядок значений в имени каждого варианта.


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


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

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

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

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


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


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

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

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

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

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

Источник

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.