Плагин предназначен для создания соединительных стрелок в юзерфлоу, картах сайтов и т.д. Просто выделите два объекта и кликните “Plugins” → “? Connection Arrows” → “Create Connection” и вуаля! Он создаст соединение при помощи стрелки ? ? Бонус в конце статьи [caption id="" align="alignnone" width="1024"] Один GIF-файл вместо 1000 слов ?[/caption]
Мотивация
Мы в EPAM ежедневно создаем много диаграмм. Я понял, что большую часть своего времени я трачу на рисование стрелок для диаграмм. Для этого есть специальные инструменты, такие как realtimeboard, но лично мне нравится делать все в Sketch ? Я много искал и не смог найти плагин, который может создать простую стрелку между двумя выбранными слоями. Поэтому я начал разрабатывать собственный плагин для этих целей. Крутая особенность этого плагина в том, что он создает стрелки векторной формы и добавляет все стрелки в конец списка слоев в виде заблокированной группы. Поэтому стрелки не будут мешать вам взаимодействовать с другими слоями, и вы можете нарисовать соединение с любым типом слоя ?
Скачайте плагин
Здесь вы можете найти самую последнюю версию плагина или установить его через Sketchpacks ? или github
Как он работает
Создайте соединение
Выберите несколько слоев в Sketch и нажмите “Plugins” → “Connection Arrows” → “Create Connection”. [caption id="" align="alignnone" width="1024"] Я называю это волшебством ?[/caption]
Обновите все соединения внутри артборда
Выберите артборд, в котором хранятся все стрелки, и нажмите “Plugins” ? “Connection Arrows” → “Update Connection” → “From the Selected Artboard”. [caption id="" align="alignnone" width="1022"] Мой любимый плагин ❤️[/caption]
Удалите связь между двумя слоями
Выберите слои, которые имеют соединение, и нажмите “Plugins” → “Connection Arrows” → “Delete Connection” → “Between Selected”. [caption id="" align="alignnone" width="1022"] Скоро добавлю панель внутри Sketch, так будет быстрее ⚡️[/caption]
Дополнительные функции
В настройках вы можете найти больше функций, таких как направление стрелки, интервал и автоматическое выравнивание ? Если вам нужно что-то еще, пожалуйста, напишите мне на Spectrum ? Плагин Sketch Arrows на Sketchspectrum.chat
Направление стрелки
По умолчанию у вас будет режим «Авто», который будет рисовать стрелки в зависимости от положения второго слоя, но, если вы создаете юзерфлоу или карту сайта, где все стрелки направлены в одном направлении, вы можете указать это в настройках. [caption id="" align="alignnone" width="1022"] Лично я использую только настройку направления «Вправо» ?[/caption]
Интервал стрелки
Чтобы сэкономить время и не перемещать все слои один за другим, вы можете предварительно определить интервал в настройках. Когда вы создадите или обновите соединение между двумя объектами, он автоматически переместит второй слой на указанное количество пикселей ✌️ [caption id="" align="alignnone" width="1022"] Поддерживайте чистоту юзерфлоу ?[/caption]
Автоматическое выравнивание
Если ваш второй объект смещен менее чем на 5px, когда эта функция включена, плагин автоматически выровняет второй объект в зависимости от направления. Так что вам не нужно тратить на это время. ?
Большое спасибо Andrew за эту идею ?
Укажите собственные горячие клавиши
Если вы хотите ускорить процесс, вы можете указать собственные горячие клавиши в настройках Mac OS. Аналогично вы можете указывать горячие клавиши для любых других действий в Sketch. [caption id="" align="alignnone" width="1022"] Settings → Keyboard → Shortcuts → App Shortcuts → Нажмите на “+”, чтобы добавить Sketch и укажите команду[/caption]
Более детальное руководство ?
https://youtu.be/9z7BrknRocg Вы можете посмотреть на YouTube более детальную инструкцию ?
Бонус: Sketch Interactions Library
Я рад, что вы прочитали всю статью, и у меня есть кое-что еще для вас! ? [caption id="" align="alignnone" width="1020"] Скачайте Sketch Interactions Library на Github и не забудьте подписаться на автора! В будущем будет еще больше обновлений ?[/caption] Свободно пишите автору на Spectrum. И огромное спасибо EPAM.com за поддержку ❤️ Вы также можете писать автору по адресу mssg.me/farid или найти его в Instagram, или Dribbble по нику @faridsabitov
Перевод статьи Farid Sabitov
Топ коментарі (0)