для чего нужны варианты компонентов в figma
Как делать варианты элементов интерфейса в Figma
Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.
Olyasnow для Skillbox Media
Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.
Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.
Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Подготовка компонентов
Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:
Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства
Рекомендуем описывать варианты на английском языке. Например, отмеченный чекбокс большого размера можно назвать так:
Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:
Как сделать кнопки с системой названий в Figma
Теперь у вас есть два готовых компонента, которые можно превращать в варианты.
Создание вариантов
Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.
Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.
Как воспользоваться вариантом
Ваша контрастная кнопка перекрасится в серый:
Добавление новых состояний
У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.
Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:
Как добавить новое свойство
Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:
То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.
С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.
Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:
Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.
Плагин Button Buddy
Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.
Как пользоваться плагином:
У вас на макете появится готовый комбайн с базовыми состояниями кнопки:
Variants — новые вариативные компоненты в Figma
Эта функция в настоящее время находится в стадии бета-тестирования. Figma будет сотрудничать с бета-тестерами Variants. Это необходимо для устранения ошибок, прежде чем сделать новую функцию доступной для всех.
Команда Figma планирует представить Variants для всех к концу ноября. Поддержка интерактивных компонентов появится в начале 2021 года.
Variants представляют новый способ группировки и организации вариаций одного и того же компонента. Это упрощает работу с компонентами и делает их более интуитивно понятными.
Объединяйте варианты в один компонент с настраиваемыми свойствами и значениями. Они могут отображать фронтенд-код, упрощать библиотеки ресурсов и ускорять выбор подходящего варианта.
В нашем примере есть компонент кнопки, который обладает 24 вариациями. Их все вы можете наблюдать на скриншоте нашей дизайн-системы:
Тут есть четыре свойства, каждому из которых свойственны определённые значения.
Figma использует этот набор свойств и значений для идентификации каждого уникального образца. На скриншоте ниже видно все эти параметры для одной кнопки.
Чтобы выбрать необходимые параметры, нажимайте на стрелочку вниз рядом со свойством. Или включайте/выключайте их с помощью свитчеров.
Примечание: В варианты можно преобразовывать только компоненты. Того же самого вы не сможете сделать, например, с объектами или слоями.
Есть несколько вещей, которые вы можете сделать, чтобы максимально упростить преобразование уже существующих компонентов дизайн-системы.
Примечание: Эти пункты влияют на то, как пользователи могут выбирать компоненты из библиотек в Figma. Если они станут причинами проблем в вашей команде, отложите внесение этих изменений, пока не получите доступ к Variants.
Используйте последовательную систему именования Figma уже поддерживает систему именования через слэш / для организации компонентов. Вы можете использовать её, чтобы преобразовать существующие компоненты в Variants. Мы рекомендуем использовать следующую структуру для любых компонентов, которые вы желаете преобразовать:
— Любой текст перед первым / станет именем компонента. Каждый дополнительный / уровень будет создавать новое свойство.
— По умолчанию Figma назовёт первое свойство Variant, следующее Property 2, затем Property 3 и так далее.
— У каждого варианта должно быть определено значение для каждого свойства. Убедитесь, что в каждом компоненте используется одинаковое количество слэшей.
— Когда вы объединяете варианты в один компонент, Figma создаст переключатели для любых значений Yes/No или True/False.
Например, наш компонент кнопки имеет следующее имя:
После преобразования это будет выглядеть так:
Вы сможете изменить название и порядок любых свойств после преобразования их в варианты. Измените порядок свойств в разделе «Variants» в инспекторе. Это также изменит порядок значений в имени каждого варианта.
Будет легче отслеживать все варианты, если вы разместите их в сетке. Контейнер компонента верхнего уровня не может содержать ничего, кроме вариантов. Это означает, что вы не можете сгруппировать набор вариантов или вставить текст в контейнер.
Чтобы делать аннотации к вариантам, мы рекомендуем добавлять текстовые метки для соответствующих свойств и значений рядом с контейнером вариантов.
Вам не нужно держать под рукой компонент для каждой возможной комбинации свойств и значений. Здесь могут находиться любые варианты интерактивных компонентов, которые вам понадобятся.
Figma группирует варианты в одном контейнере. По умолчанию она будет представлять этот контейнер с фиолетовой пунктирной обводкой. Как и в случае с обычными фреймами, вы можете настроить такие свойства как «Заливка» или «Обводка» в соответствии с вашей системой дизайна.
При объединении компонентов Figma смотрит только на имена слоев, а не на имена страниц и фреймов. Если вы использовали страницы или фреймы для организации вариантов — они могут стать лишними при преобразовании.
Вы по-прежнему можете использовать страницы и фреймы верхнего уровня для создания дополнительной иерархии. Это улучшает организацию компонентов на панели ассетов и в меню «Instance».
Можно использовать подход, аналогичный системе дизайна Shopify Polaris. Она группирует наборы компонентов, которые функционально похожи. Например, кнопки и группы кнопок в разделе «Действия» или текстовое поле с полем выбора даты в разделе «Формы».
Создайте примеры Variants: Figma убедится, что ваши экземпляры ссылаются на правильный компонент. При преобразовании компонентов в варианты, все экземпляры будут ссылаться на новый вариант.
Любой, кто обращается к системам дизайна на панели ассетов или в меню «Instance» увидит один результат для одного компонента. После его размещения на канвасе, можно выбрать нужный вариант в инспекторе.
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Как в Figma использовать компоненты и для чего они нужны
Компоненты в Figma позволяют легко и быстро добавлять уже готовые элементы в макет, массово менять их параметры в макетах и передавать их свойства наследникам. Компоненты созданы для того, чтобы повторно использовать уже готовые решения: например, карточки товаров, кнопки, списки и любые другие блоки любой вложенности.
Как создать компонент
Важный момент – для создания компонента вам нужна уже готовая группа элементов, которую в дальнейшем вы назначаете компонентом. Эта группа может находиться в любой месте любого фрейма документа, но будет удобнее, если вы сделаете отдельный фрейм под компоненты – UI-кит. Таким образом вам не придётся потом искать родителя, когда потребуется внести изменения, вы не удалите его случайно и не измените по ошибке. Самое лучшее решение – сделать отдельную страницу под UI и все компоненты помещать в неё.
Итак, чтобы создать компонент:
Всё, компонент готов. В окне навигатора слоёв состояние значка изменится на синюю иконку из четырёх ромбов, цвет названия элемента также станет синим.
Также важно называть компоненты по-человечески для более удобного поиска.
Как создать экземпляр компонента
Есть несколько способов:
Теперь ваш элемент есть в макете, и если вы измените один из параметров стиля компонента, то изменятся и стили всех его экземпляров в документе. В навигаторе экземпляры отмечены иконкой в виде синего пустого ромба.
Как сделать экземпляр обычным элементом
Если вы решили, что какой-то экземпляр компонента более не должен зависеть от родительского компонента, вы можете сделать его обычным элементом (либо группой). Для этого:
Как быстро перейти от элемента к родительскому компоненту
Чтобы не вспоминать, где лежит сам компонент, кликните на элемент правой кнопкой мыши и выберите Master Component > Go to Master Component
Играй бесплатно в браузере!
Заполните форму, мы сделаем иконку
и добави ее в коллекцию
Как сделать прототип в Figma: интерактивные компоненты
Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.
Каждый элемент интерфейса по-своему даёт пользователю обратную связь: меняет цвет, форму, текст, добавляет или убирает что-либо на экране. Делать прототип без компонентов очень сложно, так как вам придётся создавать очень много копий одного и того же экрана.
С помощью функции интерактивных компонентов в Figma вы можете один раз сделать анимацию элемента и затем использовать его во всех своих макетах.
Рассказываем, как анимировать ваши компоненты для прототипа.
Это руководство по продвинутой работе с прототипами и вариантами в Figma. Если вы впервые о них слышите, советуем сначала прочитать предыдущие статьи об этих инструментах:
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Базовые интерактивные элементы
Заранее настройте чекбокс, радиокнопку, обычную кнопку и переключатель. Благодаря этому у вас появится «библиотека», из которой вы сможете взять что угодно в любое время.
Каждый интерактивный компонент можно в любой момент изменить в комбайне, и они будут одинаково работать на всех экранах вашего прототипа:
Всплывающее меню с умной анимацией
Внутри одного интерактивного компонента может быть сразу несколько. Это позволяет делать сложные элементы интерфейса и быстро их менять, если вам в них что-то не нравится. Для примера сделайте всплывающее меню, в котором все пункты меняют цвет по наведению курсора.
Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково:
Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:
10 советов по использованию компонентов в Figma
Использование компонентов в Figma выведет ваш рабочий процесс на новый уровень. В этой статье я объясню, что такое компоненты, как они работают, и дам ряд рекомендаций по их использованию. Приступим.
Что такое компоненты?
Компоненты – это элементы интерфейса, которые можно повторно использовать в наших дизайн-проектах. Компонентом может быть кнопка, иконка или что-то сложное, например, таблица данных. Преимущество использования компонентов в проектах заключается в том, что каждый раз, когда вы вносите изменения в компонент, он обновляет все экземпляры компонента, автоматически экономя ваше время на повторяющуюся и утомительную работу. Это ускоряет ваш рабочий процесс, делает вашу дизайн-систему более согласованной, а также значительно упрощает ее поддержку и сотрудничество с другими дизайнерами.
Понимание поведения компонентов
Прежде чем перейти к рекомендациям и советам по компонентам, давайте рассмотрим одну важную концепцию: главные компоненты (master components) и экземпляры компонентов (component instances).
Экземпляры связаны с главными компонентами. Когда вы вносите изменения в главный компонент, он применяет изменения к экземпляру. На панели слоев вы можете определить по иконке, какие элементы являются главными компонентами, а какие – экземплярами. Для главных компонентов используется иконка с 4 ромбами, а для экземпляров – иконка с одним ромбом.
Важно помнить, что экземпляр наследует все изменения, внесенные в главный компонент, за исключением переопределений экземпляра. Я более подробно остановлюсь на переопределениях экземпляров позже.
Организация и структурирование компонентов
Теперь, когда мы понимаем, как работают компоненты и почему их важно использовать, давайте рассмотрим лучшие практики организации и структурирования компонентов.
1) Используйте четкую систему наименований и фреймы для организации компонентов
Хорошая организация и система наименований позволяют легко находить компоненты на панели ресурсов, менять соответствующие компоненты и повышать юзабилити и адаптацию системы другими членами команды. Двумя наиболее полезными вариантами, используемыми при организации компонентов, являются имена со слешем (косой чертой) и фреймы-контейнеры. Использование обоих вариантов дает вам надежную и гибкую организационную структуру. Вот как они работают.
Именование со слешем
Именование со слешем – это соглашение об именах компонентов, которое использует косую черту для создания организованной иерархии ваших компонентов. Например, если у вас есть первичная и вторичная кнопки с поддерживаемыми состояниями, вы можете использовать «/»:
Для доступа к более широкой подкатегории «связанных компонентов» в меню экземпляра вы можете объединить две последние метки, т.е. текст кнопки (text) и статус кнопки (default), разделяя их тире вместо косой черты. Это особенно полезно для больших категорий со множеством подкатегорий. Вы можете увидеть это в действии на панели активов на скриншоте выше.
Фреймы-контейнеры
Сгруппируйте и организуйте свои компоненты в коллекции, используя фреймы. Это сокращает имена компонентов и упрощает визуализацию их связей.
Когда вы объединяете оба варианта именования, вы получаете лучшую организацию на панели ресурсов и в меню экземпляров.
Вот еще один пример использования фрейм-контейнеров и именований со слешем
2) Выберите простой для понимания метод структурирования состояний и вариантов компонентов
По мере роста ваших компонентов вам потребуется система для управления и структурирования их состояний и вариантов. Если у вас нет способа упорядочить различные состояния и варианты компонента, ваша система станет неуправляемой и неудобной в использовании.
Есть несколько методов, которые помогут вам управлять этими зависимостями. У каждого есть свои плюсы и минусы, и в зависимости от того, как работает ваша команда, один метод может оказаться более подходящим, чем другой. Я разберу каждый метод и поделюсь компромиссами их использования.
а) Отдельные главные компоненты для каждого варианта
Этот метод прост и понятен. Вы используете отдельные главные компоненты для каждого варианта или состояния, которое необходимо поддерживать. Он понятен и прост в использовании.
Плюсы:
Минусы:
b) Вложение всех вариантов в один главный компонент
Этот метод использует один главный компонент со всеми вариантами, вложенными в него. Хотя это кажется отличной альтернативой недостаткам метода A, оно имеет свои собственные уникальные проблемы.
Плюсы:
Минусы:
c) Создание переопределений для всех вариантов с использованием одного главного компонента
Этот метод использует один главный компонент и создает все варианты, используя переопределения экземпляров.
Плюсы:
Минусы:
Имейте в виду, что это не выбор между одним методом или другим. Вы можете использовать гибридный подход для поддержания различных состояний и вариантов компонентов. Тем не менее, я рекомендую использовать метод A (отдельные компоненты для каждого состояния или варианта) в качестве основного. Используйте методы B и C, если компонент поддается вложенным вариантам или простым переопределениям экземпляров, как пример с аватаром профиля выше.
3) Используйте вложенные атомные компоненты в качестве глобальных строительных блоков
Хорошо структурированная система компонентов проста в обслуживании. Один из лучших способов сделать компоненты более удобными в обслуживании – использовать «атомные» компоненты. Эта концепция основана на методологии атомарного дизайна, Брэда Фроста, в которой атом представляет наименьшее инкрементное свойство элемента интерфейса. Думайте об этих атомных компонентах, как о строительных блоках. Например, форма кнопки или иконка.
Наилучшим подходом для этого является создание набора многократно используемых атомных компонентов с единственной целью вложения атомарных экземпляров в другие связанные компоненты. Возьмем, в качестве примера, текстовые поля. Мы можем превратить форму текстового поля в атомный компонент и вложить его экземпляры в каждый другой компонент текстового поля, который мы создаем. Это означает, что все текстовые поля используют один и тот же строительный блок (то есть атомный экземпляр), и, если будет необходимо изменить форму текстовых полей, все, что нам нужно сделать, это обновить атомный компонент, и все другие компоненты текстового поля также обновятся. Использование атомарного подхода позволяет беспрепятственно применять глобальные изменения к компонентам, что значительно упрощает обслуживание вашей системы.
Работа с компонентами
У нас есть четкая система структурирования, организации и обслуживания компонентов. Теперь давайте рассмотрим рекомендации по созданию компонентов для улучшения рабочего процесса и производительности вашей команды.
4) Установите ограничения и сетку макета (layout grids) для предсказуемого поведения
Как только вы настроите основной дизайн для компонента, потратьте немного времени, чтобы установить ограничения и сетку макета (при необходимости). Задав эти свойства с самого начала, вы облегчите другим членам команды понимание предполагаемого адаптивного поведения компонента при изменении его размера. Это сэкономит ваше время, пока вы будете работать над поддержкой адаптивного поведения во всем продукте.
Одно примечание по сетке макетов. Использование сетки макета в компоненте необходимо только в том случае, если ваш компонент более сложен и требует детального контроля над распределением его элементов по мере изменения его размера.
5) Сохраняйте переопределения текста при замене экземпляров
Одна из замечательных особенностей Figma – вы можете сохранить переопределения текста, когда вам нужно поменять местами экземпляры. Для этого убедитесь, что текстовый слой внутри каждого компонента имеет одинаковое имя (например, «Button Text»). Если вы этого не сделаете, ваши переопределения текста не сохраняться, и вам придется вручную обновлять текст после замены экземпляров.
6) Используйте функцию Clip content, чтобы уменьшить количество повторяющихся экземпляров
Поскольку компоненты действуют как фреймы для всех намерений и целей, мы можем использовать функцию Clip content, (обрезать содержимое), чтобы обрезать или скрыть элементы, которые выходят за пределы компонента. Хотя вы не будете использовать Clip content для каждого компонента, это очень полезная функция для компонентов с повторяющимися элементами, такими как таблицы данных и списки. Например, у вас есть компонент списка с различным количеством строк в зависимости от сценария. Использование функции Clip content позволяет изменять размер списка и отображать больше или меньше строк, используя только один главный компонент. Помните, что для этого нужно правильно настроить ограничения. Если вы этого не сделаете, расширение или уменьшение границ компонента нарушит его.
7) Добавьте описание к компоненту
Главные компоненты содержат поле описания, в котором вы можете добавить информацию об использовании компонента, его поведении и другой соответствующий контекст. Описание компонента появляется, когда вы наводите на него курсор на панели ресурсов.
Целью описания компонентов является предоставление необходимой информации, чтобы дать членам команды достаточно контекста для понимания работы компонента и его места в продукте. Не переусердствуйте и не документируйте каждый главный компонент. Наиболее распространенные причины для добавления описания к компоненту – обеспечить ясность вложенного компонента или предоставить сопутствующий контекст о состоянии / варианте конкретного компонента. Гораздо лучше создать систему самодокументирования, чем поддерживать сотни описаний компонентов.
Когда вы добавляете к компоненту описание, наведите на него курсор на панели ресурсов, и появится подсказка
8) Используйте переопределения экземпляров для адаптации компонентов к разным пользовательским контекстам
Иногда вам будет нужно обновить унаследованные свойства экземпляра. Возможно, вам придется внести изменения и адаптировать экземпляры в зависимости от вариантов использования и контекста. Помните, что экземпляр по умолчанию наследует все свойства от своего главного компонента. Вот где пригодятся переопределения. Переопределение позволяет вам изменять свойства экземпляра, не разрывая его связь с главным компонентом.
Переопределения дают вам правильный баланс между гибкостью и согласованностью. Они дают вам гибкость в создании отдельных локализованных экземпляров для соответствия различным контекстам и обеспечивают согласованность, продолжая наследовать обновления от главного компонента.
Вот все свойства, которые вы можете переопределить:
В следующих двух примерах показано, как устанавливать переопределения и как эти переопределения сохраняются даже при обновлении главного компонента.
Если вы делаете переопределения для экземпляра, но позже хотите вернуться к первоначально унаследованным свойствам, вы можете сбросить переопределенный экземпляр. У вас есть возможность сбросить все переопределения или сбросить конкретное переопределение.
9) Быстрая замена связанных компонентов
Поскольку число ваших компонентов растет, поиск нужного компонента на панели ресурсов и в меню экземпляра может быть утомительным. К счастью для нас, у Figma есть решение. Быстрый способ поменять связанные компоненты – использовать контекстное меню. Просто щелкните правой кнопкой мыши по экземпляру, который вы хотите переключить, и перейдите к пункту Swap instance. Появится подменю со списком связанных компонентов.
10) Отсоедините экземпляр, чтобы удалить связь с главным компонентом
Если вы хотите полностью удалить связь между экземпляром и его главным компонентом, вы можете отключить его. Когда вы делаете это, экземпляр становится независимым фреймом и больше не будет наследовать изменения от исходного главного компонента. Это полезно, когда вы хотите создать новый компонент в целом.
Вывод
Создание качественной системы компонентов не простая задача. Это требует времени, терпения и готовности искать способы работать лучше и эффективнее. Когда вы строите свою систему компонентов, просто помните, что нет единственно правильного способа сделать это. Возьмите 10 советов из этого руководства, попробуйте их и измените так, чтобы они лучше подходили к вашему рабочему процессу. Спасибо за прочтение!