从移动手机到智能汽车 网秦全新业务格局已成型
In this guide, we’ll cover the basics of working with design files in Figma Design.
If you're new to Figma Design, we recommend taking our Figma Design for beginners course. In this course, we cover everything from navigating design files, working with layers, applying auto layout to frames, creating components, and adding prototyping connections to designs. By the end, you'll have created a customizable portfolio website completely from scratch. Learn more about the Figma Design for beginners course.
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.
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.?
Toolbar
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 →
Left sidebar
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.
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.
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
- 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: Hold down the Space bar, then click and drag to move around the canvas.
Trackpad: 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 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 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.
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 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.
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 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 editpermissions can make changes to a file. That includes everything from moving layers, updating properties, and managing the file itself. - People with
can viewpermissions 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
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: