Figma Software Tutorial
The basics of shapes in Figma
What are they and how to use shapes.
Hi there, and thanks for stopping by!
Today we’ll be talking about Shapes in Figma.
What are shapes in Figma?
The word shape usually refers to a geometric figure. For the purposes of Figma this is no different, with the one exception that lines are also considered shapes.
Shapes can be used for many things, only limited by your imagination. They offer a quick way to create geometric vector objects within Figma to get a head start on your design projects.
While there are 5 preset shapes for you to use (Rectangle, Ellipse, Polygon, Star, Arrow), all with their own purposes, Figma gives you the tools to create any shape you could want with the line tool and shape tools (we will get more into a shape tool overview further down).
You can find shapes in your Figma toolbar or use keyboard shortcuts like “O” for Ellipses or “R” for Rectangles for example.
Rectangle: Creates a quadrilateral vector object with 4 points.
Ellipse: Creates a circular vector with 4 points.
Polygon: Creates a triangle vector with 3 points.
Star: Creates a star vector with 5 points.
Arrow: Creates a line arrow with 2 points.
Line: Creates a line with a minimum of 2 vertices, however you can continue to create additional vertices and it will create more lines where you clicked.
Workflow Tip:
If you press enter while a shape is selected, you will also have the ability to add more vertices to your shapes, thus giving you the ability to customize the amount of vertices to your liking.
Shape Use Cases
So why would you use shapes?
Typically, designers will use these shapes to create elements for wireframing, blocking out space or information architecture. This allows designers to see how elements play with each other from a high level concept before investing energy into high fidelity designs (similar in concept to storyboarding a scene for animation or a movie).. While this is just one use case from a design perspective on why you would want to start with shapes, you can use shapes for a variety of things.
Additionally, another use case is that of the icon or logo designer. This individual would need shapes to create their work! Typically I see these being created in Adobe Illustrator, however, I think Figma has come a long way and is a quite powerful tool for this line of work as well.
How to place shapes into your Canvas or Frames
With your shape selected from the toolbar (if you use a keyboard shortcut it will automatically select the shape and ready the tool), click with your mouse and drag to your desired result. If you’re using a trackpad press down and drag; if you’re using a drawing tablet, place your pen down and drag.
If you hold down shift while dragging, it will create equal proportions. This is how you would create shapes like squares and circles for example.
If you don’t create the shape over a Frame, it will get added to your canvas in the layers panel. Vice versa, if you create a shape over a Frame, it will be added as a shape under that Frame in the layers panel.
Shape Tools, The Basics and how to make your own custom shapes.
Figma also gives users the ability to alter these shapes beyond just their vertices and border radiuses through shape tools.
Shape tools give you additional control over how you want to create and alter shapes depending on your needs.
There are 4 Shape Tools:
Union: Joins 2 or more shapes together to create a new shape.
Subtract: Subtracts all top shapes and their overlapping areas from the bottom most shape.
Intersect: Takes 2 shapes and creates a new shape in the form of where they intersect on top of each other.
Exclude: Removes all overlapped areas from top shapes and creates a new shape excluding the overlapping areas.
I’ll be going over more advanced techniques that can be used with shape tools, and how to make icons with shape tools, in another tutorial.
In Conclusion
Shapes can be used for a wide variety of reasons and have the potential to be a powerful tool in your arsenal once you’ve learned the basics.
What’s great about shapes is that since they are vector based, you can export SVGs for your developers, which will make sure that your content scales to any screen size and avoids becoming blurry. This means buttons, icons and additional elements will never be a problem again once you’ve added these tools into your arsenal!
To export a shape, simply select the shape, and in the right side panel (at the bottom) you’ll see an option to export the selected element. Make sure that your desired export setting is selected and hit the Export button to save. PNG is selected by default, so if you want to export an SVG, make sure that you change it at this time.
