Layers 101: Explore layer types

There are a few different types of layers you can create in Figma Design. We'll cover the basics here, but there are more layers to explore.

Frames

Frames are a fundamental building block in Figma. You can think of them as containers that you can put other objects inside. They allow you to arrange and organize your layers into cohesive designs.

Frames can have defined dimensions and support their own properties. They also give you access to powerful Figma features, like components, auto layout, and prototyping.

Frame presets allow you to quickly create frames for popular dimensions. This includes screens and devices, like an iPhone or an Apple Watch, or for asset dimensions, like social media posts and banners.

In this image, we have a frame preset with the dimensions of an iPhone 14 & 15 Pro Max. You can select frame presets in the right sidebar, when you have the frame tool selected.

Text

Typography is important for most interface designs. Effective type can communicate information, draw attention, build hierarchy, and evoke emotion.

Use the Text tool T to create text layers, then type to add text. Use the Typography section in the right sidebar to format and style your text. Use other sections, like Fill to change other aspects of your text like its color.

Figma comes with a selection of hundreds of free Google fonts to get you started, but you’re welcome to add and use your own fonts.

The text in this card design uses Space Grotesk, a free Google font that's available to everyone in Figma.

Shapes

Shapes, like rectangles R, ellipses O, and polygons can add visual interest and personality to your designs.

You can also combine multiple shapes to create things like icons. The Pen tool P can also help you make straight and curved lines or custom shapes and illustrations

Above is an octagon we created using the polygon tool. You can use the Count field in the Appearance section to adjust the number of sides a polygon has.

Images

Need to add photography, screenshots, and other visual assets to your designs? No problem. Figma Design lets you add images, GIFs, and videos, too.

In Figma Design, images and videos are a type of fill, not a layer type. This allows you to add images to any layer that supports fill and stroke properties including frames, shapes, and even text.

Drag and drop or copy and paste images into your files. Figma will add the images as a fill for a new rectangle layer. Already have a shape that needs an image fill? Add it directly from the Fill section of the right sidebar.