👉 Arrows

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
• Download Plugin
• How it works
• Bonus
• Join Community and Contacts

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

Download Plugin

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

How it works

Create a connection. Select more than one layer in Sketch and click on "Plugins" 👉 "Connection Arrows" 👉 "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"

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

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 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 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 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 🚀

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 🤘

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!

Download Free Interactions Library 🎉

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

With support from ❤️