Плагин Sketch Transform для создания гистограмм, столбчатых диаграмм, линейных графиков
Наш канал в

Плагин для Sketch, который предоставляет полезные инструменты для создания макетов диаграмм (гистограмма, столбчатая диаграмма, линейный график, и т. д.)

Скачать плагин

Пример использования Sketch Transform

Вот как я использую этот плагин для ускорения процесса работы при создании макетов диаграмм в Sketch.

Гистограммы

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

  1. Рисую прямоугольник размером с будущую диаграмму
  2. В меню плагинов выбираю Plugins→Transform→Split into grid
  3. Выставляю нужное количество колонок (или горизонтальных полос). Например, для гистограммы, советую оставить расстояние между колонками (gutter) на значении 0
  4. Выбираю все, кроме первого прямоугольника (так он останется в оригинальном размере)
  5. Выбираю Plugins→Transform→Resize each
  6. Для колонок диаграммы выставляю отрицательную высоту (ширину, для гистограммы)
  7. Включаю “Cumulative” (каждая колонка становится меньше) и “Randomize”, чтобы разнообразить данные
  8. Выбираю все столбцы и выравниваю по необходимому значению

Л

Скачать плагин

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5