Figma variants: Creating and organizing Variants |

Содержание

Советы по использованию вариантов (variants) в Figma

Если вы любите часто использовать компоненты в своих дизайнах, то вы полюбите новую функцию Figma под названием варианты (Variants). Она переводит процесс проектирования на совершенно иной уровень!

Разбираемся с Figma Variants + Auto Layout на примере создания кнопок

Что такое варианты

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

Варианты сделают ваши дизайн-системы более гибкими и быстрыми в использовании. Просмотр компонентов стал намного удобнее. В целом варианты упрощают наборы компонентов.

Кроме того, хорошо подготовленные варианты сохраняют переопределения.

Пример варианта

Когда вы используете компонент Variant, вы можете настроить его (или выбрать другие варианты) в соответствующем разделе на панели справа.

Как создать варианты

Создавать варианты очень просто. Выберите группу компонентов и нажмите «Combine as Variants» на панели справа.

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

Создание варианта кнопки

Давайте посмотрим на пример правильно названных компонентов, которые будут работать как варианты:

Например, у вас есть компоненты, названные в соответствии со следующим соглашением (пример на скриншоте выше):

Button/Default/Primary
Button/Default + Icon/Primary
Button/Default/Secondary
Button/Default + Icon/Secondary

После создания градиентов вы сможете добавить иконку и стиль в компонент «Кнопка».

Я обновил User Flow Kit, чтобы по максимуму использовать варианты. Это позволило мне узнать много нового о самой функции. Ниже я хотел бы дать вам несколько практических советов по использованию вариантов.

Как сделать переключатель вместо раскрывающегося списка

Когда вы просматриваете активы дизайна, вы можете заметить, что в некоторых вариантах есть переключатели вместо выпадающих селекторов. Сделать переключатель очень просто:

Вы должны оставить только два значения в свойстве варианта.
Значения свойств должны быть названы «Yes, No», «On, Off» или «True, False».

Итак, из приведенного выше примера мы можем переименовать свойство в «Icon» и значения «True», «False».

Настройка варианта

Если в вашем проекте есть такие компоненты, я настоятельно рекомендую настроить их подобным образом.

Конфигурация свойств варианта

Вариант конфигурации экземпляра

Практическое использование вариантов

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

1.

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

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

Когда дело доходит до состояний кнопок, они тоже полезны. Подготовьте компоненты, чтобы они имели такие свойства, как «По умолчанию, Наведение, Нажатие, Отключено». Тогда вы сможете настраивать их с помощью вариантов.

2. Используйте его, чтобы изменить стиль

Назовите свои компоненты так, чтобы они имели стиль — «Основной», «Вторичный», «Нейтральный», «Ошибка», «Успех» и т. д. Благодаря этому вы сможете настраивать их на лету с помощью различных вариантов.

Эксперименты с вариантами

3. Различия в размерах компонентов

С помощью вариантов можно управлять не только состояниями элементов управления интерфейса. Если в вашем проекте несколько размеров кнопок, объедините их с помощью вариантов. Так вы сможете переключаться между большим, средним и малым размером в пределах одного компонента.

4. Объедините несколько свойств

Не ограничивайте варианты одним или двумя свойствами. Подумайте, как вы будете использовать библиотеку дизайн-системы. Например, кнопки могут иметь следующие свойства: размер, стиль, состояние и иконка.

На панели вы увидите только один компонент, и сможете очень быстро настроить его с помощью вариантов.

Каковы ограничения вариантов?

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

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

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

Варианты – очень гибкая функция. Они предоставили нам много возможностей для масштабирования дизайн-систем и ускорения рабочего процесса. Знаете другие советы по использованию вариантов? Делитесь ими в комментариях!

Бонус

Чтобы облегчить начало работы с вариантами, я приготовил для вас небольшой подарок. Файл включает в себя два элемента управления пользовательского интерфейса: кнопку и переключатель, они объединены, как варианты. Вы можете скачать файл здесь: Figma Variants Sample

