Синхронизация Figma и Google Sheets. Как не тратить жизнь на ctrl+c ctrl+v

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

Синхронизация Figma и Google Sheets. Как не тратить жизнь на ctrl+c ctrl+v

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

Вводные

Имеем кучу продуктовых метрик которые нужно визуализировать для удобного отслеживания и презентации руководству. Данные выгружаются из базы данных в google таблицу по итогам недели и месяца.

Из всех доступных плагинов я решил остановиться на Google Sheets Sync так как у него хорошая документация и больше функционала. В перспективе инструмент выглядел многообещающим, чтобы начать его изучать углубленно. Позже с его помощью я смог решать и другие задачи — автоматизировать переводы, менять тему оформления и наполнять макеты рыбным контентом.

Общую информацию о плагине можно посмотреть на ютубчике: тыц, тыц, тыц

Планируем

  • Необходимо определить набор конечных данных. Отчет содержит большое количество параметров которые используются только для вычислений.
  • Сделать дизайн на основе этих данных.
  • Привязать параметры из таблицы.

Дизайн

Синхронизация Figma и Google Sheets. Как не тратить жизнь на ctrl+c ctrl+v

Обыкновенный Dashboard Like дизайн.
Для построения графика я использую Сhart — не самый удобный плагин. Капризный, приходится вести под него отдельный лист, формулы нужно переводить в значения… Но самый простой в плане получения нужного результата и повторяемости — а это для нас сейчас главное.

Подготавливаем таблицу

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

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

Синхронизация Figma и Google Sheets. Как не тратить жизнь на ctrl+c ctrl+v

Моя исходная таблица разбита на листы, и каждый блок в дизайне обращается к данным с них. Google Sheets Sync умеет брать параметры с конкретных листов, но я решил сделать отдельный лист прокладку «Sync» с набором всех данных. Это мне дает:

  • легко отлаживать работу, и следить за тем чтобы никакая формула не сломалась
  • упрощает нэйминг до #param1 #param2 #param3
  • позволяет создавать недостающие формулы. Например изменение в процентах по сравнению с предыдущим периодом =E12/D12-1
  • добавлять переменную цвета отображения положительной или отрицательной динамики =if(E7>0;"#16A34A";"#DC2626")
  • этот лист в будущем можно скрыть, и плагин будет спокойно подтягивать из него данные

Сами данные на этот лист я вставляю ссылкой =Old!M47

Оживляем макет

  • Устанавливаем плагин.
  • Запускаем его и указываем путь к нашей таблице. Доступ к таблице должен быть открыт по ссылке для всех.
  • Выбираем Fatch и видим нашу таблицу.
  • Выбираем слой и нажимаем на параметр.
  • Имя слоя изменилось на #ParamName = данные привязаны. Я прописывал имена вручную - так быстрее как по мне.
Синхронизация Figma и Google Sheets. Как не тратить жизнь на ctrl+c ctrl+v

Наступает понедельник...

Время магии

Интересное

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

Если углубится в работу с цветом, то можно в табличке сделать простенькую систему на подобии дизайн токенов) Помогает планировать структуру alias токенов.

Можно было добавить ещё иконку для индикации роста или падения (как дополнение цветовой индикации или взамен её), но я посчитал это лишним. Плагин может вставлять картинку если в ячейку вписать URL, а далее формулой аналогично выбору цвета только с урлами в качестве результата на выполнение условия.

Я долго мучился с синхронизации из разных листов таблицы — в документации этот момент не очень понятно описан.

Для того чтобы тянуть данные с конкретных листов, слои нужно сгруппировать и добавить к названию группы — // ListName (прим. Group // ListName). Это работает и с пэйджами — Page1 // ListName

С помощью данной функции я синхронизировал переводы макетов для тестирования на разной аудитории. В таблице листы с текстами под каждый макет, строка это фраза, столбец — язык перевода. Макет я оборачивал в группу и привязывал к листу, параметры я обзывал просто 1,2,3 ... Потом отдавали файл на перевод, а после в пару кликов генерировал переведенные макеты.

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

Спасибо за внимание, удачи.

8787
30 комментариев

В Google Sheets более, чем достаточно, инструментов для визуализации данных: графики, пайчарты, чего только нет. Сделать дизайн таблице тоже не проблема. Которые будут применяться автоматом

На кой х загонять это в фигму на постоянной основе?

Имхо, авто просто не умеет юзать google утилиты, но умеет фигму. Проще потратить день на изучение Гугл инструментов )

Поверьте, вот эти красивые «пилюльки» цифр важны только самому дизайнеру, но никак не тем, кто читает данные. Можно в Гугль Шите настроить всё так, что будет читаться удобно.

P.S. У меня самого фигма - основной инструмент. Но освоил и Гугль утилиты.

15
Ответить

Жду ссылку на красивую табличку сделаную вами, похожую на мой макет)

1
Ответить

Ps основной инструмент «автора» фигма и я изучаю возможности своего основного рабочего инструмента. В статье написано ещё как минимум о двух вещах где я его применил.

Ответить

Спасибо за статью, вышла своевременно. В работе в ближайшее время может пригодиться

2
Ответить

интересная статья, очень интересно, спасибо)

2
Ответить

Попробуйте для своей задачи Google Data Studio, это более целевой инструмент для визуализации данных.

2
Ответить

А что такого получилось сделать через фигму с костылями, чего нельзя было сделать в самих таблицах?

1
Ответить