1. Figma Basics

2. Drawing

3. Text

4. Inspector

5. Import

6. Export

7. Version History

8. Comments

9. File Browser

10. Permissions

11. Troubleshooting

12. Contact Support

  1. Figma Basics
  2. 1.1 Canvas

    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.”

    1.2 Layers Panel

    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.

    1.3 Inspector

    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.

    1.4 File Browser

    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:

    • Show in Project: takes you to the original location of the project if being viewed in Recent Files
    • Open: Opens the file so you can view its contents, edit, and export
    • Share: Opens a window that allows you to share via email or via a link
    • Rename: Changes the name of the file
    • Duplicate: Creates an exact copy of the file in the same location or in one of your projects if it is a shared file
    • Delete: moves the project to the Deleted Files view in the sidebar

    1.5 Keyboard Shortcuts

    File & Properties

    • Export: + + E
    • Save: + S
    • Place: + + K
    • Color Picker: ^ + C or i
    • Enter Image Crop Mode: + double-click

    View

    • Pan: + drag
    • Zoom In: +
    • Zoom Out:
    • Zoom to Fit: 1 or 9
    • Zoom to Selection: 2
    • Zoom 100%: 0
    • Show Rulers: + R
    • Pixel Preview: + P
    • Show Layout Grids: + G
    • Show Layers Panel: + + \
    • Show Figma UI: + \
    • Show Pixel Grid: + '
    • Show Transparency Checkerboard: + + '
    • Outline Mode: + Y or + + 3

    Vector

    • Move Tool: V
    • Pen Tool: P
    • Paint Bucket: B
    • Bend Tool: + drag
    • Join Selection: + J
    • Duplicate: + drag
    • Exit Vector Edit Mode: Esc or Return

    Text

    • Type Tool: T
    • Toggle Underline: + U
    • Toggle Italic: + i
    • Toggle Bold: + B

    Object

    • Move Tool: V
    • Pen Tool: P
    • Rectangle Tool: R
    • Ellipse Tool: O
    • Line Tool: L
    • Frame Tool: A or F
    • Slice Tool: S
    • Copy: + C
    • Cut: + X
    • Paste: + V
    • Duplicate: + D or + drag
    • Group Selection: + G
    • Ungroup Selection: + + G
    • Toggle Visibility: + + H
    • Toggle Lock: + + L
    • Flatten Selection: + E
    • Outline Stroke: + + O
    • Toggle Mask: + + M

  3. Drawing
  4. 2.1 Vector Networks

    Vector 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.

    Creating

    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.

    Editing

    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.

    Bézier Curves

    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.

    Rounded Corners

    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

    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:

    • None (default): No cap is applied. The terminal point is the end of the path.
    • Square: A cap half the stroke width is applied and the corners are square.
    • Round: A cap half the stroke width is applied and the corners are rounded to 50%.
    • Line Arrow: Two 45-degree line segments are applied to either side of the terminal point(s) with the same stroke width as the path.
    • Triangle Arrow: An equilateral triangle is applied to the terminal point(s).

    Check out this video tutorial to see Vector Networks in action. And be sure to read “Introducing Vector Networks” on our Medium page.

    2.2 Groups and Frames

    Groups and Frames allow you to combine layers together so that they can be treated like a single layer.

    Groups

    By default, groups take on the combined dimensions of their children.

    • To make a group, select some layers and choose “Group” ( + G).
    • The first time you click on a layer in this group, the entire group will be selected.
    • To select a single layer within this group, double-click the item, or choose it from the layers panel.
    • As the layers within a group are moved around, the bounds of the group will adjust to fit the layers within.
    • You can move things into and out of this group by dragging layers within the layers panel.
    • You are allowed to nest groups inside other groups.
    • To un-group, select the group and choose “Ungroup” ( + + G).

    Frames

    Sometimes, it is useful to have a layer whose size is explicitly set by you. These are called Frames.

    • To make a frame, choose the Frame Tool (F) and drag out an area of the screen.
    • To add layers to this group, just drag them in.
    • To remove layers from this group, just drag them out.
    • Selecting and moving items within a Frame works exactly the same way as groups.
    • To un-group, select the group and choose “Ungroup” ( + + 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.

    2.3 Boolean Operations

    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.

    • Union: Union combines the selected shapes into a boolean group. If the objects overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other.
    • Subtract: Subtract is the opposite of Union. Subtract removes the area of a shape or set of shapes from a base shape. Only the bottom shape layer is solid, the rest are subtracted from it.
    • Intersect: Intersect creates a boolean group whose shape consists only of the overlapping parts of its sublayers.
    • Exclude: Exclude is the opposite of Intersect. Exclude shows only the areas of its sublayers that do not overlap.

    2.4 Masks

    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.

    2.5 Components

    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.

    Using Components

    Creating a Component

    Select any layer, group, or frame and click “Create Component” or opt+cmd+k to convert it into a component.

    Creating an Instance

    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.

    Find Component

    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

    “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

    “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.

    2.6 Team Libraries

    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.

    Publishing to your Team Library

    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:

    • About to be added to the library (when the Component is currently not in the library),
    • About to be updated in the library, or
    • About to be removed from the library

    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.

    Using Instances of Shared Components

    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:

    • Dismiss the notification and take care of updates later by visiting the Team Library through the toolbar, or
    • Click “Review…” in the notification to see available updates right away

    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:

    • Talk with the person who published it (the publishers name will be listed with the update), or
    • Choose not to update your instances

    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.

  5. Text
  6. 3.1 Overview

    Figma supports a variety of text features:

    • Line height
    • Letterspacing
    • Paragraph spacing
    • Paragraph indent
    • Vertical and horizontal alignment
    • Text transforms (e.g. uppercase)
    • Text decorations (e.g. underline)

    3.2 Creating

    To create text objects, select the Text tool (T) and then…

    • click on the canvas to create an auto-resizing text object
    • click and drag on the canvas to create a fixed size text object

    3.3 Editing and Styles

    You can change properties of the text object (e.g. font face or line height) in two ways:

    • Select one or more text objects and change the property to apply it to all characters in the selected text objects
    • Double-click on a text object to enter text edit mode. Once there, you can select a subset of the text either using your cursor (click and drag) or the keyboard (e.g. 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.

    3.4 Auto-resizing

    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:

    • Width: The width automatically adjusts to fit all content.
    • Height: The height automatically adjusts to fit all content. Lines are wrapped to fit within the width.
    • Fixed: The width and height stay put. Lines are wrapped, but overflowing lines are currently not clipped.

    3.5 OpenType Features

    The following font features are enabled by default:

    • Kerning (kern)
    • Ligatures (liga, clig, rlig)
    • Contextual Alternates (calt, rclt)
    • ccmp, curs, locl, mark, mkmk

    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.

  7. Inspector
  8. 4.1 Position & Dimensions

    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.

    4.2 Constraints

    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.

    • To set the horizontal constraint for an item, select it and click on the first menu in the “Constraints” section.
      • Left: the left side of the object will stay fixed to the left side of the frame.
      • Right: the right side of the object will stay fixed to the right side of the frame.
      • Left and Right: the object will stretch horizontally so that both the left and right sides remain fixed to the containing frame.
      • Center: the object will remain in the same position relative to the center as the frame is resized.
    • To set the vertical constraint for items, select it and click on the second menu in the “Constraints” section.
    • Alternatively, you can click on various parts of the diagram () to the left of these menus to change the constraints on this item.

    Constraints only take effect inside frames.

    4.3 Layout Grids

    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.

    • To add a grid to a frame, select it, then click the plus button in the Layout Grid section of the Inspector. You may add as many grids to a frame as you want.
    • To change the grid settings, click the plus icon in the Layout Grid section.
      • Choose “Rows” or “Columns” to change the grid orientation from horizontal to vertical.
      • By default, grids stretch as the frame stretches. To change this behavior, change its type to “left” or “Center” (“Top” or “Center” for horizontal grids)
      • Non-stretchy grids also allow you to choose the width/height of your grid columns/rows.
    • To show and hide a particular grid, click the Eyeball icon next to the grid settings in the Inspector.
    • To toggle the visibility of all grids in your entire document, choose “Show Layout Grids” (ctrl + G)

    Grids are only available for frames.

    4.4 Layout Grids and Constraints

    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.

    • When working with stretchy grids, constraints are always based off of the nearest grid column or row. For example, if you set a “left and right” constraint on an item that lives inside a stretchy grid, its left and right coordinates will change as the grid column grows and shrinks.
    • When working with non-stretchy grids, we currently assume that your layout grid is more important than your constraint. In other words, if you align your items to a center grid, we will move those items to remain pinned to that centered grid, and ignore any constraint settings you may have on that item. NOTE: this behavior may change in the future.

    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.

    4.5 Paints

    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.

    • Solid: A solid color is applied and orientation doesn’t matter.
    • Linear: A linear gradient where the size, direction, and stop order are editable in the Canvas and the paint picker.
    • Radial: A radial gradient where the shape, size, direction, and stop order are editable in the Canvas and in the paint picker.
    • Angular: An angular gradient where the shape, size, direction, and stop order are editable in the Canvas and in the paint picker.
    • Diamond: A diamond gradient where the shape, size, direction, and stop order are editable in the Canvas and in the paint picker.
    • Image: An image paint is masked to the fill or stroke shape respectively. The default mapping is Stretch, or Fill when the image is first loaded. Image cropping is also supported.

    4.6 Effects

    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.

    • Drop shadows can also be efficiently applied to a group and layer under the group as a whole instead of each individual shape.
    • Set a blur size of 0 to create a hard shadow of the shape.
    • Create an outer glow with an offset of 0 and set blend to Screen.

    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.

    • Like drop shadows, inner shadows can be applied to groups.
    • Create an inner glow with an offset of 0 and set blend to Screen.

    Layer Blur: this blurs a given layer geometry.

    • Blurs of large numbers of pixels can contribute to performance issues.

    Background Blur: this blurs the geometry of all geometry underneath the bounds of the layer with the blur.

    • Blurs of large numbers of pixels can contribute to performance issues.
    • To see the background blur, make sure to set the fill paint opacity much less than 100%. Opacity can be set as low as 1% to see all background blur.

    4.6.1 Effect Render Order

    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.

    Layers

    • Layer Blur (top)
    • Stroke Paints
    • Inner Shadow
    • Fill Paints
    • Drop Shadow
    • Background Blur (bottom)

    Groups

    • Layer Blur (top)
    • Inner Shadow (of Group children)
      • For all Group Children
      • Fill and Stroke Paints, Masks, and Effects
      • Render Background Fill (if enabled and/or exported)
    • Drop Shadow (of Group children and Background Fill)
    • Background Blur (bottom)

    4.7 Pixel Preview

    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.

  9. Import
  10. 5.1 Images

    Images can be brought in from a variety of image sources, and each browser supports a unique set of formats.

    • Some images are decoded and converted so metadata is not preserved.
    • Large images are reduced to fall below 4096 pixels on a side.
      • A 6000x1000 image is reduced to a stored 3000x500 image.
    • Commonly supported formats include PNG, JPEG, GIF.
    • Browser-specific formats include TIFF, WEBP, and others.

    5.2 Vectors

    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.

    • All vector formats are complex and lossy depending on the quality of conversions done by the importer and exporter and settings used.
    • Sketch import is the best transfer of vector data.
    • Sketch Symbols convert to Figma Components.
    • SVG import handles SVG content generated by a variety of design tools.
    • SVG Symbol, marker, and clipPath elements are not yet imported

    5.3 Transfer

    Files can be dropped into the File Browser or Editor in Figma to import them.

    • The File Browser supports FIG, SKETCH, PNG, JPG, and GIF file import.
    • The Editor supports SVG, PNG, JPG, and GIF file import.

    Figma also imports with high quality via copy-paste to the Editor.

    • “Copy” in Illustrator → “Paste” in Figma
    • “Copy As SVG” in Sketch → “Paste” in Figma
    • “Copy” in Figma → “Paste” in Figma (works across tabs too)

  11. Export
  12. 6.1 Overview

    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.

    • Contents Only (on all)
      • Checked: exports only the current child layers
      • Unchecked: exports all layers that intersect the layer or group boundary
    • Enable Background Color (on Groups)
    • Include Background In Export (on Groups)
      • Unchecked: group background color if enabled will not be exported

    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.

    • SVG: v1.1, XML vector data with fills/strokes, effects, masks, and images
      • Strokes are converted to fills on export.
      • Text is written out as glyphs so the font is not needed.
      • Angular and Diamond Gradient export as a Radial Gradient.
      • Background Blur is not exported.
      • Images are embedded/copied into the SVG.
    • PNG: v1.2, 32-bit RGBA, zlib-based compression
    • JPG: 24-bit YCbCr @ 4:4:4 quality, no quantization

    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:

    • Click on the thumbnail and the viewport will jump to that layer on the canvas.
    • Hover over the thumbnail to get the filename exported.
    • Checkboxes control layer export from the picker. These are remembered only for the current session and are not shared with other viewers.

    • Hover over the warning sign to get more detail about export warnings.
      • Unaligned origin: export bounds can end up larger due to rounding for example: layer position 0.5,0 and size 100x100 → 101x100 export bound layer position 0,0 and size 100x100 → 100x100 export bounds
      • Duplicate name: name will change to unique name based on current selection
      • Maximum image size exceeded: image will be scaled down by half until it fits
        • for example: 40000x1000 → 20000x500

    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.

    6.3 Transfer

    • “Copy as SVG” in Figma → “Paste” in Adobe XD
    • “Copy as SVG” in Figma → “Paste” in Affinity Designer

    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.

    • Export to SVG in Figma → Open SVG in Browser →
      • Print → PDF → Save As PDF
      • Print → PDF → Save As Postscript

  13. Version History
  14. 7.1 Overview

    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.

    7.2 Viewing Checkpoints

    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.

    7.3 Restoring Checkpoints

    Clicking a specific version will show that design and reveal the option to restore that version or duplicate it in the toolbar.

  15. Comments
  16. 8.1 Overview

    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.

    8.2 Commenting

    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.

    8.3 Replying

    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.

    8.4 Comment List

    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.

  17. File Browser
  18. 9.1 Overview

    The File Browser helps you organize your files and projects.

    The browser has multiple sections:

    • Recently Viewed
    • Deleted Files
    • Personal Space
    • Teams

    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.

    9.2 Recently Viewed

    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.

    9.3 File Deletion

    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.

    9.4 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.

    9.5 Personal Space

    Your Personal Space contains your projects and drafts. You can share projects and/or individual files with others.

    9.6 Projects

    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.

    9.7 Shared Projects

    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.

  19. Permissions
  20. 10.1 Overview

    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.

    10.2 Teams

    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

    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

    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

    Editors can invite and change permissions for other Editors and Viewers. They cannot Authorize with Slack or alter Admin or Owner permissions.

    Viewers

    Viewers can invite others to view a file. They cannot change anyone’s permissions or authorize with Slack.

    10.3 Files

    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:

    1. Open the file
    2. Click Share in the upper right
    3. Select Enable public access
    4. Change Can edit to Can view

    View Only provides several useful features for developer handoff:

    • Select elements to see their dimensions.
    • Click an element, hold the Option key, and hover your cursor over other elements to reveal redline distances.
    • The Pick Color shortcut (or type “i”) reveals the eye dropper and saves a hex color to the clipboard.
    • Export elements that have export settings by selecting the elements and clicking the export icon in the upper right corner. You will only be able to export elements that have already been given specific export settings.
    • With the canvas selected, when you click the export icon (Command + Shift + E if you’re on Mac, Control + Shift + E on Windows), you will have the option to enable, or disable, individual exports.

    View Only also works with the Figma Mirror App and Presentation Mode. With the View Only file open on your computer:

    1. Select a frame on the canvas
    2. Open the Mirror App on your mobile device
    3. Press “N” or “Shift + N” to cycle through top-level frames on the canvas

    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.

    10.4 Creating Teams

    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.

  21. Troubleshooting
  22. 11.1 Setup

    For the best Figma experience, we recommend the following setup:

    1. Check your browser zoom level is set to View → “Actual Size”. Setting your zoom will ensure that your document accurately displays at high resolution.
    2. Test WebGL is supported and enabled in your browser. This can be done by going to http://webglreport.com/.

    Configure macOS

    1. Disable the left/right swipe gesture that scrolls left right to avoid accidentally exiting the Figma document while you are panning the canvas.

    Configure Chrome

    1. Update to the latest browser. Go to “About Google Chrome” → About. The browser should install the latest version and then have it restart.

    2. 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…

    3. 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…

    4. If step 3 does not work, Chrome may have blacklisted your GPU. Go to chrome://flags → Enable the “Override software rendering list” flag.

    Configure Firefox

    1. Set ‘Downloads’ to a folder you specify. This lets you rename the file, create folders, and switch the export folder. In Preferences → General…

    2. 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.

    Configure Safari

    Safari is updated via macOS updates, or via a preview release program found at https://developer.apple.com/safari/technology-preview/

    1. Update to 10.11.4 El Capitan for pinch-and-zoom gesture support. Copy-pasting images and SVG is not yet supported by Safari. Exports cannot save out to a local filename, and auto-open.

    Export single files, since zip files auto-open and fail.

    Configure Edge

    1. Setup “ask me where to download” option in Settings → Advanced Settings

    Exporting to a correct filename was broken in Edge updates. Works in Internet Explorer.

    11.2 Local Fonts

    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.

  23. Contact Support
  24. If you need assistance, or have questions along the way, email support@figma.com. We’re here to help!