This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →

In this guide, we’ll cover the basics of working with design files in Figma Design. Feel free to come back to this guide any time you need a refresher.

Want to learn more about the difference between Figma's products? Check out our What is Figma guide.

What are design files?

Design files give you the tools you need to create, share, and test your designs. Design files are popular with designers, product managers, writers, and developers. But anyone who wants to create or communicate visually can use them!

Create design files to explore specific problems, or manage the entire design process. You can sketch out your ideas on your own, or share them with others to create together and get feedback.

Figma files are live and always up-to-date, so people can work on the same file at the same time. Having one live file gets everyone on the same page without the need to save, download, or pass documents back and forward.

Every file has its own version history, where you can track the evolution of your designs. Explore previous iterations, or create new versions to capture milestones.

Design files in the file browser

You can identify Figma Design files in the file browser by the icon on the file card.

Design

Find your way around

If you're new to Figma, it's normal to feel a bit lost when you first open a file. We’ll take you on a tour, so you can orient yourself and start collaborating with your team.

Design files have four distinct regions: a toolbar at the bottom, a left sidebar, a right sidebar, and the canvas.

The toolbar is your hub for interacting with—and adding objects—to the canvas. It houses all your tools for selecting objects, moving around the canvas, and creating frames, shapes, text, and other layers ↓. These will be the building blocks of your designs.

When you're ready to dive deeper, you can explore each of the tools in the toolbar →

The left sidebar gives you access to layers, pages, assets and is where you can take action on your files.

Use the Assets panel to view local components or find components from kits or libraries (requires edit access).
Access file-level actions, like moving it, publishing a library, creating a branch, or showing the version history.
Use the menu to access more functions, actions, and settings. Or adjust your Preferences, like dark mode or scroll behavior.

Explore the left sidebar →

The right sidebar is where you can access more information about your designs. When you don't have anything selected, you can view local resources, like color or text styles.

With a layer selected, you can explore properties of your current selection. Your permissions will determine what you can see in the sidebar, and what actions you can take.

The right sidebar is also where you'll find tools to share your designs and work together in real-time. For example, you can share the file, see who else is here, talk over audio, and more.

If you need to, you can also adjust your personal zoom and view options. The changes you make here only apply to your view.

View only access

Comment: View and search comments
Properties: View the properties of your selection

edit-access (1).png

Edit access

Design: View and edit the design properties of layers
Prototype: View and edit prototype interactions, flows, and settings

Explore the right sidebar →

Inspect designs with Dev Mode

Are you viewing the file as part of the handoff process? Dev Mode is a developer-focused interface for inspecting and navigating design files.

Dev Mode allows you to identify designs that are ready for development and access the information needed to transform designs into code. Guide to Dev Mode →

Canvas

The canvas is your working area where you’ll arrange layers to create your designs. You’ll find lots of room to explore and iterate on your ideas.

Pan to move around

Pan to move around the file and see what else in on the canvas.

Mouse: [left mouse click button icon] Hold down the Space bar, then click and drag to move around the canvas.

Trackpad: [two finger drag icon] With two fingers, slide in any direction to pan the canvas. Figma will use your computer’s default scroll direction settings.

Zoom in and out

Zoom in to take a closer look, or zoom out to see the bigger picture. View the current zoom level in the top-right corner of the screen.

Mouse: Hold down ⌘ Command/Ctrl and space and scroll down to zoom in and up to zoom out.

Trackpad: Pinch two fingers together to zoom out or stretch two fingers apart to zoom in.

Pan and zoom the canvas

Stress-free exploration

If it’s your first time joining or exploring a file, interacting with things on the canvas can feel a little scary. People are often worried they’ll move, change, or delete something by accident.

Great power doesn’t have to come with great responsibility. Select the hand tool in the toolbar, or press H on your keyboard. Now you can click, drag, and zoom your way around a file, without the fear of making unintended changes.

Put it all together

Let’s do a quick recap! The toolbar gives you the tools and functions you need to create and combine layers. You can then arrange those layers on the canvas to create your designs.

The left sidebar is where you can explore and organize your file. The right sidebar is where you can view layer properties.

Let’s dive a little deeper into some key concepts: pages and layers.

Layers

Designs are usually created from a combination of shapes, text, and other elements.

