Figma: создание компонентов

Введение


Документация описана ещё не до конца: например, здесь не хватает актуального описания по адаптивности

Заметки о Figma


  • Smart Selection/Distribute имеет ограничение в 100 элементов. Выделив больше 100 элементов, вы не сможете менять расстояния между ними (например, в сетке иконок).
  • Когда вы дублируете мастер компонента, создаётся его инстанс, а не новый мастер. Можно детачить (⇧⌥B) и сразу делать новый компонент (⌥⌘K).
  • Можно выбрать несколько слоёв и нажать Enter, выбирая папку внутри каждого слоя — удобно редактировать несколько папок с одинаковой структурой одновременно. Например, удалить лишние папки после импорта из Sketch.
  • Select All with Same Fill/Font/Properties — встроенный инструмент для быстрого поиска похожих слоёв. Можно выделить все слои одного цвета и задать им токен.
  • Создать компоненты из множества выделенных слоёв (например, иконок) можно в дропдауне в тулбаре Figma.
  • Чтобы работала смена светлой темы на тёмную, необходимо иметь одинаковые названия цветов отличающимися Light/Dark в начале).


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


Чеклист при тестировании компонента

  • Проставлены все токены Selection Colors нет ни одного HEX-цвета).
  • Предусмотрены тачзоны кликабельных кнопок и проставлены закругления (iOS: 10 pt, Android: 8 dp. На Android квадратные кнопки имеют круглый Ripple: для этого закругление должно быть в половину от высоты).
  • Компонент растягивается и адаптируется под другие размеры.
  • Нет лишней вложенности, не влияющей на расположение элементов.
  • Каждый текстовый элемент имеет текстовый стиль.
  • Порядок при именовании слоёв.

Примечание: тестировать нужно на экземплярах, а не на мастер-компонентах.

Перенос компонента Sketch → Figma

Символы, перенесённые при импорте из Sketch в компоненты Figma, можно использовать как основу для построения нового компонента. Большая часть элементов перенесётся нормально, даже сохранятся настройки растягивания элементов и Smooth Corners. Но все символы заменятся на фреймы, включая иконки, и каждый из таких компонентов нужно проверять.
Что нужно сделать:
  • Удалить лишние папки и фреймы, по возможности приводя к максимально плоской структуре компонента.
  • Удалить Bounds/Body/Background, перенеся их стиль во Frame (можно скопировать стиль полностью). Во Frame можно применять закругления, тени, обводки и любые другие свойства.
  • Отключить Clip Bounds у фреймов — он проставляется автоматически у созданных при импорте фреймов.
  • Заменить иконки, превращённые во фреймы, на иконки из библиотеки.
  • Проставить токены для каждого из элементов. Цвета, которые не были заменены на стиль, можно увидеть в панели свойств в Selection Colors — они будут выглядеть как HEX-значения.
  • Удалить лишнее в именовании (iOS Controls / ). Название страницы попадает в общий путь компонента, поэтому дублировать название компонента не нужно. 

Импорт иконки из Sketch → Figma

  • Удалить лишние папки, сделав плоскую структуру (выбрать фрейм → Enter → ⌘⇧G).
  • Убрать слой Bounds.
  • Сохранить название фигуры ↳ Icon Color (сохранение цвета при смене компонента когда-нибудь заработает и в Figma).
  • Присвоить токен цвета фигуре:
  • Outline → Accent.
  • Filled → Icon Secondary.
  • Если у иконки предполагается фиксированный цвет, нужно проставить цвет из VKUI Color Palette.