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

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

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

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

Google Sheets Sync / Документация

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

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

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

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

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

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

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

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

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

Время магии

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

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

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

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

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

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

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

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

#дизайн #figma #google_sheets