{"id":13502,"url":"\/distributions\/13502\/click?bit=1&hash=a81ed6f897d123d854b91b907b479be2ea058a6a8ec03bd6f76bfc8a24665263","title":"\u0425\u043e\u0447\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043c\u0443\u043b\u044c\u0442\u0444\u0438\u043b\u044c\u043c. \u0413\u0434\u0435 \u0443\u0447\u0438\u0442\u044c\u0441\u044f?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"7eb01878-f5ab-5bdb-ae26-b8e9a900dfa1","isPaidAndBannersEnabled":false}
Дизайн
Bitepix

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

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

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

Вводные

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

Из всех доступных плагинов я решил остановиться на 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 ... Потом отдавали файл на перевод, а после в пару кликов генерировал переведенные макеты.

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

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

0
23 комментария
Написать комментарий...
Илья Варавин

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

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

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

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

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

Ответить
Развернуть ветку
Bitepix
Автор

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

Ответить
Развернуть ветку
Игорь Маркелов

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

Ответить
Развернуть ветку
Bitepix
Автор

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

Ответить
Развернуть ветку
Phung

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

Ответить
Развернуть ветку
Tar Mendo

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

Ответить
Развернуть ветку
Dmitriy Podluzny

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

Ответить
Развернуть ветку
Mikhail Nikolsky

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

Ответить
Развернуть ветку
Sergei Zotov

реально красивый график/дашборд с понятным дизайнерам фрэймворком?

Ответить
Развернуть ветку
Sergei Zotov

но вообще, конечно, если этот дашборд сдается "картинкой" продактам по понедельникам, то я тоже не совсем понимаю зачем это надо :)

продакты должны чекать эти метрики и в течение недели. И делать это не после магических манипуляций дизайнеров, а по F5

PS но если не брать во внимание кейс, найти пользу в этом точно можно

Ответить
Развернуть ветку
Mikhail Nikolsky

Вот и я удивился, что за чувствительный к вузуалу отчетов продакт там такой)

Ответить
Развернуть ветку
Bitepix
Автор

Переводы макетов и маркетинговых всяких материалов например. Вставка рыбного контента - проект связан с инвестициями и в том же приложении постоянно есть список акций с кучей данных (логотип, тикер, биржа, цена, рост, рост в процентах … и может накидываться ещё куча всего - премаркет, нотификации и т/п) чтобы не засирать компоненты просто вариантами строки списка - контент вынесен в таблицу.

Ответить
Развернуть ветку
Mikhail Nikolsky

Ну как этот экспорт может пригодиться в работе над макетом я понимаю. Если есть куча таблиц и данных, которые нужно менять из одного места, и при этом очень важно видеть как ведет себя макет на релальном контенте - ок. Но использовать это для визуализации данных в отчете для самого себя? Я так понял ,что это просто какая-то регулярная визуализация данных продуктовых метрик. Меня аж ступорнуло: столько труда ради картинки, которую и в самом экселе можно посмотреть ничего не двигая руками.

Ответить
Развернуть ветку
Bitepix
Автор

там в самом начале написано что для руководства

Ответить
Развернуть ветку
Арсений Петрович

Ну реально костыли же? Самое простое настроить понятные графики в гугл таблицах.
Посложнее, но верный путь - сайт с визуализацией данных и подтягиванием инфо из таблиц или откуда угодно. Плюсы - можно использовать крутую визуализацию , например, d3.js. И полная автоматизация. Минусы - нужно уметь кодить.

А, ещё в вебе будут интерактивные графики, это очень удобно

Ответить
Развернуть ветку
Никита Кондрашов

Безусловно можно держать яйца в одной корзине и сделать все встроенными инструментами Google.

Но если у автора есть желание сделать в удобном для себя инструменте – почему нет?
Красиво? Да.
Наглядно? Вполне.
Работает? Да.
Ну и все как бы.

Решение нетривиальное, но интересное. Спасибо за описание, все очень прикольно. Можно поковыряться в бизнес-логике и механике расчёта каких-то вещей, но к визуальной части не имеет никакого отношения.

Ответить
Развернуть ветку
Alekssandr Bussell

Спасибо вам за статью.
А это все можно превращать из фигмы на лету в url страницу?

Ответить
Развернуть ветку
Bitepix
Автор

Я не видел успешных реализаций figm-to-html
Если нужна вэб-версия отчета то изначально её и нужно разрабатывать)

(возможно неправильно понял что требуется)

Ответить
Развернуть ветку
Александр Селиванов

siter.io умеет) у него есть плагин для фигмы

Ответить
Развернуть ветку
Rnatery
Ответить
Развернуть ветку
Marat Nazargulov

Подскажите что за менюшка у вас с закрепленными плагинами в фигме.

Ответить
Развернуть ветку
Bitepix
Автор

https://moonvy.com/figmaEX/
работает только в браузере

Ответить
Развернуть ветку
Арсений Петрович

Я не понимаю, почему в статистике проценты от воронки продаж считают заново от предыдущего пункта. По-моему намного удобнее видеть сквозной процент - типа конверсия от зарегившихся финальная 77/5177 = примерно 1.5 процента

Ответить
Развернуть ветку
Читать все 23 комментария
null