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

Поиск компонентов

После включения библиотеки в меню Libraries (⌘⇧O) компоненты можно будет вставить из вкладки Assets (⌥2, а возвращение к Layers — ⌥1). 
Если при перетягивании зажимать Alt, то, отпустив курсор на другом компоненте, вы замените его на новый. Вместе с Alt можно зажать Cmd, чтобы заменить вложенный компонент (например, иконка внутри Cell).  
Используя такое меню, можно быстро заменить несколько иконок в списке с помощью перетаскивания с модификаторами ⌥ и ⌘.


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

Компоненты, название которых начинается с x / или с x / Base, не рекомендуется использовать в отрыве от основного компонента. Если, например, требуется шапка без статус-бара, можно вставить полный статус-бар (Set 01: Default) и скрыть у него компонент статус-бара внутри.

Замена связанных компонентов

Связанные компоненты — компоненты из одной папки. Это могут быть вариации одного компонента или вариации частей. Пример связанных состояний компонентов: 
Search / State 1: Default
Search / State 2: Focused and Empty 
Пример части компонента:
x / Cell / Left / Regular / 1. Avatar
x / Cell / Left / Regular / 2. Image

Быстрее всего менять компоненты и вложенные компоненты (оверрайды) можно в контекстном меню из списка слоёв в подменю Swap Components, либо в панели свойств сверху.

Для навигации по дереву слоёв используем шорткаты:
  • Tab и ⇧ Tab — для навигации между слоями в одной папке.
  • Enter и ⇧ Enter — для перехода к дочернему или родительскому элементу Sketch было Enter и Esc).

Отображение скрытых слоёв

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

Слои, переключение видимости которых предполагается самим компонентом, у нас обычно имеют в начале названия Show/Hide (когда нужно скрыть родительский фрейм, а не дочерний слой). Либо это сразу слои ↳ Title, ↳ Text, ↳ Caption, ↳ Icon и другие. 


Шаблоны секций и страниц

Некоторые из типов контента уже собраны в секции с заголовком и примером контента внутри. Такие шаблоны собраны в компоненты и имеют в названии Template

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

Для упрощения процесса у нас также собраны готовые страницы в виде шаблонов с настроенным Auto Layout между шапкой и контентом вместе с таббаром. Шаблоны страниц можно найти по названию Page Template.


Адаптивность

Большинство компонентов по умолчанию предусматривают растягивание, но есть несколько, чья сложная структура такое сделать не позволяет: Cell, Rich Cell и Snackbar. 

Для этого в них предусмотрен компонент ↔︎ Resize, заменяя вариации которого, можно менять ширину компонента среди предзаданных.