Explore design files
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?
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.
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.
Toolbar
The toolbar contains a selection of important tools and actions. There are four groups: tools, actions, collaboration, and view options.
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.
Left sidebar
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).
Right 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.
View only access
- Comment: View and search comments
- Properties: View the properties of your selection
- Export: Export assets from the file
Edit access
- Design: View and edit the design properties of layers
- Prototype: View and edit prototype interactions, flows, and settings
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.
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 in the canvas to create your designs.
The left sidebar is where you can explore and organize your layers. The right sidebar is where you can view layer properties.
Let’s dive a little deeper into some key concepts: pages and layers.
Pages
Pages help you organize your design files. Each page is its own canvas, giving you even more space to create and explore your ideas. People use pages to:
- Manage designs by milestone or status
- Organize components
- Keep a scratchpad of ideas
- Archive older designs
To browse a file’s pages, click the current page name in the left sidebar. You can also tap to create a new page. View pages in the sidebar →
Pages are great for sharing a specific collection of designs. For example, you can create a distinct page for a review or when designs are ready for development.
To share a page, right click on the page name and click Copy link to page. When anyone opens that link, they’ll land on the right page.
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.
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.
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 .
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 →
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.
A layer's properties will include basic information about the layer, like it’s 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.
Supported on:
Supported on:
Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs
Supported on:
Components Instances Auto layout
Supported on:
Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs
Supported on:
Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs
Supported on:
Frames Groups Components Instances Auto layout Sections
Supported on:
Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs
Supported on:
Frames Groups Components Instances Text Shapes Images Auto layout Sections GIFs
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 will 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 an editor and a viewer.
- Editors can edit or make changes to a file. That includes everything from moving layers, updating properties, and managing the file itself.
- Viewers can explore pages and prototypes, but they can’t make any changes. Viewers can still contribute to files by giving feedback.
Explore actions viewers can take
- 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
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 View only next to the file name, or just a handful of tools , you can only view the file.
Need edit access?
You can request access to a file from the toolbar. Click the Ask to edit button next to the file name.
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 editor upgrade.
Ready to start creating?
These quick starter projects are the perfect way to kick-start your learning journey: