1 AO5sC6UQFd2ngVVE2s45vQ 1160x620 - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм

Плагин предназначен для создания соединительных стрелок в юзерфлоу, картах сайтов и т.д. Просто выделите два объекта и кликните “Plugins” → “👉 Connection Arrows” → “Create Connection” и вуаля! Он создаст соединение при помощи стрелки 🚀

🥳 Бонус в конце статьи

Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Один GIF-файл вместо 1000 слов 😁

Мотивация

Мы в EPAM ежедневно создаем много диаграмм. Я понял, что большую часть своего времени я трачу на рисование стрелок для диаграмм. Для этого есть специальные инструменты, такие как realtimeboard, но лично мне нравится делать все в Sketch 😋

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

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

Скачайте плагин

Здесь вы можете найти самую последнюю версию плагина или установить его через Sketchpacks 😍  или github

Как он работает

Создайте соединение

Выберите несколько слоев в Sketch и нажмите “Plugins” → “Connection Arrows” → “Create Connection”.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Я называю это волшебством 🕴

Обновите все соединения внутри артборда

Выберите артборд, в котором хранятся все стрелки, и нажмите “Plugins” 👉 “Connection Arrows” → “Update Connection” → “From the Selected Artboard”.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Мой любимый плагин ❤️

Удалите связь между двумя слоями

Выберите слои, которые имеют соединение, и нажмите “Plugins” → “Connection Arrows” → “Delete Connection” → “Between Selected”.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Скоро добавлю панель внутри Sketch, так будет быстрее ⚡️

Дополнительные функции

В настройках вы можете найти больше функций, таких как направление стрелки, интервал и автоматическое выравнивание 😍 Если вам нужно что-то еще, пожалуйста, напишите мне на Spectrum 👇

Плагин Sketch Arrows на Sketchspectrum.chat

Направление стрелки

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Лично я использую только настройку направления «Вправо» 🤗

Интервал стрелки

Чтобы сэкономить время и не перемещать все слои один за другим, вы можете предварительно определить интервал в настройках. Когда вы создадите или обновите соединение между двумя объектами, он автоматически переместит второй слой на указанное количество пикселей ✌️

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Поддерживайте чистоту юзерфлоу 🧐

Автоматическое выравнивание

Если ваш второй объект смещен менее чем на 5px, когда эта функция включена, плагин автоматически выровняет второй объект в зависимости от направления. Так что вам не нужно тратить на это время. 🤘

Sketch плагин для создания юзерфлоу, карт сайта и диаграмм

Большое спасибо Andrew за эту идею 🏆

Укажите собственные горячие клавиши

Если вы хотите ускорить процесс, вы можете указать собственные горячие клавиши в настройках Mac OS. Аналогично вы можете указывать горячие клавиши для любых других действий в Sketch.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Settings → Keyboard → Shortcuts → App Shortcuts → Нажмите на “+”, чтобы добавить Sketch и укажите команду

Более детальное руководство 👇

Вы можете посмотреть на YouTube более детальную инструкцию 🕺

Бонус: Sketch Interactions Library

Я рад, что вы прочитали всю статью, и у меня есть кое-что еще для вас! 🥳

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Sketch плагин для создания юзерфлоу, карт сайта и диаграмм
Скачайте Sketch Interactions Library на Github и не забудьте подписаться на автора! В будущем будет еще больше обновлений 😍

Свободно пишите автору на Spectrum. И огромное спасибо EPAM.com за поддержку ❤️

Вы также можете писать автору по адресу mssg.me/farid или найти его в Instagram, или Dribbble по нику @faridsabitov

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

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

30 бесплатных плагинов Sketch, которые надо установить прямо сейчас

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

Sketch Measure. Готовим макет для верстальщика в Sketch 3

Плагин для нанесения расстояний между объектами вашего дизайна, Sketch 3.0.2+ поддерживаемые версии.

40 мощных бесплатных плагинов для Sketch

Sketch стал неотъемлемой частью дизайнера интерфейсов. Предлагаем вам подборку самых необходимых и полезных плагинов для графического редактора Sketch.