Creating Arrows in Figma

While Figma has a built-in arrow shape, it can be pretty limiting and not provide exactly what you want. My goal with this guide is to help you create custom, unique arrows that you will have more control over. Also you will learn some the Figma shape basics that will carry over to creating other shapes or designs.

This is also a great way to utilize groups within Figma to keep things organized.

Create a Simple Two Sided Line Arrow (Chevron)

This type of arrow is great for dropdowns or just indicating that more content is available by clicking the element. Probably the most common used in web design.

To create this type of arrow, just follow these directions:

1. Using the Pen tool ( P ) click to make your first point.
2. Hold down ( Shift ) to lock the angle of the line at 45 degrees. Now click to place the second point or the middle of the arrow.
3. While Still holding ( Shift ) to ensure the angles match click to place the final point. Only do this once the red line appears connecting the two top points. This means that they are both aligned.
4. Hit ( Enter ) to complete the arrow and switch off of the Pen tool.

This is a vector, so feel free to change the name to something meaningful. This can be resized and the stroke width can be changed if you are having trouble see your design.

Now that you created the arrow you can choose to round the ends in the Stroke tab on the right side of the screen. You will see a small picture of the current start and end caps at the bottom of the section.

If you do decide to round the the ends of the arrow then make sure to click the three dots ( ellipses) in the corner to open the Advanced Stroke menu. Select the Round Join so that it matches the end points.

If you want to create a deeper arrow, then double click on the vector drawing to show the nodes you just drew. Hold ( Shift ) and click on the middle node and drag it down to your desired position.

By holding ( Shift ) you lock the node in the vertical ensuring that the node will stay in the middle.

Creating a Curving Action Arrow

I call this an action arrow as it’s perfect for grabbing the users attention, usually guiding them to sign up or buy something. This type of arrow can be difficult to draw as I can’t offer a perfect 1 to 1 guide on it. Creating the arc/curve requires more of a feel but isn’t too hard once you get the hang of it. So it will require some experimentation but it will be good practice.

Follow these steps:

1. Using the Pen tool ( P ) click to make the first point or the bottom of the arrow.
2. Go straight up from the point and click to make another one. Holding down the click, drag the handle of the node up and to the right.
3. Once your happy with the curve, press and hold ( Alt ) and bring the handle back to the node. You will see a red line appear connecting the two nodes. Let go of the click.
4. Go straight down and add another node to create the arrows thickness.
5. Go back to the first node and click again to close the shape/vector. Don’t let go of the click. This is the toughest part as you have to eye the first curve and try to match that and while making it look balanced. Let go of the click once your happy with the shape.
6. Using the Polygon tool, draw out a even sided triangle by holding ( Shift ) down.
7. Rotate the triangle 90 degrees by hovering one of corners until you see a rounded double sided arrow. Hold ( Shift ) again to rotate the shape in 15 degree increments.
8. Resize if need be and align be eye. The base of the arrow is a custom vector and no guidelines will pop up when it is centered.

The body of the arrow can always be corrected if you feel things are not balanced. Double clicking on the object then clicking on the node will bring up the handles and allow you to make more adjustments. This can be done to any node.

Creating a Fat Arrow

Definitely more of an attention getting arrow that can be customized in a lot of ways to make your design pop just a bit more.

Follow these steps:

1. Using the Polygon tool draw out the top of the arrow. While drawing out the triangle hold down ( Shift ) to maintain equal side length. If you find that you are drawing another shape then change the Count to 3. Find this under the Rotation field on the right side panel after you have selected the Polygon tool.
2. Using the Rectangle tool ( R ) draw the height and width of the base the arrow. The most important part here is to make sure the triangle ( top ) is wider then the rectangle base.
3. Once you are happy with the sizing, make sure they are center aligned by moving the rectangle until the red line appears horizontally on top of the shapes.
4. While holding ( Shift ) click on both objects and use the keyboard shortcut ( Ctrl G or ) to group them together. If you find you need to make any adjustments then double clicking the shape will allow you to edit the induvial shapes while maintaining the group.

Creating a Mouse Cursor Arrow

If you want to create more of a mouse cursor type arrow then follow these steps:

1. Using the Polygon tool draw out the top of the arrow. While drawing out the triangle hold down ( Shift ) to maintain equal side length.
2. I find it looks better if you bring in the sides together a little. Hover over the outline box of the rectangle until you see a double ended arrow, then click to do this.
3. Double click on the triangle and add a node to the bottom side by hovering over it. It will automatically be placed in the center.
4. Hold ( Shift ) and drag the node up and hit ( Enter ) once you are happy with placement.
5. Draw a small rectangle underneath the triangle. Keep it more on the skinny side to better represent a pointer/cursor.
6. Holding ( Shift ) click on both shapes and hit ( Ctrl G or ) to group them together.

Applying Stroke or an Outline to an Arrow

All of these arrows can have a stroke applied to them but because that they are custom shape you may run into trouble with an unwanted effect when just trying to added a stroke like normal.

This method applies to any shapes that you have combined/grouped together and want to outline.

If the shapes are overlapping when combined, when you add the stroke it will outline both shapes. even where they intersect.

Fixing this is quite easy. While having your arrow selected, first switch the Stroke style to Outside in the Stroke tab in the right side menu.

Use the keyboard shortcut ( Ctrl E ) to flatten the object. This option is also available in the popup menu when you right click a object. Flattening a group will merge both shapes together and causing it to become one single vector.

Once you flatten a group it can not be reversed, aside from using undo ( Ctrl Z ) if you just flatten it.

Conclusion

In this blog post, you learned how to create multiple types of arrows in Figma using the Polygon and Rectangle tools. You also learned how to group shapes together, apply a stroke outline, how to flatten a group of objects all of which will only benefit you going forward.

If you have any questions or don’t understand something in this guide just leave a comment for me below.