Figma: онбординг
Здесь можно найти общую информацию, которую нужно знать перед началом работы в Figma. 

Команды и проекты


Команда VK
Здесь храним публичные библиотеки компонентов в проекте VKUI Libraries. В эту команду можем приглашать дизайнеров из внешних команд, поэтому здесь не стоит хранить макеты, защищённые нашим NDA. 
Также к этой команде привязан наш комьюнити-профиль в Figma: figma.com/@vk

Команда VK Product Design
Здесь храним основные проекты по продуктовому дизайну. 

Создание своих команд
У нас есть возможность создавать новые команды в организации в Figma. Если нужна более высокоуровневая организация для гигантских проектов и отдельных продуктов, пишите своему руководителю.

Проекты
Проекты разбиваем по сервисам или продуктовым командам ВКонтакте: Music, Communities, VK Mini Apps, Profiles, Messages, Videos и так далее. Внутри проектов разбиваем по фичам.

Оформление проектов
Для названия макетов используем Title Case с пробелами, для однородности пишем названия на английском языке.
Макетам следует устанавливать обложки, чтобы внутри проектов было проще находить фичи. В качестве обложки может выступить любой Frame, для этого достаточно в контекстном меню выбрать пункт Set as Thumbnail. Обложку рекомендуется выставлять в соотношении 2:1, учитывая, что она может обрезаться по ширине. 

Аватарка
Чтобы вас было легко отличить, рекомендуется установить аватарку в профиле Figma 🙏

Организация макетов


Разделение по платформам
По платформам делим внутри макета: можно расположить на одной странице и iOS, и Android, но главное — отделять их визуально и не перемешивать в одной секции.

Master, In Progress, Archive
Готовые к реализации макеты помечаем в названии страницы как Master, задачи в процессе выполнения — как In Progress, а архивные варианты держим на странице Archive или в отдельном макете.

Секции и порядок
Сделай так, чтобы с макетом мог разобраться любой дизайнер и разработчик:
  • рекомендуется группировать экраны в секции, объединяя по смыслу и добавляя подписи;
  • на одной странице не следует держать слишком большое количество экранов. Лучше разделять их по страницам или выносить в отдельные макеты;
  • в готовых к разработке страницах не должны находиться альтернативные варианты экранов, а если это АБТ, то они должны быть подписаны и пронумерованы. 

Отображение связей между экранами
Чтобы визуально показать флоу по экранам, можно использовать плагин Autoflow, который автоматически рисует стрелочки при выборе двух фреймов. 

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

Группировка слоёв в макетах


Списки в Auto Layout
Ячейки на страницах рекомендуется группировать в секции с включённым Auto Layout. Это позволит быстро добавлять, удалять и перемещать элементы в списке без необходимости вручную их двигать
Секции на страницах следует объединять в общий Content Layout.

Быстрый способ создать Auto Layout: выделить две ячейки или больше и нажать ⇧A: создастся фрейм с включённым Auto Layout и настроенным отступом между ячейками.