Figma и Google Sheets Sync для UX-исследователей: превращаем табличку в презентацию за пару кликов
Как из результатов исследования собрать отчет, CJM, карточки персон, etc. без копипаста, регистрации и смс [инструкция]
По мотивам моего выступления на World Usability Day 2020 — Зачем исследователю или аналитику изучать Figma: ТОП-3 фишек программы. Очень рекомендую пройтись по всему плейлисту — за три дня конференции было много полезных выступлений «без воды».
Когда я только начинала заниматься UX-исследованиями, у меня была боль: результаты и находки удобно собирать в табличке, а передавать и презентовать итоги лучше в виде красиво оформленного документа— презентации, CJM, карточек персон и так далее. И приходилось тратить время и душевные силы на ручной перенос материалов из таблицы в презентацию или макет (Ctrl+C → Ctrl+V).
Но когда летом 2019-го Figma объявила о запуске плагинов, у меня появилась надежда на оптимизацию рутины. И почти сразу ожидания оправдались — вышел плагин Google Sheets Sync (https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync), творящий магию.
Итак, инструкция.
Шаг 1. Таблица в Google Sheets
У нас есть табличка в Google Sheets, например, такая — https://docs.google.com/spreadsheets/d/1EQxdHgSwo6Jm5UlsALFhKHiRa1Wth-RX4_OgaStLgIc/edit:
Каждая строка — это единица смысла. В нашем примере — это найденная юзабилити-проблема какого-то интерфейса.
Описание каждой проблемы структурировано (за это мы и любим таблицы) — характеристики разложены по столбцам. Например:
- title — формулировка,
- description — описание,
- criticality — оценка критичности,
- image — ссылка на иллюстрацию или скриншот.
Важно 1: названия можно указывать и кириллицей, но латиницей — надежнее. Регистр не важен, пробелы использовать можно, но лучше не надо.
Важно 2: ссылки на картинки должны вести именно на файл, то есть в конце ссылки должно быть расширение — «.png» или «.jpg», или «.gif». Например: https://cdn.dribbble.com/...eda62e.png.
Табличка пошарена на чтение для всего интернета — иначе Figma не доберется до файла и магия не случится.
- Как пошарить файлы (инструкция от Google) — https://support.google.com/drive/answer/2494822;
- Как должны выглядеть настройки:
Копируем ссылку на файлик (кнопка «Copy link» на картинке выше) и куда-нибудь сохраняем — она нам скоро понадобится.
Шаг 2. Шаблон в Figma
Готовим шаблон отчета или презентации. Один слайд / страница — одна строчка из таблицы. Например, так (пока выглядит страшненько):
Обратите внимание на названия слоев, на которые мы планируем заливать информацию из таблички: они начинаются с решетки (#), а дальше без пробела следует то же слово или словосочетание, которое мы написали в первой строчке Google Sheets.
Например, формулировка проблемы лежит в столбце с названием «title» — в Figma для нее подготовлен слой «#title»:
Важны именно названия слоев, а что написано в самом текстовом поле — неважно (см. «Здесь будет название проблемы»).
При этом статичные слои — те, содержание которых не будет меняться от слайда к слайду (у нас это «Критичность: »), могут называться как угодно.
Слой с картинкой — это прямоугольник, у которого указан тип заливки (Fill) как Image, плюс настроен режим расположения картинки в границах прямоугольника (Fill / Fit / Crop / Tail — в зависимости от особенностей скриншотов).
Рекомендую превратить шаблон в компонент, чтобы получить +100 к уровню магии: так мы сможем централизованно управлять расположением и свойствами слоев — передвинуть, если что-то где-то не поместилось, поменять шрифт или кегль, цвет, добавить обводку и так далее.
Копируем и вставляем компонент, и оборачиваем его во фрейм — это нужно для того, чтобы потом безболезненно экспортировать все слайды в одну PDF-ку (Figma включает в PDF только фреймы и игнорирует компоненты и их экземпляры, размещенные в корне).
После этого копируем и вставляем наш обернутый экземпляр компонента столько раз, сколько у нас строчек в табличке.
Полезность Figma: называем первый фрейм «1», нажимаем не глядя комбинацию «Ctrl+C → Ctrl+V» несколько раз, и Figma автоматически аккуратно расставляет фреймы в ряд, с одинаковыми отступами и именами «2», «3» и так далее. Мелочь, но приятно.
Шаг 3. Магия (плагин Google Sheets Sync)
Устанавливаем плагин Google Sheets Sync (если ещё не):
Нажимаем правую кнопку мыши, выбираем в контекстном меню «Plugins → Google Sheets Sync»:
В открывшемся окошке вставляем припасенную ссылку на расшаренную таблицу Google Sheets:
Нажимаем кнопку «Fetch & Sync».
Ждем…
…
Вуаля! Заголовки, описания, критичность и картинки разложились по фреймам:
И на десерт — экспортируем слайды в PDF (File → Export frames to PDF) и отправляем файл заказчику:
Что еще важно:
- Плагин умеет работать с несколькими листами в файле таблицы;
- Если что-то изменилось в табличке — удалять и собирать заново в Figma ничего не нужно, достаточно перезапустить синхронизацию с тем же файлом Google Sheets.
Это самый простой вариант, «в лоб». При некоторой изобретательности можно решать более сложные задачки:
- Как быть, если изображения разных размеров и/или ориентации (например, скриншоты мобилки и десктопа);
- Как сделать так, чтобы строчка с критичностью проблемы окрашивалась в разные цвета в зависимости от значения (высокая критичность — красная, средняя — оранжевая, низкая — синяя или зеленая);
- Как синхронизировать разные типы данных в одном файле (например, и проблемы, и профили респондентов).
Больше информации, история обновлений плагина:
- Страница плагина в Figma Community — https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync
- Playground (файл в Figma с описанием и примером работы плагина) — https://www.figma.com/proto/VtXf9HikcehWB7FJrJmApl/
Если будут вопросы, пожелания — пишите!
