The Canvas is the basic workspace in Figma. It is infinite in size and contains all of your frames, groups, and layers.
By default, vectors are rendered as resolution-independent paths in the Canvas though you can turn on Pixel Preview at 1x and 2x resolutions to enable pixel-precise editing for raster assets.
You can change the background color of the Canvas in the Inspector by de-selecting any layers and clicking the color picker labeled “Background.”
The Layers Panel is on the left-hand side of your screen and is a hierarchical list of all of the frames, groups, and layers in your Canvas.
You can click and drag layers up or down in the list as well as in or out of frames and groups. Dragging a layer up moves it to the front of the Canvas, while dragging it down pushes it to the back.
If you hover over a layer’s name, an eye and a lock appear. The eye allows you to toggle the layer visibility, while the lock allows you to lock a layer in place and click through it while editing in the Canvas.
The Inspector is on the right-hand side of the Figma workspace and consists of a list of properties and property types that you can add, remove, and modify to define a layer, group, frame, or even the Canvas.
The File Browser is where you create, modify, and manage your files, projects, and teams in Figma.
In the sidebar on the left, you can search for a file, view your Recent Files and Deleted Files, and manage Teams and Projects.
The rest of the area is dedicated to File Previews that display the name, the “last edited” date, and the visual content of each file. You can click the disclosure arrow on any tile to see a full menu of operations you can perform on that file. These include:
⌘ + ⇧ + E⌘ + S⌘ + ⇧ + K^ + C or i⌥ + double-click⎵ + drag+–1 or 920⇧ + R⌃ + P⌃ + G⌘ + ⇧ + \⌘ + \⌘ + '⌃ + ⇧ + '⌘ + Y or ⌃ + ⇧ + 3VPB⌘ + drag⌘ + J⌥ + dragEsc or ReturnT⌘ + U⌘ + i⌘ + BVPROLA or FS⌘ + C⌘ + X⌘ + V⌘ + D or ⌥ + drag⌘ + G⌘ + ⇧ + G⌘ + ⇧ + H⌘ + ⇧ + L⌘ + E⌘ + ⇧ + O⌥ + ⌘ + MVector networks are one of the most unique features in Figma. Most pen tools draw paths in a loop with a defined direction, always wanting to reconnect to their original point. Vector networks do not have a direction and can fork off in different directions without requiring a separate path object to be created. Complex objects can then be created within the same object and with the same properties much faster than they could be drawn using traditional vector path tools.
You can use the Pen tool or any of the Shape tools to create a new vector layer. You can also hold modifier keys to draw them in specific ways.
If you hold ⇧ while creating a shape, it locks the shape’s aspect ratio to 1:1.
If you hold ⌥ while dragging, the shape’s origin is locked to the center instead of a corner.
If you hold ⎵ while dragging, it moves the entire shape instead of just a single point.
If you select a path and hit Enter , you’ll enter Edit mode, in which you can select, adjust, or change properties of individual points, lines, or entire shapes. To exit, just hit Enter again or press Done in the toolbar.
To access a point’s Bézier handles, enter Edit mode. If it is a curve, the handles will already be showing. If it is a corner with no handles, hold ⌘ and click the point to show the handles and create a mirrored curve.
Any intermediate point on a path can be rounded via the Corner Radius property in the Inspector. If you select the entire path, it rounds all corners to the same degree. If you go into Edit mode, you can select individual points and round them separately.
Terminal points on an open path can only be rounded via End Caps.
End Caps enable you to add styling to terminal points on an unclosed path. The first three also apply to the ends of each dash of a dash pattern. The default Cap style is None so lines and dash patterns track the dash length specified. You can also select from these other styles:
Check out this video tutorial to see Vector Networks in action. And be sure to read “Introducing Vector Networks” on our Medium page.
Groups and Frames allow you to combine layers together so that they can be treated like a single layer.
By default, groups take on the combined dimensions of their children.
⌘ + G).⇧ + ⌘ + G).Sometimes, it is useful to have a layer whose size is explicitly set by you. These are called Frames.
F) and drag out an area of the screen.⇧ + ⌘ + G)Frames are drawn directly on the canvas and we draw them in a special way to make them easier to see and work with.
Boolean operations combine any set of shape layers through one of four formulas: Union, Subtract, Intersect, and Exclude. Boolean groups are treated as a single shape layer and share fill and stroke properties and can be combined with other boolean groups through subsequent boolean operations.
Masks in Figma support both outline and alpha masks. Both share the geometry outline, but alpha masks use the per-pixel opacity of the paints. You can convert any boolean group, group, or shape to a mask by selecting the layer and clicking the Mask button in the toolbar or by right-clicking on the layer and selecting Use as Mask.
Masks naturally mask or limit the visibility of their siblings, and they intersect with any parent masks that are applied. Top-level masks are inserted into a group to prevent the entire canvas from disappearing into the mask. Clipped groups also stop mask propagation.
In Figma, Components enable designers to create reusable Instances of UI elements that automatically stay in sync.
Components are nestable in Figma allowing for small, detailed components to be combined with others into larger, more complex interfaces while maintaining granular control over each individual component that syncs between instances.
Inheritance is defined on a per-property basis so designers don’t need to create individual components for each state. Just override the properties or add additional elements and every other property will continue to be inherited from the Component.
Properties that affect the layout of child layers are not overridable on Instances, allowing you to maintain a stricter level of consistency with less effort. Examples of these properties include size, position, point and bezier positions, and constraint settings. You also cannot add, remove, or reorder layers within Instances of Components.
Other properties are able to be overridden and allow designers to create variations on the original component to represent state and data while maintaining overall consistency within an interface. Examples of these properties include text properties, fill, stroke, effects (shadows, blurs, etc.) and the Instance’s outer bounds.
Select any layer, group, or frame and click “Create Component” or opt+cmd+k to convert it into a component.
To create a new instance of a Component, select that Component and duplicate it, alt+drag it, or copy and paste it to another location.
When selecting an instance, right-click and select “Find Component”. The viewport will snap to the original Component’s location and the Component will be selected.
“Reset Instance” reverts a selected instance or selected layer to its original properties and reconnects inheritance.
You can also use the Component panel in the Inspector to reset individual properties of the selected Component or selected layer to their initial values. This also reconnects inheritance.
“Detach Instance” stops inheritance and converts an instance to a standard Frame.
Check out this video tutorial to see Components in action. And be sure to read “Components in Figma” on our Medium page.
Components are great, but as soon as they’re used across different files they become out-of-sync and need to be manually updated. As design requirements change and Components become more complex, this quickly becomes problematic.
With the Team Library we can share components across files and teams, as well as keep instances of components synchronized. This ensures that when the source Component changes, all instances can easily be updated to reflect those changes.
When you want to share a Component with your team, select it and click the “Add to Library…” button in the inspector sidebar on the right-hand side of the canvas. This will bring up the “Publish Changes” window where you can review all changes made to all shared components in the file.
If there are any previously-published Components that have been changed or removed, the “Publish Changes” window will show those as well, listing all changes that can be published. A published Component listed in this window will be presented in one of the following states:
When a shared Component is updated, other files that use it will be alerted about the update. Once you click the “Publish Changes” button in the window all the changes listed will be published at once. No partial components are ever published. Should publishing fail (if your internet connection stalls during publishing, for instance), all the changes are canceled. This means it’s safe to make numerous changes to a set of icons (e.g. changing the stroke width or the accent color to all of them), with assurance that all of them, or none of them, will be published.
Next to the “Publish Changes” button is “Configure…” which allows you to configure only those Components intended to be shared. If you see something being added by mistake, simply choose “Configure…” and uncheck the mistakenly-added Component’s “Publish” checkbox.
The Team Library is available in all files when you’re a member of a team. Click the “Team Library” icon in the toolbar to bring up the library window. Drag and drop instances of Components from that window onto your canvas. If you know what you’re looking for you can even search by Component name, file name or project name by clicking the 🔍 icon in the title bar of the library window.
If you are a member of more than one team you can click on whatever team name is currently selected to pick a different team to browse for shared Components.
Whenever there’s an update to a shared Component that you’re using, a notification will pop up in the bottom left corner of a file (along with a blue dot next to the library icon in the toolbar). You can either:
Updates can be ignored, applied selectively or all at once by anyone who can edit the file.
If you see an update you don’t like you can either:
It might be useful to know that you can select one or more instances in your file and select the “Detach Instance” option in the drop-down control of the inspector sidebar. This “breaks it down” into regular objects and makes it editable.
For more information about design systems, Team Libraries, and how they can bring efficiency to your design process, be sure to read “Team Libraries in Figma” on our Medium page.
Figma supports a variety of text features:
To create text objects, select the Text tool (T) and then…
You can change properties of the text object (e.g. font face or line height) in two ways:
Shift + Right Arrow) and change properties for just that subset.Text transforms such as Upper Case are available in the Text menu. For text decorations, either use the Text menu or the Command + U shortcut for underlining.
As you edit text, you may want the width and height to automatically adjust or stay put depending on the situation. To set the auto-resizing behavior, use the Advanced Type panel where you can select:
The following font features are enabled by default:
It is not currently possible to manually enable or disable these (or other) font features. We hope to introduce that capability in a future update.
At the top of the Inspector are controls for aligning and distributing an object or set of objects. These include Align Left, Align Horizontal Centers, Align Right, Align Top, Align Vertical Centers, Distribute Horizontally, and Distribute Vertically.
Immediately below the alignment and distribution controls are tools for directly manipulating the location of an object, as well as its width, height, rotation, and border radius.
You can add constraints to the items within a frame. This tells Figma how to move and resize these items as the frame is resized.
Constraints only take effect inside frames.
You can add one or more layout grids to a frame. These are visual aids that help you keep items aligned as you do your layout.
ctrl + G)Grids are only available for frames.
Layout grids and constraints both play a role in affecting your layout as a frame is resized.
When you place a grid on a frame, Figma assumes that you want your designs to stay aligned to that grid. As a result, constraints work differently when used in conjunction with layout grids.
This combination of behaviors between layout grids and constraints holds even when you hide the grids. If you want to turn off this behavior, you need to delete the grids entirely from your frame.
Paints can be applied to both fills and strokes.
Fill paints only work inside closed sections of a vector network, and paint areas can be added and removed selectively in Edit mode using the Paint Bucket tool. Stroke paints apply when a non-zero stroke is applied to the outline or border of the shape.
The paints of any path can be managed in the Inspector by hitting + under Fill or Stroke. The first paint added is a Solid paint, and a vertical Linear gradient paint is added on subsequent presses.
There are six types of paints: Solid, Linear, Radial, Angular, Diamond, and Image. You can stack them up and use varying levels of opacity and blends to create a variety of looks.
You can add/remove effects to an effect list. Figma renders up to 8 of each shadow type, and 1 of each blur type. Keep in mind that the blurs used by these effects can lead to poor performance, with background blurs typically being the most expensive effect.
Effects like shadows, glows, blurs, and the paint lists combine with blending to create a variety of looks to a shape.
Drop Shadow: A versatile effect that can be used to make a shape pop off the background by casting a shadow below. The shadow can be offset, the blur size controls the softness, and the color and blend tint and combine the shadow.
Inner Shadow: A versatile effect that can be used to add inner depth to a shape. These have similar controls to the drop shadow but appear atop the fill but below the stroke on a shape.
Layer Blur: this blurs a given layer geometry.
Background Blur: this blurs the geometry of all geometry underneath the bounds of the layer with the blur.
In Figma, effects apply to both layers and groups. Using group blurs and shadows can improve performance, but keep in mind the stacking order differences from the tables below. The differences in group and layer shadows are most evident on overlapping layers. When shapes don’t overlap, then the appearance should typically be the same.
Users can enable Pixel Preview mode by using the shortcut (CTRL + P), by selecting the Canvas and clicking the checkbox next to Pixel Preview, or by clicking the Eye icon in the toolbar and selecting Pixel Preview. Pixel preview displays vector objects as if they were rasterized. This is helpful to ensure that objects that will be exported as bitmaps are correctly pixel-fitted at their intended sizes. When Pixel Preview is enabled, you can alternate between 1x and 2x mode to see how objects will appear on low-resolution and high-resolution displays.
Images can be brought in from a variety of image sources, and each browser supports a unique set of formats.
Vectors can be brought in from a Figma (.fig), Sketch (.sketch), or SVG (.svg) file. These formats are complex, and typically contain a mix of vector shapes and images. SVG uses a human-readable XML format, but we recommend importing files generated from tools for best results.
Files can be dropped into the File Browser or Editor in Figma to import them.
Figma also imports with high quality via copy-paste to the Editor.
Exports are possible on any layer in Figma. Most commonly the Group and Slice primitives work best for export and have the most settings. Each represents a rectangular area to be exported with or without padding for the enclosed geometry.
You can add/remove settings to an export list. The settings include the content scale, suffix, and format. 2x, @2x, PNG is a common export for Retina displays.
The content scale can be specified as a multiplier (e.g. 0.25x, 1x, 2x, 3x…) with a maximum of 1024x. The content scale can also be specified as the maximum dimension of the content in one dimension (e.g. 242w, 512w, 1024h, …), with the other dimension calculated automatically. Both dimensions must fall below the maximum export size or the exported size is reduced.
Figma supports exports of up to 32768 x 32768. For the image formats, that represents 2GB of uncompressed data and some viewers may not be able to open large exports. Here are some details on our export formats.
The Export Picker is one method to export from Figma once you have added an export setting. Select the layer and click on the Export toolbar button in the upper right. The Export Picker has the following features:
Checkboxes control layer export from the picker. These are remembered only for the current session and are not shared with other viewers.
The Export button in the properties panel bypasses the picker and the checkboxes that control layer export. If you select any layer or layers with exports, and then click the Export button, the export occurs and the save dialog is displayed.
When there is no selection, the canvas is considered the current selection, and all exports are available from there. All export buttons with the canvas selected go through the Export Picker.
Folder names can be added to the layer names of objects. When a folder or multiple exports are encountered, then a zip file is produced containing that content. Save this to a root folder, and unzip it to generate the file and folder content.
The native Figma app can write files and folders directly off the root folder that you specify from the save dialog.
Dragging Figma exported SVG files into Sketch and Illustrator works well.
Sketch and Illustrator, unfortunately, paste a large blob of SVG XML text even from their own SVG clipboard.
Figma does not yet export to some vector formats. On macOS, the System Print Dialog provides conversions from SVG to some formats. The quality of this converter varies depending on the features used.
Version History allows you to view earlier versions of a file and restore or duplicate an older version of a file. Versions are made when there have been no changes to the file for 30 minutes. This means that if you work continuously on a file for 3 hours without 30 minutes of inactivity, it will appear as one version. Your changes are automatically saved so if you close your tab, your version will still be saved.
To view a file’s Version History, open the file and click the dropdown next to the file name. Version History will appear on the right side of the canvas. You can see when the file was edited and who made the changes. The dots correspond to how much time was spent on that change as a proxy for how big the change was.
Clicking a specific version will show that design and reveal the option to restore that version or duplicate it in the toolbar.
Comments allow you to work with others on designs. You can add comments anywhere on the canvas and they are visible to everyone who can view or edit the file. They also send notifications by email and to an integrated Slack channel by default, but you can turn that off. You can view existing comments feature by clicking the Comment Tool in the toolbar.
To add a comment, simply click anywhere on the canvas and a dialog will appear. You can edit or delete an existing comment by clicking the comment and selecting the three dots on the bottom right corner of the window.
To reply to comments, click an existing comment bubble and the comments will appear. To resolve comments, simply click the Resolve button in the comment window. You can also drag existing and in-progress comments around the canvas to provide better context.
While in Comment mode, a list of the unresolved comments will appear on the right-side panel. You can click any of the comments in the list to move directly to that comment.
The File Browser helps you organize your files and projects.
The browser has multiple sections:
Files always appear as thumbnails and show the title, last edited time, the folder in which it lives, and a lock representing view-only access for shared files. You can right-click on any thumbnail to Open, Share, Rename, Duplicate, or Delete the file. You can also drag individual or multiple files between folders if you have permission to move them.
Recently viewed shows the last 50 files you’ve viewed. It will show your own files, files belonging to someone else, and files belonging to teams. New files created from this view will be placed in the Drafts folder in your Personal Space. You also can right-click on a file to view it within its project to gain more context.
Deleted Files shows the personal and team files that have been deleted. You can right-click on a single file (or select multiple) to Restore, Delete Forever, or Duplicate to Drafts.
Drafts contain all of the files that are not organized into a project. Files can live in the drafts project forever and can be shared with others.
Your Personal Space contains your projects and drafts. You can share projects and/or individual files with others.
Projects can contain as many files as you want. You can share entire projects or individual files within each project. You can create projects by clicking New Project on the left-side panel as well as from the project view when Personal is selected.
To make a project appear on the left-side panel, add it to your favorites by clicking its star in the project list view or in the toolbar when the project is open. You can remove a project from your favorites by removing the star.
You can share a project with others to work together. Sharing a project with others grants them access to every file it holds with either edit or view access. You can change someone’s level of access or remove them altogether at any time using the share dialog. You can also leave a project that you’ve been invited to.
Edit access grants full ability to change a file including its name, designs, permissions, or to delete a file. The only limitation is the ability to remove the owner of the project.
View access allows others to see the full design, comments, leave comments on a design, duplicate the file to their Drafts, and share the file with others with view-only permissions. They cannot change the designs of, rename, or delete the file.
Permissions allow for more refined collaboration within Figma and can improve design workflows for teammates. With Teams, you can create a shared team space and maintain a directory of team files that is constantly up-to-date, with version history for every file. Within the team space, you can also share components, such as a color library.
Anyone with access to a team space or shared project can access and comment on all of the files in that space. You can invite people to join a team or project via email, with our Slack integration, or both. Teammates can be Owners, Admins, Editors, or Viewers. Once the permission level is set for a member of the team, that same permission is set for every project and file in the team space.
If a link to a file is shared with anyone outside of the team, they will not be able to access the file. No files in a team space are public.
Owners can change anyone’s permissions, authorize a team with Slack, and invite others to join the team as an Admin, Editor, or Viewer. Owners can also transfer ownership to another teammate if they wish and there can only be one owner at any given time.
Admins can modify permissions for team members, authorize a team with Slack, and invite others to join with Admin, Edit, or View-level access.
Editors can invite and change permissions for other Editors and Viewers. They cannot Authorize with Slack or alter Admin or Owner permissions.
Viewers can invite others to view a file. They cannot change anyone’s permissions or authorize with Slack.
Owners, Admins, and Editors have the full ability to change files and projects including the file’s name, content, or permissions. They can also delete files.
Viewers can see the full design, view and add comments, duplicate the file to their personal drafts, and share files with other viewers. They cannot change the contents, rename, or delete the file.
Sometimes you don’t need everyone to have full access, with edit permissions, to your design files. To set your files to View Only:
View Only provides several useful features for developer handoff:
View Only also works with the Figma Mirror App and Presentation Mode. With the View Only file open on your computer:
Specifications like font-size, font-weight, and font-name can be saved to your clipboard by selecting the element or group, using Control + Right Click, and Copy Style as CSS or Copy as SVG.
Anyone can create teams and invite others to join the team via email. To do so, click New Team in the left-side panel and choose a name. Slack authorization can occur during team creation or anytime afterward. Team members can be invited via email. The Owner or Admin of the team can adjust the permission level of subsequent team members.
Integrating with Slack allows all the members of a Slack team to access the shared space. Once Slack is integrated with Figma, members of the Slack team can go to figma.com, click Sign up and then Sign in with Slack to join the team. Once the Slack integration is set up, you can configure Figma to notify channels you specify when activity happens in files.
Preview your Figma designs on your iOS or Android device by downloading our Mirror App (Live Device Preview) here!
Once you have installed the Mirror App, follow the steps below:
You can use the Shift + Command + F shortcut (on Mac) or F11 (on Windows) to enter fullscreen mode in the editor.
With a top-level frame selected, press N or Shift + N to cycle through top-level frames on the canvas. This can be a easy way to prototype designs and present them to clients or colleagues.
Please keep in mind that Mirror does not alter the aspect ratio of content. A design in 350x400 pixels in the editor, will scale to 700x800 (2x) on a retina mobile device.
Two Factor Authentication, also known as 2FA, is a way to bring an extra layer of security to your files in Figma. With 2FA enabled, in addition to your regular email address and password login, you will also be required to enter an additional piece of information that only you will have access to.
Enable 2FA in Figma with the following steps:
You can also connect your cell phone number to Figma as a backup method for receiving your 2FA authentication code.
At any time, you can visit your Settings page to:
For the best Figma experience, we recommend the following setup:
Update to the latest browser. Go to “About Google Chrome” → About. The browser should install the latest version and then have it restart.
Set the ‘Download location’ to a folder that you specify. This lets you rename the file, create folders, and switch the export folder. In Preferences → Advanced Settings…
Make sure that WebGL is enabled. We have had users report this flag was disabled and it’s not obvious that it disables WebGL. In Preferences → Advanced Settings…
If step 3 does not work, Chrome may have blacklisted your GPU. Go to chrome://flags → Enable the “Override software rendering list” flag.
Set ‘Downloads’ to a folder you specify. This lets you rename the file, create folders, and switch the export folder. In Preferences → General…
Update to the latest browser. Go to “About Firefox”
The browser should install the latest version and restart itself afterward.
Pinch-and-zoom support is not yet supported by Firefox. Ctrl+Mousewheel does work.
Safari is updated via macOS updates, or via a preview release program found at https://developer.apple.com/safari/technology-preview/
Export single files, since zip files auto-open and fail.
Exporting to a correct filename was broken in Edge updates. Works in Internet Explorer.
Figma can display fonts on your local computer on macOS and Windows. Figma supplies a font helper service that connects the browser to the local Fonts folder on your computer.
If you need assistance, or have questions along the way, email support@figma.com. We’re here to help!