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