Figmа для заказчика

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

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

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

Все иллюстрации здесь сопровождаются скриншотами рабочих проектов, потому что у представителя заказчика вряд ли возникнет необходимость рисовать проект с нуля.

Ирина Кузнецова

О чем будем говорить:

1. Почему мы работаем именно в Figma
2. Как создать аккаунт в Figma
3. Терминология Figma
4. Рабочие области Figma
5. Комментирование макетов
6. Действия с файлом

Почему мы работаем именно в Figma

Времена, когда дизайны интерфейсов создавались в Photoshop, канули в лету (помянем). На смену ему пришли другие приложения, например Sketch, Adobe XD и, собственно, Figma. Кому-то роднее Adobe, принципиальные маководы предпочитают Sketch, но Figma сегодня — отраслевой стандарт, и это свершившийся факт. Заказчику зачастую проще освоить минимальный функционал Figma, чем изучать макеты в PDF.

Как создать аккаунт в Figma

Максимум, что сможет незарегистрированный пользователь — просматривать макеты, на которые он перешел по ссылке. Для полноценной работы с использованием всех плюшек Figma (комментирование, выгрузка макетов и прочее) нужно зарегистрироваться. Благо Figma не ввела блокировок на работу из России и на бесплатные аккаунты в домене .ru.

Последовательность действий при регистрации тут достаточно стандартная:

1. Перейти по адресу figma.com и нажать любую из кнопок «Get started».

2. Ввести Email и пароль и нажать кнопку «Create account», либо воспользоваться для авторизации существующим аккаунтом Google.

Напомним, что существуют две версии Figma:

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

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

Терминология Figma

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

Фрейм — основной элемент дизайна в Figma.

Экран — множество фреймов, объединенных в один, могут составлять экран. Как правило, дизайнеры при разговоре с заказчиком оперируют именно экранами: «Экран успеха», «Экран входа в систему» и т.д.

Слева — фрейм. Справа — экран iPhone 14, состоящий из трех фреймов

Страница — раздел проекта, группирующий макеты экранов по определенному признаку или процессу: «Регистрация», «Личный кабинет», «Документы» и т.д.

Проект — набор макетов, как правило, разбитых на страницы, посвященных определенному процессу или тематике. Например: «Система дистанционного мониторинга артериального давления», «Платформа кибербезопасности Pangeo radar», «Маркетплейс строительных материалов» и т.д.

Рабочее пространство — объединяет все проекты, которые пользователь может редактировать. Просматривать макеты в чужих рабочих пространствах по ссылке-приглашению может каждый, но если пользователь скопирует проект в свое рабочее пространство пользователя, то сможет его редактировать.

Рабочие области Figma

Обычно тут пускаются в пространные объяснения, для чего в интерфейсе Figma предусмотрен тот или иной раздел и где на панели инструментов кнопка, рисующая квадратик. Но заказчик чаще всего попадает в Figma по ссылке на проект, выданной кем-то из участников команды, и не для того, чтобы рисовать там квадратик (он за это специально обученным людям деньги платит).

Все, что нужно знать заказчику в этот момент про интерфейс фигма, — что она состоит из двух рабочих областей:

1. Графический редактор
2. Менеджер проектов

Функционал каждого из них разберем подробнее, но только в рамках потребностей заказчика.

Графический редактор

Именно сюда попадает заказчик по ссылке-приглашению. Именно здесь идет работа и стоит дым коромыслом. Рабочая область графического редактора поделена на несколько разделов, но не все из них нужны заказчику.

1. Та самая панель инструментов, основное предназначение которой, — дать дизайнеру возможность нарисовать квадратик, кружочек и прочее. Заказчик же с ее помощью может сохранять файл, перемещаться по рабочей области, экспортировать в PDF и комментировать (эти функции мы рассмотрим позже).
2. Расположение файла и имя позволяют среди прочего переименовывать файл и делать копию. В нашем примере файл относится к проекту Neurobureau, и называется Нейробюро. Внешний файл.
3. Рабочая область проекта. Здесь происходит основная часть работы: создаются холсты, на которые размещают изображения, экраны, рисуются таблицы и схемы и т. д. Перемещаться по ней можно несколькими способами:

• Пользуясь тачпадом ноутбука
• С помощью инструмента “Hand tool”, таская рабочую область зажатой левой клавишей мыши

Зум в этой области работает при помощи стандартных горячих клавиш браузера: Ctrl+ (Win), ⌘+ (Mac) для приближения и Ctrl- (Win), ⌘- (Mac) для отдаления. 4. Страницы и слои. В этой области перечислены все единицы макетов, с которыми работает дизайнер и по которым может понадобиться навигировать заказчику. На страницах, как правило, группируются макеты, относящиеся к тому или иному смысловому блоку проекта (в нашем примере это 01-Главная, 02-Создание исследования и т.д.).. Галочкой отмечена страница, на которой в данный момент находится пользователь.

Ниже, под разделительной линией, расположен список экранов и слоев — вотчина исключительно дизайнера. 5. Правая панель позволяет настраивать активный элемент. Это также зона ответственности дизайнера, останавливаться подробно не будем.

6. Правая часть верхней панели, несомненно, представляет интерес для заказчика.

