Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Contact Us
  • Home
  • Get started – Figma Learn
  • Layers 101

Layers 101: Explore layer types

Written by Figma Man

Updated at June 19th, 2025

Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

  • Administration – Figma Learn
    Manage files and projects Manage a team Manage your account Manage a Figma organization Manage Enterprise plan settings and permissions Billing Manage Figma in a school
  • Figma Design – Figma Learn
    Create prototypes Import and export Create designs Tour the interface Dev Mode Work together in files Build design systems Figma Draw
  • Get started – Figma Learn
    Set up your account Layers 101
  • FigJam – Figma Learn
    Import and export Run meetings Work on boards Tour the interface
  • Community – Figma Learn
    Explore the Community Creator tools and resources
  • Help – Figma Learn
    Troubleshoot Common questions Work with support
  • Work across Figma – Figma Learn
    Figma AI Work across Figma
  • Courses, tutorials, projects – Figma Learn
    Courses Projects
  • Figma Slides – Figma Learn
    Create and edit slides Present slide decks Tour the interface Import and export
  • Figma Buzz – Figma Learn
    Templates in Figma Buzz Create and edit assets in Figma Buzz Overview
  • Figma Make – Figma Learn
    Tour the interface Work with Figma Make
  • Figma Sites – Figma Learn
    Design a site Create webpages and breakpoints Make your site interactive Preview and publish a site Tour the interface
+ More

Table of Contents

Frames Text Shapes Images

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.

Frame presets with example iPhone 14 Pro Max frame

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.

Text layer that uses the Space Grotesk font

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

Octagon created using the polygon tool

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.

Destination card with an image of the Trevi fountain

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.

Was this article helpful?

Yes
No
Give feedback about this article

Related Articles

  • Layers 101: Combine layers
  • Blog
  • Best practices
  • QR code generator
  • Color wheel
  • Colors
  • Color picker
  • Color palettes
  • Color palette generator
  • Color contrast checker
  • Font Library
  • Templates
  • Developers
  • Integrations
  • Affiliate program
  • Resource library
  • Reports and insights
  • Support
  • Status
  • Legal and privacy
  • Modern slavery statement
  • Climate disclosure statement
  • COMPARE
  • Sketch
  • Adobe XD
  • Framer
  • Miro
  • COMPANY
  • Events
  • Customers
  • Careers
  • Newsroom
Expand