После включения библиотеки в меню 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, заменяя вариации которого, можно менять ширину компонента среди предзаданных.
Поиск компонентов
Замена связанных компонентов
Отображение скрытых слоёв
Шаблоны секций и страниц
Адаптивность