• Кнопка наушников позволяет присоединиться к внутреннему созвону (да-да, можно созваниваться с коллегами непосредственно здесь, без плясок с бубнами со сторонними сервисами). В этом случае появляется панель управления звонком, где можно увидеть собеседников, выключить микрофон и, собственно, покинуть встречу.

Если нижнюю плашку не видно, нужно нажать на наушники еще раз — фигма любит ее скрывать. От багов никто не застрахован, в конце концов.

• Круглая аватарка отображает, кто присутствует в файле в данный момент, и позволяет установить режим слежения за пользователем. Чтобы максимально насладиться возможностями этой функции нужно один раз кликнуть на аватарку пользователя, которому собираетесь «сесть на хвост», налить себе чашечку кофе расслабиться и наблюдать за перемещениями дизайнера на экране, внимая его объяснениям. Аватарка человека, за которым следят, будет обведена.
• Кнопка “Share” позволяет скопировать ссылку на проект (функция “Copy link”) или прислать кому-либо приглашение по Email.

Как правило, при ознакомлении с макетами, особенно при слежке за перемещениями дизайнера, все эти панели управления только мешают, поэтому горячие клавиши Ctrl (Win) и ⌘ (Mac) дают возможность скрывать и показывать их.

Окно Figma с включенными панелями управления и без них

Менеджер проектов

Позволяет навигировать по доступным проектам, удалять их, перемещать и переименовывать. Сюда пользователь попадает после авторизации на сайте figma.com. По умолчанию отображаются последние просмотренные проекты, в которые можно перейти по клику.

Из рабочего пространства в менеджер файлов можно попасть с помощью кнопки “Back to files” контекстного меню Figma, расположенной на панели инструментов.

Чтобы получить ссылку, удалить, переименовать или переместить проект можно воспользоваться контекстным меню по клику правой кнопкой мыши.

Комментирование макетов

На панели инструментов рабочей области есть кнопка “Add comment”, которая значительно упрощает коммуникацию между участниками проекта. Если появилось неукротимое желание прокомментировать происходящее на экране, можно воспользоваться этой кнопкой или нажать на клавиатуре “С”. Курсор мыши превратится в иконку комментария, который можно поставить в любом месте макета или рабочей области.

При этом на месте правой панели открывается цепочка комментариев, по которым можно навигировать и отвечать. Так же комментарий можно скрыть в случае решения, нажав кнопку “Resolve”. Кнопка “Sort / Filter” панели комментариев дает возможность упорядочить их по дате, показать непрочитанные и ранее решенные (на случай, если дизайнер вдруг проигнорировал замечание заказчика и просто «убил» комментарий, ай-яй-яй).

Действия с файлом

Набор действий, которые заказчику может понадобиться выполнить с файлом, невелик:

1. Сохранение локальной копии
2. Экспорт в PDF
3. Дублирование проекта в свое рабочее пространство
4. Переименование проекта

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

Сохранение локальной копии

Выполняется с помощью контекстного меню Figma панели инструментов. При наведении на пункт меню “File” появляется набор команд. С помощью кнопки “Save local copy” можно сохранить на свой компьютер файл формата *.fig, которые впоследствии можно было импортировать на другой компьютер.

Экспорт в PDF

Выполняется с помощью того же контекстного меню, но другой кнопкой: “Export frames to PDF”. Figma сконвертирует все фреймы на активной странице в многостраничный PDF файл.

Дублирование проекта

В большинстве случаев команда дизайнеров работает в своем рабочем пространстве, а заказчик может только просматривать макеты своего проекта. Когда работа сделана, необходимо продублировать проект в рабочее пространство заказчика. Для этого в контекстном меню имени файла нужно выбрать команду “Duplicate to your drafts”. Figma откроет новую вкладку в рабочем пространстве заказчика, где у него будут полные права на действия с проектом.

Продублировать файл, который находится в собственном рабочем пространстве пользователя, можно как из рабочей области, так и с помощью менеджера файлов. В обоих случаях надо использовать команду “Duplicate”.

Дублирование проекта из графического редактора

Дублирование с помощью менеджера проектов

Переименование файла

Не имея доступа к редактированию файлов, пользователь не может их переименовывать. Но в своем рабочем пространстве хозяин — барин, может удалять и переименовывать. Удалять мы бы не рекомендовали, а вот переименовывать можно двумя способами: с помощью команды “Rename” контекстного меню или кликнув два раза на его имя в рабочей области.

Переименование файла из рабочей области

Переименование с помощью менеджера файлов

Поиск «потерянного» проекта

Бывает, проект вдруг потерялся и пользователь не видит его в списке последних открытых. Для удобства навигации (да и для всяких непредвиденных случаев) всегда можно использовать поиск в менеджере проектов. Механика работы поиска максимально простая — при наборе символов Figma подсказывает варианты, из которых можно выбрать.

При наборе символов Figma подсказывает варианты

Хотя Figma первую очередь дизайнерский инструмент, нет смысла держать заказчика на расстоянии от дизайн-макетов. Наоборот, стоит привлекать его к совместной работе руками, это всегда приводит к классному результату. Ключевая для заказчика функциональность Figma, которую можно освоить с помощью этой статьи, — первый шаг к такой совместной работе.