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

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

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

10 советов по компонентам Figma

Ця стаття українською:

Советы и лучшие практики для работы с компонентами Figma Рекомендация: Повторяйте действия за мной в Figma Используйте созданный мной файл Figma Community.

1. Сочетания клавиш для работы с  компонентами

Чем лучше вы освоите сочетания клавиш для компонентов, тем быстрее они войдут в привычку. Попробуйте следующие сочетания клавиш, чтобы ускорить рабочий процесс: Mac:

  • OPTION + CMD + K= Создать компонент
  • OPTION + CMD + B= Отсоединить экземпляр
  • OPTION + CMD+ O= Командная библиотека
  • OPTION + 2= Показать панель активов (option + 1 возвращает вас на панель слоев)

Windows:

  • ALT + CTRL + K= Создать компонент
  • ALT + CTRL + B= Отсоединить экземпляр
  • ALT + CTRL + O= Командная библиотека
  • ALT + 2= Показать панель активов (option + 1 возвращает вас на панель слоев)

2. Поменять местами компоненты

Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст. Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего.

  • Удерживайте OPTION / ALT, чтобы заменить компонент
  • Удерживайте OPTION / ALT + CMD / CTRL, чтобы заменить вложенный компонент

3. Именование компонентов

От того, как вы назовете свои компоненты, будет зависеть их организация. Если вы используете разделение косой чертой, Figma сгруппирует эти компоненты в меню экземпляра, что упростит их поиск. Figma использует следующий путь file / page / frame / ** name ** / для организации наших компонентов. Так, например, если у меня есть раскрывающийся компонент, я бы поместил его в отдельный фрейм Figma под названием «Inputs», а затем назвал бы компонент Dropdown / Active. Figma будет использовать это имя для создания папки «Inputs», а затем внутри папки «Dropdown». Вы также можете назвать свой компонент Inputs / Dropdown / Active, если основной компонент не находится внутри фрейма под названием «Inputs».

4. Создавайте компоненты забавной формы

Используя мощь логических операций для вычитания фигур и установки ограничений для этих фигур, мы можем создать аккуратно выглядящие компоненты (Спасибо Роджи Кингу). Для этого следуйте инструкциям Роджи на YouTube (начало с 32:50).

5. Используйте базовые компоненты

Используя базовые компоненты для наборов вариантов, мы можем внести одну корректировку в базовый компонент, и он внесет изменения во все варианты экземпляров. Для этого создайте базовый компонент со всеми элементами, необходимыми в различных вариантах для значений по умолчанию, иконки слева, иконки справа, наведения, активного состояния, ошибки и т. д. Это так же просто, как скрыть ненужные нам элементы в разных вариантах. Также полезно добавить модификатор перед именем компонента, который скроет его из библиотеки, когда вы будете готовы опубликовать компоненты. Для этого добавьте «.» или «_» перед названием компонента (например, «_Profile Card Base»).

6. Меню быстрой вставки

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

  • Нажмите SHIFT + I, чтобы активировать меню быстрой вставки.
  • Нажмите ESC, чтобы закрыть его.

7. Следуйте принципам атомарного дизайна

Атомарный дизайн Брэда Фроста – это методология создания дизайн-систем. Она помогает нам организовать компоненты для эффективного масштабирования нашей дизайн-системы и поддерживать порядок внутри вложенных компонентов. В атомарном дизайне есть пять различных уровней:

  1. Атомы

Атомы – это основные строительные блоки, такие как метка формы, поле ввода или кнопка.

  1. Молекулы

Молекулы – это группы атомов, связанных вместе, например, метка формы, ввод и кнопка, объединенные вместе в форму.

  1. Организмы

Организмы состоят из похожих и / или разных типов молекул. Например, организм «шапка сайта» может состоять из различных компонентов, таких как логотип, основная навигация, поиск и список каналов социальных сетей.

  1. Шаблоны

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

  1. Страницы

Страницы – это особые экземпляры шаблонов. Здесь контент-плейсхолдер заменяется реальным репрезентативным контентом, чтобы дать точное представление о том, что в конечном итоге увидит пользователь. Чтобы узнать больше, посмотрите это видео на YouTube и прочтите книгу Брэда Фроста «Атомарный дизайн»

8. Используйте компоненты слота

Слоты позволяют использовать плейсхолдер, который мы можем заменить нужным нам контентом. Например, создать модальный компонент может быть не просто, потому что не все модальные окна будут иметь внутри себя одинаковый контент. Чтобы решить эту проблему, мы можем использовать технику под названием «слоты» (спасибо, RogieBen Adelt, и Ridd). Просто вставьте компонент слота туда, где вам понадобится гибкий контент, и при необходимости поменяйте его.

9. Используйте несколько библиотек

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

  • мобильные компоненты
  • десктопные компоненты
  • активы бренда и цвета
  • и так далее…

Подробнее читайте в документации Figma

10. Экспериментируйте с компонентами

Загрузите файл сообщества, чтобы поэкспериментировать с ним. Компоненты очень универсальны и могут использоваться для создания самых разных вещей, например, анимации с использованием интерактивных компонентов или забавных паттернов. Используя плагин и компоненты Rotate Copies, можно создавать забавные и динамичные арты прямо внутри Figma!


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

Найновіші коментарі (0)