Figma интегрируется с Zeplin

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

Компонентами должны быть

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

Расположение эталонов компонентов

  • Первая секция всегда содержит эталоны компонентов.
  • Первый повторяющийся элемент в списке должен быть компонентом.
  • Страницы должны быть пронумерованы.
  • Эталоны стандартных элементов (кнопок, радиобоксов и т.д.) должны располагаться в отдельном фрейме.

Подпись слоев

  • Имена сущностей отделяются дефисом.
  • Пробел в названии назменяется нижним подчеркиванием.
  • Пример последовательности: тип_объекта-имя_объекта-роль_объекта-[...]-тип_устройства.

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

  • Элементы компонентов, которые должны менять свое расположение при адаптивности — должны быть компонентами.

Ключевые слова

  • inverse — означает инвертирование расположения или свойств элементов в компоненте.
  • name — означает уникальное имя объекта, данные которого встраиваются в компонет. Т.е. когда создается компонент, то вместо уникального имени ставиться «name», а когда будет создан экземпляр компонента и в него будет добавлена уникальная информация, то «name» заменяется на уникальное имя объекта и его свойств при необходимости.
  • desktop — версия компонента для ноутбука или настольного компьютера
  • tablet — версия компонента для планшета
  • phone — адаптивная версия компонента для телефона

Наследование

Если изменяется размер компонента для адпаптивной версии, то:

  • Модифицированный компонент оборачивается в еще один символ с постфиксом адаптива (desktop, tablet или phone).
  • Не допускается делать двойную вложенность, например Desktop → Tablet → Mobile. Правильно: Desktop → Tablet, Desktop → Mobile или Mobile → Desktop, Mobile → Tablet.

Экспорт изображений

  • Экспортируются только первые изображения в списке на первой странице по счету, на которой они встречаются.

Панель слоев

  • Предыщий элемент списка должен находится на панели слоев ниже чем следующий.

Комментарии