UXPUB 🇺🇦 Дизайн-спільнота

Cover image for 10 советов по использованию компонентов в Figma
Редакція
Редакція

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

10 советов по использованию компонентов в Figma

Использование компонентов в Figma выведет ваш рабочий процесс на новый уровень. В этой статье я объясню, что такое компоненты, как они работают, и дам ряд рекомендаций по их использованию. Приступим.

Лучшие практики Figma: компоненты, стили и общие библиотеки

Что такое компоненты?

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

Понимание поведения компонентов

Прежде чем перейти к рекомендациям и советам по компонентам, давайте рассмотрим одну важную концепцию: главные компоненты (master components) и экземпляры компонентов (component instances).

  • Главный компонент создается при первом превращении элемента интерфейса в компонент и определяет свойства компонента.
  • Экземпляр является копией главного компонента, который вы можете повторно использовать в разных проектах.

Экземпляры связаны с главными компонентами. Когда вы вносите изменения в главный компонент, он применяет изменения к экземпляру. На панели слоев вы можете определить по иконке, какие элементы являются главными компонентами, а какие – экземплярами. Для главных компонентов используется иконка с 4 ромбами, а для экземпляров – иконка с одним ромбом.

Демонстрация, как обновляется цвет фона кнопки и то, как это обновление распространяется на связанные экземпляры

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

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

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

1) Используйте четкую систему наименований и фреймы для организации компонентов

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

Именование со слешем

Именование со слешем – это соглашение об именах компонентов, которое использует косую черту для создания организованной иерархии ваших компонентов. Например, если у вас есть первичная и вторичная кнопки с поддерживаемыми состояниями, вы можете использовать «/»:

  • button/primary/text — active
  • button/primary/text — default
  • button/primary/text — disabled
  • button/secondary/text — active
  • button/secondary/text — default
  • button/secondary/text — disabled

Пример, как использование слеша в имени хорошо организует компоненты на панели ресурсов

Для доступа к более широкой подкатегории «связанных компонентов» в меню экземпляра вы можете объединить две последние метки, т.е. текст кнопки (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 позволяет изменять размер списка и отображать больше или меньше строк, используя только один главный компонент. Помните, что для этого нужно правильно настроить ограничения. Если вы этого не сделаете, расширение или уменьшение границ компонента нарушит его.

Функция Clip content в действии

7) Добавьте описание к компоненту

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

Целью описания компонентов является предоставление необходимой информации, чтобы дать членам команды достаточно контекста для понимания работы компонента и его места в продукте. Не переусердствуйте и не документируйте каждый главный компонент. Наиболее распространенные причины для добавления описания к компоненту – обеспечить ясность вложенного компонента или предоставить сопутствующий контекст о состоянии / варианте конкретного компонента. Гораздо лучше создать систему самодокументирования, чем поддерживать сотни описаний компонентов.

Когда вы добавляете к компоненту описание, наведите на него курсор на панели ресурсов, и появится подсказка

8) Используйте переопределения экземпляров для адаптации компонентов к разным пользовательским контекстам

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

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

Вот все свойства, которые вы можете переопределить:

  • Текст: шрифт, вес, размер, высота строки, интервал между буквами, интервал абзаца, структурирование текста и текстовое содержимое.
  • Цвет: заливка, обводка, цвет фона, непрозрачность.
  • Эффекты: тени, внутренние тени, размытие.
  • Дополнительно: размер всего компонента, замена вложенных экземпляров, включение / выключение слоев.

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

Переопределение в действии

Обновления главного компонента не отменяют переопределения, установленные в первом примере

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

Сброс всех переопределений из первого примера

9) Быстрая замена связанных компонентов

Поскольку число ваших компонентов растет, поиск нужного компонента на панели ресурсов и в меню экземпляра может быть утомительным. К счастью для нас, у Figma есть решение. Быстрый способ поменять связанные компоненты – использовать контекстное меню. Просто щелкните правой кнопкой мыши по экземпляру, который вы хотите переключить, и перейдите к пункту Swap instance. Появится подменю со списком связанных компонентов.

Способ быстрого переключения экземпляров

10) Отсоедините экземпляр, чтобы удалить связь с главным компонентом

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

Вывод

Создание качественной системы компонентов не простая задача. Это требует времени, терпения и готовности искать способы работать лучше и эффективнее. Когда вы строите свою систему компонентов, просто помните, что нет единственно правильного способа сделать это. Возьмите 10 советов из этого руководства, попробуйте их и измените так, чтобы они лучше подходили к вашему рабочему процессу. Спасибо за прочтение!


Перевод статьи Jake Tsacudakis

Топ коментарі (1)

Згорнути/розгорнути
 
__a3a6623f profile image
лина кондратьева

а где примеры в 8 пункте?