When you add objects to the canvas, Figma treats each object as a separate layer. Having separate layers allows you to change or edit the properties of each layer on its own.

Like this design for a social post, which includes a name, profile photo, image, and caption.

You don’t need to be a geometry whizz to use Figma. But it helps to know we're working with three dimensions on the canvas.

We have the X (horizontal) and Y (vertical) axis that gives us a layer's co-ordinates on the canvas. We also have a third dimension, the Z-index, that gives us the layer's depth or order it appears.

View layers in the Layer panel

Layers can sit on top of, behind, next to, or inside other layers. To see how layers are organized, check the Layers panel in the left sidebar.

Types of layers

Each layer has a name and an icon for the layer type. You might have noticed that some of these icons appear in the toolbar. You can select that tool from the toolbar, or use the keyboard shortcut, to create more layers of that type.

Layer icon	Layer name	Shortcut
	Frame	`F`
	Group	`⌘ Command` `G`
	Component	`⌥ Option` `⌘ Command` `K` or `Ctrl` + `Alt` + `K`
	Instance	N/A
	Text	`T`
	Shape	`R`
	Image	`⇧ Shift` `⌘ Command` `k` or `Shift` `Ctrl` `k`
	Auto layout	`Shift` `A`
	Section	`Shift` `S`
	GIF or video	`⇧ Shift` `⌘ Command` `k` or `Shift` `Ctrl` `k`

Layer order and hierarchy

The order in which layers appear in the layers panel is also important. Layer order determines how layers overlap in the canvas.

This menu has a rectangle that acts as the background. As it's below the other layers in the layers panel, it also appears above those layers in the canvas. If it was above the other layers in the layers panel, we wouldn’t be able to see any of the text or icon layers.

Layers as containers

We mentioned that layers can be inside other layers. You can tell if a layer contains other layers if there is an arrow next to it in the layers panel. Click the arrow to view any layers within that container.

Relationships between layers

We use the terms parent and child to describe relationships between containers and the layers within them.

Parents layers contain other layers, like frames, components, and groups.
Child layers are layers inside a parent layer. They could be individual layers, like a shape, or some text, or containers with their own children.

Parent, child, and sibling relationships →

Working with containers

There are a few different types of layers that function as containers: groups, frames, and sections. While they may seem similar, they each have their own benefits.

Example

Groups

Groups are a great way to combine layers into a single element. They simplify the layers panel and give you a single object you can interact with in the canvas. For example: you have a collection of shapes you want to stay together.

Groups are collections of layers and not distinct elements, so they don’t have dimensions or properties of their own. When you make changes to a group, you’re actually applying those changes to each layer in the group .

Example

Frames

Frames are another way to combine layers in Figma. Frames can act as ‌scaffolding for a specific device or screen size, like a single page in an app design. They can also act as containers for layers that make up distinct elements, like the layers in a navigation bar. You can even put frames inside other frames.

Unlike groups, frames can have dimensions and properties of their own—like fills, rounded corners, and shadows. They also have features like auto layout, constraints, and layout grids, that allow you to control or influence the layers inside them.

Frame presets

Figma has frame presets for common assets, devices, and screen sizes. Whether you’re designing a mobile app or an Instagram post. Explore frame presets →

Example

Sections

The section tool allows you to designate and label a specific region of the canvas. You can use sections to group related concepts and ideas or organize your designs.

Sections help to draw focus, give context, and guide collaborators through processes. They’re perfect for activities like reviews or for sharing designs for handoff.

Check out our best practice guide for more information on when to use groups and frames.

Explore layer properties

When you hover over a layer or object in the canvas, a box appears around the entire element. Click on a layer to select it and view more information about its properties.

In the left sidebar, you can view the layer’s name and how it’s organized. In the right sidebar, you can view the properties of the layer.

properties-panel (1).png

A layer's properties will include basic information about the layer, like its dimensions and location on the canvas. As well as any styling, like color, text properties, or effects like shadows.

Which properties you can see will depend on the type of layer you have selected. If a layer uses a style, then only the style name and icon will be visible in the right sidebar.

Layout properties in right sidebar (1).png

Supported on:

Frames Groups Components Instances Auto layout Sections GIFs

Layer properties in right sidebar.png

Supported on:

Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs

Auto layout properties in right sidebar.png

Supported on:

Components Instances Auto layout

