✨ Саммари кейса
Краткое содержание статьи: автор рассказывает, как спроектировал плагин для Figma, который автоматически строит графики по данным из Excel и сразу применяет гайдлайны дизайн‑системы RITM, убирая рутину и визуальные расхождения.
Контекст и проблема
Контекст и проблема
- Раньше создание графиков занимало много времени: дизайнеры вручную расставляли элементы, выравнивали, подбирали цвета и шрифты, из‑за чего стили «слетали», а макеты выглядели разнородно.
- Каждая команда рисовала по‑своему (разные углы столбцов, толщины линий, палитры), поэтому продукты выглядели так, будто над ними работали разные команды.
- Сделать так, чтобы загрузка данных из Excel сразу превращалась в готовый график без лишней ручной работы.
- Автоматически применять правила RITM (цвета, шрифты, отступы), чтобы визуализации были единообразными.
- Сделать интерфейс плагина «родным» для Figma, чтобы дизайнеры сразу понимали, что нажимать, и не отвлекались.
- Сократить время на рутину: вместо часов рисования столбиков — несколько минут настройки.
- Автор проанализировал рынок: протестировал около 15 похожих плагинов, выписал боли пользователей и удачные решения, чтобы не изобретать велосипед.
- Сформулировал ключевые гипотезы:
- Интерфейс не должен отвлекать — использовать родной UI Figma, чтобы плагин воспринимался как часть редактора.
- Нужна «рыба» для графиков — на ранних этапах важнее форма и структура, чем точные цифры, поэтому полезна генерация заглушек.
- Интерфейс собрали на стандартных компонентах из Figma UI2, чтобы плагин выглядел нативно и быстрее верстался; цвета и сетки взяли из RITM.
- Написали подробную спецификацию, разделив её на UI‑часть и UX‑часть, с описанием сценариев и корнер‑кейсов, чтобы у разработки почти не осталось вопросов.
- Настройки перед генерацией: выбор типа графика, настройка осей, легенды и других параметров.
- Контролы: поля ввода, выпадающие списки, кнопки, табы, слайдеры, чекбоксы — всё в привычном для Figma стиле.
- Типы графиков: линейные, столбчатые, с областями, стековые; для каждого прописаны состояния (наведение, выбор, неактивное).
- Генератор: можно быстро «покрутить» цветовую схему и создать график даже без Excel, просто поиграв с настройками.
- Время на один график сократилось с ~20 минут до нескольких секунд: выбрал тип, загрузил данные — получил готовую визуализацию.
- Исчезла необходимость вручную проверять шрифты, цвета и отступы — плагин сам применяет стили RITM, поэтому расхождения больше не возникают.
- Интерфейс оказался интуитивным: дизайнеры разобрались без инструкций, ничего лишнего, всё на своих местах.
- При обновлении дизайн‑системы или добавлении нового типа графика изменения внедрялись за вечер, без переделки готовых макетов.
- Ключевые инсайты автора: анализ конкурентов экономит много работы; инструмент должен быть частью привычной среды дизайнера; автоматизация рутины сильнее всего двигает дизайн вперёд.
Разработка плагина для генерации графиков
Что: дизайн-система
Где: Wildberries
Роль: продуктовый дизайнер
Цель и задача
Мы делали плагин для Figma, который строит графики вместо дизайнера. Загрузил Excel — получил визуализацию по правилам RITM. Без ручного копирования данных и подбора цветов.
Что планировали:
Что планировали:
- Загрузка данных → готовый график. Без лишних действий.
- Автоматическое применение гайдлайнов RITM: цвета, шрифты, отступы подставляются сами.
- Интерфейс не выбивается из Figma. Открыл — сразу понял, что нажимать.
- Убрать рутину. Час рисования столбиков превращается в пять минут настройки.
В чём проблема?
Раньше с графиками была головная боль. Дизайнеры тащили элементы по канвасу часами. Цвета постоянно слетали — не тот оттенок, другой шрифт, линия толще. И каждый рисовал как хотел: у одного столбцы с закругленными углами, у другого острые, третий вообще свою систему изобретал. Макеты выглядели так, будто над ними работали пять разных команд.
Что было сделано?
Я разобрался в рынке и спроектировал рабочий плагин.
Протестировал 15 похожих плагинов. Выписал, где люди спотыкаются, а что работает без проблем. Взял удачные решения, обошел чужие грабли.
Вывел несколько гипотез:
Протестировал 15 похожих плагинов. Выписал, где люди спотыкаются, а что работает без проблем. Взял удачные решения, обошел чужие грабли.
Вывел несколько гипотез:
Гипотеза №1: интерфейс не должен отвлекать
Если использовать родной интерфейс Фигмы для построения плагина, дизайнеры будут воспринимать его как часть редактора, а не стороннее приложение. Это снизит когнитивную нагрузку и ускорит адаптацию.
Если использовать родной интерфейс Фигмы для построения плагина, дизайнеры будут воспринимать его как часть редактора, а не стороннее приложение. Это снизит когнитивную нагрузку и ускорит адаптацию.
Гипотеза №2: Генерация рыбы для графиков
Дизайнерам не всегда нужны точные данные для графиков на ранних этапах. Когда создаешь концепт, набросок или прототип, важна визуальная форма и общая структура графика, а не математическая точность цифр. Нужна рыба, заглушка для графика.
Дизайнерам не всегда нужны точные данные для графиков на ранних этапах. Когда создаешь концепт, набросок или прототип, важна визуальная форма и общая структура графика, а не математическая точность цифр. Нужна рыба, заглушка для графика.
Как я делал интерфейс
Собрал все на стандартных компонентах из UI2: Figma's Design System (да, позже фигма выпустила UI3).
Плагин выглядит как родная фича Фигмы, а не как что-то прилепленное сбоку. Плюс верстать оказалось в разы быстрее.
Цвета и сетки для графиков взял из RITM — нашей дизайн-системы. Все выглядит единообразно.
Собрал все на стандартных компонентах из UI2: Figma's Design System (да, позже фигма выпустила UI3).
Плагин выглядит как родная фича Фигмы, а не как что-то прилепленное сбоку. Плюс верстать оказалось в разы быстрее.
Цвета и сетки для графиков взял из RITM — нашей дизайн-системы. Все выглядит единообразно.
Написал спецификацию
Подробно описал каждый сценарий, корнер-кейсы. У разработки почти не было вопросов. Специально разделил на два раздела: спека для UI и спека для UX.
Подробно описал каждый сценарий, корнер-кейсы. У разработки почти не было вопросов. Специально разделил на два раздела: спека для UI и спека для UX.
Что умеет плагин:
- Загрузка файлов: закидываешь Excel, плагин его парсит. Показывает процесс загрузки, ругается на ошибки, подтверждает успех.
- Настройки: перед генерацией можно покрутить параметры — выбрать тип графика, настроить оси, легенду.
- Контролы: поля ввода, выпадающие списки, кнопки, табы, слайдеры, чекбоксы.
- Графики: линейные, столбчатые, с областями, стековые. Для каждого прописал, как он ведет себя при наведении, выборе, в неактивном состоянии.
- Генерация: есть кнопка генератора графиков. Дизайнеру достаточно с ней побаловаться и покрутить цветовую схему. Можно и без всяких Excel.
Результаты
Что изменилось на практике:
- График, на который раньше уходило минут двадцать с выравниванием и стилями, теперь готов за пару секунд. Выбираешь тип, загружаешь данные — готово.
- Не надо проверять шрифты и отступы. Плагин сам применяет стили из RITM, всё выглядит одинаково. Раньше кто-то мог поставить не тот цвет — сейчас такого не бывает.
- Интерфейс простой. Дизайнеры разобрались без инструкций — всё на местах, ничего лишнего.
- Когда в дизайн-систему добавили новые стили или понадобился ещё один тип графика, обновили за вечер. Готовые макеты переделывать не пришлось.
Что это значило для меня
Этот проект научил меня куче важных вещей про продуктовый дизайн и работу с техническими ограничениями.
👌 Главное, что я понял — анализ конкурентов экономит кучу времени. Я не стал городить с нуля, а взял рабочие решения из существующих продуктов и подогнал под себя. Команда сэкономила недели работы.
После проекта с Figma UI Kit я понял: инструмент должен быть частью привычной среды дизайнера. Когда плагин не ломает рабочий процесс, им пользуются охотнее.
Этот опыт окончательно убедил меня — автоматизация рутины двигает дизайн сильнее всего остального.
Этот опыт окончательно убедил меня — автоматизация рутины двигает дизайн сильнее всего остального.