Если хотите увидеть более продвинутое использование вариантов, ознакомьтесь с моим User Flow Kit. Вы также можете прочитать другие мои статьи по ✍️ UI дизайну . Эта статья первоначально была опубликована в моем блоге.

Перевод статьи uxdesign.cc

Variants — новые вариативные компоненты в Figma — Дизайн на vc.ru

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

13 194
просмотров

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

Источник

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

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

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

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

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

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

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

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

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

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

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

Примечание: Эти пункты влияют на то, как пользователи могут выбирать компоненты из библиотек в 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».

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

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

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

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

Как создавать варианты и свойства в Figma | by Kari Sabine Malmin

Kari Sabine Malmin

Читать

Опубликовано в

5 минут чтения

9000 4 2 ноября 2022 г.

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

С вариантами и свойствами вы можете иметь несколько состояний и вариантов в одном и том же компоненте, например первичный и вторичный, по умолчанию и при наведении. В этом посте я расскажу:

Как сделать вариант с наведением
Как сделать дополнительный вариант

Начнем с создания нового фрейма с простым текстовым элементом.

Затем нам нужно щелкнуть по нему правой кнопкой мыши и выбрать «Добавить автоматический макет» (или выбрать Shift+A).

Теперь элемент получит оболочку, чтобы мы могли добавить отступы и цвет фона.

Затем добавьте цвет заливки и настройте отступы.

И добавьте закругленные углы, если хотите.

Теперь щелкните правой кнопкой мыши и выберите «Создать компонент».

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

Добавить свойство

Щелкните знак + рядом с Свойства на боковой панели и выберите Вариант .

Теперь вокруг элемента появится дополнительная рамка.

Еще раз проверьте правую боковую панель — в разделе Свойства — вот ваше первое свойство. Давайте изменим его имя и значение.

Щелкните значок настроек и измените Свойство 1 на Наведение и По умолчанию на Ложь .

Добавить вариант

Теперь мы можем добавить вариант, щелкнув знак + под компонентом.

Немного изменить внешний вид дополнительной кнопки.

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

Проверьте правую боковую панель. Теперь у нас есть переключатель, с помощью которого мы можем переключаться между true и false в этом экземпляре компонента, чтобы просто настроить дизайн.

Да, отлично! Далее сделаем еще один вариант кнопки — второстепенный.

Пока мы сделали основные кнопки — default и hover. Прежде чем мы начнем со второстепенных кнопок — давайте определим первые как основные.

Щелкните фиолетовую пунктирную рамку, затем щелкните значок + рядом со свойствами на боковой панели и добавьте новый вариант.

Добавить имя Введите и значение Основной — это сделает основной по умолчанию.

Теперь мы готовы сделать дополнительные кнопки.

Нажмите еще раз на пунктирную рамку, а затем на появившуюся иконку + — , чтобы сделать другой вариант.

Не стесняйтесь перемещать кнопки внутри пунктирной рамки и добавлять небольшие заголовки. У нас могут быть основные кнопки в первом ряду и второстепенные в следующем.

Теперь дважды щелкните последнюю кнопку, которую вы создали. Перейти к Текущий вариант на боковой панели. Рядом с введите , вы найдете выпадающее меню — выберите Добавить новый .

Изменить Hover на False и Введите на Secondary .

Теперь мы можем изменить внешний вид дополнительной кнопки.

На кнопке за пределами фрейма компонента теперь мы можем выбрать из выпадающего списка тип кнопки — первичный или вторичный.

Теперь добавим еще один вариант — состояние наведения для дополнительной кнопки. Еще раз щелкните пунктирную границу, а затем значок +.

Затем дважды щелкните последнюю кнопку и посмотрите на Текущий вариант на правой боковой панели. Измените Hover на True и Type на Secondary.

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

Наконец — вот как это работает. Кнопка с изменяемыми вариантами и свойствами — так что вы можете переключать варианты прямо в дизайне без копирования/вставки, создавать сложные системы компонентов и отслеживать все это одновременно. ✨

Варианты — Руководство Figma — Дизайн+Код

Добавить в избранное

Объединение похожих компонентов в варианты

Руководство Figma

Инструмент проектирования Figma