Constraint property in right sidebar.png

Supported on:

Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs

Fill properties in right sidebar.png

Supported on:

Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs

Stroke properties in right sidebar.png

Supported on:

Frames Groups Components Instances Auto layout Sections

Selection color properties in right sidebar.png

Supported on:

Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs

Effects properties in right sidebar.png

Supported on:

Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs

Export properties in right sidebar.png

Supported on:

Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs

Can't edit properties?

If you click on a layer, but can't adjust its properties, it means you have view-only access. You can use the Properties panel to view the properties of the layer, but you can't make any changes.

If you're viewing the file as part of the handoff process, then Dev Mode is for you. Dev Mode is a developer-focused interface for inspecting and navigating design files. Guide to Dev Mode →

Permissions in design files

Your permissions determine what actions you can take and whether you can make changes to files. We’re not going to do a deep-dive into Figma’s permissions model here. But there’s one concept to understand: the difference between can edit and can view permissions.

People with can edit permissions can make changes to a file. That includes everything from moving layers, updating properties, and managing the file itself.
People with can view permissions can explore pages and prototypes, but they can’t make any changes. Viewers can still contribute to files by giving feedback.

Explore actions when you have can view permissions

Open and view design files
Measure distances between layers in design files
Select layers in the left sidebar or canvas
Use the inspect panel to view layer properties
Join audio calls (with captions)
Add, reply to, or resolve comments
View the version history of a file, then duplicate or share links to specific versions
View and interact with prototypes and presentations
View existing prototype flows and connections
Copy or export frames, components, and layers

Learn more about roles and permissions →

How to check your permissions

The quickest way to see whether you can edit a file is to check the toolbar. If you see the full toolbar, with all the creation tools and actions, you have edit access to the file.

If you see Ask to edit and just a handful of tools, you can only view the file.

Need edit access? Click the button to request access to a file from the toolbar. If you don’t see this option, it means your access has been restricted by a team or organization admin. If you’re on the Professional plan, reach out to your team admin. If you’re on the Organization or Enterprise plan, request an upgrade to a paid seat.

Ready to start creating?

These quick starter projects are the perfect way to kick-start your learning journey:

In this guide, we’ll cover the basics of working with Figma Design files. You can come back to this guide any time you need a refresher.

To keep it simple (and reduce our word count 😉), we’ll call them design files in this guide.

Want to learn more about the difference between design files and FigJam files? Check out our What is Figma guide.

What are design files?

Create design files to explore specific problems, or manage the entire design process. You can sketch out your ideas on your own, or share them with others to create together and get feedback.

Every file has its own version history, where you can track the evolution of your designs. Explore previous iterations, or create new versions to capture milestones.

Design files in the file browser

You can identify Figma Design files in the file browser by the icon on the file card.

Design

Find your way around

If you're new to Figma, it's normal to feel a bit lost when you first open a file. We’ll take you on a tour, so you can orient yourself and start collaborating with your team.

Design files have four distinct regions: a toolbar, a left sidebar, and a right sidebar, and the canvas. We’ve simplified the layout so you can get to know what lives in each location.

The toolbar contains a selection of important tools and actions. There are four groups: tools, actions, collaboration, and view options.

Simplified

Tools

Switch between tools to explore the file, select and move layers, or resize them.

Find tools to create frames, shapes, text, and other layers ↓. These will be the building blocks of your designs.

Use the menu to access more functions, actions, and settings. Or adjust your Preferences, like dark mode or scroll behavior.

Actions

Access file-level actions, like libraries and version history.

Or, with layers selected, access functions for combining layers. Like applying masks, creating components, or editing shapes.

Collaboration

Find tools to share your designs and work together in real-time. Share the file, see who else is here, talk over audio, and more.

View options

View prototypes or adjust your personal zoom and view options. The changes you make here only apply to your view.

The left sidebar gives you access to layers, pages, and assets. View a list of pages in the file, select a page to view, then explore any layers on the canvas.

Use the Assets panel to view local components or find components from libraries (requires edit access).

Simplified

Explore the left sidebar →

The right sidebar is where you can access more information about your designs. When you don't have anything selected, you can view local resources, like color or text styles.

With a layer selected, you can explore properties of your current selection. Your permissions will determine what you can see in the sidebar, and what actions you can take.

Right