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