/Sketch-Connection-Flow-Arrows

Plugin for generating easy to use connection flow arrows in Sketch

Primary LanguageJavaScript

👉 Arrows

preview Download from Sketchpacks.com View on Sketchpacks.com

Plugin for Sketch to create connection flow arrows for creating user flows, sitemaps and many more. Just select two objects and click on "Plugins" → "👉 Connection Arrows" → "Create Connection" and voilà! It will create a connection with arrow 🚀

Table of contents

Motivation

In our day to day activities, we are creating a lot of diagrams in EPAM. We understood that most of our time we are spending on connecting and drawing arrows for our user flows and to automate that, I created this plugin. You can read full information about the plugin on Medium

ArrowDemo

Download Plugin

The most recent version you can find here: Download the Latest Arrows Sketch Plugin

Sketch Plugin: Connection Flow Arrows - Generate auto-connected arrows for sitemaps and user flows | Product Hunt Embed

How it works

Create a connection. Select more than one layer in Sketch and click on "Plugins" 👉 "Connection Arrows" 👉 "Create Connection"

Create connection

Update all connections inside artboard. Select artboard where all the arrows are stored and click on "Plugins" 👉 "Connection Arrows" 👉 "Update Connection" 👉 "From the Selected Artboard"

Update all connections inside artboard

Delete connection between two layers. Select layers that have a connection and click on "Plugins" 👉 "Connection Arrows" 👉 "Delete Connection" 👉 "Between Selected"

Delete connection between two layers

Arrow Direction. By the default you will have an "Auto" mode, that will draw arrows based on the position of the second layer but if you are creating userflows or sitemap, where all the arrows are pointed in one direction, you can specify it in settings

Arrow Direction

Arrow Spacing. For saving time and not moving all the layers one by one, you can pre-define spacing in settings. When you will create or update connection between two objects, it will automatically move the second layer for a specified amount of pixels ✌️

Arrow Spacing

Arrow Style. Right now you can provide an arrow style in settings. Make sure that the style that you want to specify is used on your Sketch document and it has "$arrow" text in the name.

Arrow Style

Arrow Type. You have the ability to select "Straight", "Angled" and "Curved" arrow types in settings. They are saved globally and if you update the connection, the arrow type will be taken from the arrow type that these objects had before. If you want to redraw the arrow and have the type specified in settings, please choose "Create Arrow" action 🚀

Arrow Type

Auto-align. If your second object is misaligned for less than 5px with this option turned on the plugin will auto-align the second object based on the direction. So you don't need to spend time aligning everything 🤘

Auto-align

Bonus

This plugin allows you to provide an arrow between two objects, but for creating user flows and sitemaps you need actual objects to interact with. Don't worry, we got your back!

Library Demo

Join Community and Contacts

If you would like to suggest improvement, report a bug or just say "Hi 👋" join our community on Spectrum

You can write me directly via mssg.me/farid or find me on Instagram or Dribbble as @faridsabitov

Watch tutorial on Youtube

Preview

With support from ❤️