Проблема

Визуализация данных является важной частью работы многих дизайнеров интерфейсов. Панели мониторинга, таблицы, отчеты и виджеты — все эти компоненты интерфейса содержат диаграммы. Независимо от того, какой инструмент вы используете, Sketch, Figma или Adobe XD, у вас нет встроенных функций для визуализации данных.

Представьте, что вы хотите создать прототип для инструмента анализа или системы с десятками виджетов, таблиц или отчетов с использованием реальных данных из Excel. Я провел несколько недель, выполняя подобную задачу. И однажды наш специалист по обработке и анализу данных пришел ко мне и сказал, что все данные изменились! Я был вынужден внести изменения в 56 экранов моего прототипа …

Какие у меня были альтернативы? Я мог бы использовать Tableau, D3.js или HTML Canvas, но эти инструменты сложны и не очень гибки. Я решил, что мне нужно найти плагин Sketch, который мог бы решить мою проблему.

После часа поисков я нашел три интересных плагина: Sketch Data Studio, Sketch Pies и Sparkliner. У каждого из этих плагинов были плюсы и минусы, и они не удовлетворяли всем моим потребностям. Поэтому я решил создать свой собственный плагин Sketch для ежедневных задач визуализации.

О плагине Chart

Chart содержит четыре типа диаграмм: линейная диаграмма, гистограмма, зональная диаграмма и спарклайн (искрографик).

Плагин для Sketch Chart - 1

Каждый тип диаграммы поддерживает визуализацию реальных текстовых, табличных или случайных данных. Вы должны скопировать номера, разделенные запятыми, из любого текстового редактора, листа Google или Excel и создать диаграмму. Если вы выберете две или более строки, Chart нарисует несколько линий на артборде.

Настройки

Внутри Contents/Sketch вы найдете файл с общими параметрами, такими как тип кривой, цветовая палитра или вес линии.

Плагин для Sketch Chart - настройки
Chart/Contents/Sketch/parameters.js
Кривые основаны на кривых Безье. Генерация случайных данных выполняется с использованием нескольких простых функций и их комбинаций:
Плагин для Sketch Chart - функции
Сочетание логарифмических и линейных функций

Chart в действии

Давайте создадим медицинский виджет за 13 секунд:

Плагин для Sketch Chart - пример работы

Чтобы попробовать Chart, скачайте и установите Sketch-плагин с Github.

Chart — это бесплатный проект с открытым исходным кодом. Если вы найдете какие-либо ошибки или у вас есть предложения, не стесняйтесь пишите создателю или переделывайте репозиторий, чтобы добавить дополнительные функции.