Before you Start
Who can use this feature
Users on any plan can use this functionality
Users with Edit access to a File can set up files for developer handoff
Users with View access to a File can only access the Code panel and the layers list
While handing off designs to developers frequently happens after a major project milestone, here are some things you can do earlier in the design process to set up your files to improve handoff.
Want to learn how other companies are approaching Developer Handoff? Check out our blog post: A Guide to Developer Handoff.
Set up Files for Collaboration
There are lots of different ways to collaborate in Figma. We've rounded up a few tips that we've used ourselves, or seen in action.
- Right-click any Frame and set a Custom Thumbnail so you can identify Files at a glance. The Thumbnail can also include information such as the Project's current status.
- Link to Figma Design Files in your project specification documents or project plans.
- Create "Sticky note" Components and add them to the canvas to explain or draw attention to design decisions.
- Apply Export Settings to Frames, Components and Assets your Developers may need to export for the final production build.
- Name Pages descriptively to let others know what's ready for development.
- Create a single page with Instances of all your Components. Collaborators only have to check this page, as you make changes to your Components.
- Right click on a Component and choose Move to Page or check out the Component Page plugin.
Styles and Components
- Give Styles relevant and descriptive names.
- Add Component Documentation to your Design System. Collaborators can use Go to Master Component to learn more about how to use it.
- Name Layers and Components based on their IDs
- Add meaningful descriptions to Components:
- When and how collaborators can use them
- Any variants or states
- Accessibility and contrast guidance
Want to a bit more detail? Check out our Tips for a better developer workflow post.
Invite Collaborators to Files and Prototype
You can invite collaborators to a Prototype, or to the File itself.
Note: If you share a Prototype URL with a collaborator, they will be able to access the underlying File via the URL.
✅ Select layers from the Layers Panel or Canvas
✅ View properties of selected Layers in the Code panel
✅ Copy text content from Text objects
✅ Measure distances between objects in the Canvas
✅ Add or reply to Comments in Files and Prototypes
✅ View Prototypes in Presentation View
✅ Access Components via the Go to Main Component link
Note: You have the option to Allow Viewers to copy and share the contents of a File. If you enable this, Viewers will not be able to explore or export assets from a File.
Use the Code Panel
Editors can access both the Design or Prototype tabs in the Properties Panel. Viewers only have access to the Code tab.
The Code tab allows you to see how to express objects in code.
- Select an object to view its properties in the Code panel.
Tip! Use the Select Parent(s) keyboard shortcut to jump to a layer's parent Frame:
- Mac: Shift Return
- Windows: Shift Enter
- Choose between the following formats:
- Switch between a Code view and a Table view using the toggles:
The Code view shows you snippets of code based on the language you selected. These may serve as a useful reference while you're implementing a design. This includes:
- Names and Descriptions of any Components
- Names and Descriptions of any Styles
- View the text within a Text object
- Any alternative values available for the selected object
The Table view shows you a list of attributes for that object. This includes:
- The X and Y co-ordinates of the layer based on its position on the Canvas
- The Width (W) and Height (H) of the object
- View detailed information about Text properties e.g. Font Family, Size, Font-weight, Line-Height etc.
- A swatch and the CSS notation for any colors
Tip! When you have the Code tab open, you can quickly measure distances without using the modifier key:
- Select an Object or Layer
- Hover over nearby Objects to view the distance between them
Notes on CSS
- The CSS option only shows CSS. There is no way to export full HTML code.
- Switch to the Table view to view a list of all properties applied to a layer
- If the font-weight is set to Normal this means it uses that Font's default font-weight
- If you are missing some text attributes, check that you have the same Font installed. If not, you can Use Local Fonts with Figma Font Helper.
- We only show text styles and properties that you have applied to the entire Text object. If you have properties applied to some text (e.g. link styling), we won't show these.
- We show CSS positions in Pixels. To show these as a Percentage of the viewport, you can apply Scale constraints to your objects.
Notes on iOS
- We only display colors in RGBa format. This is because iOS uses UIcolor which is based on RGBA values. This results in an 8 hexadecimal value, where the last two values represent the color's Opacity (a).
- Our Frame Presets and iOS code are set in Points, not Pixels. This allows you to create assets for screens at multiple Pixel Densities. While you can't access these variations in the Code panel, you can export any asset at a density of 1x, 2x and/or 3x.
Notes on Android
- We use the ARGB color profile for Android Code. This results in an 8 hexadecimal value, instead of the usual 6. The first two hexadecimals will refer to the color's Opacity (A).
- Our Android Code output takes into account the recommended 24dp height of the status bar.
We've made copying Text as a Viewer quick and easy.
- Select the Text Layer (in the Layers Panel or Canvas)
- Copy the text using the keyboard shortcut
- Mac: ⌘ Command C
- Windows: Ctrl C
- You can now Paste the text anywhere.
You - or a collaborator - may need to export your designs as part of the development process. We support the following export formats:
To export your assets from Figma you need to:
- Make your Selection
- Apply Export Settings to your Selection
- Export your Current Selection from the Properties Panel
- Export all Assets from the Export List
To speed up the process for developers or engineers, you can do the first two steps yourself. This will add all those assets to your Export List. The developer/engineer can then export all those assets at once via the Export List.
You can access your Export list from a few places:
- Go to the Menu (☰) and Search for the Export setting.
- Go to the Menu (☰), select File and then Export from the options.
- Use the Keyboard shortcuts to open the Export list
- Mac: Shift - ⌘ Command - E
- Windows: Shift + Ctrl + E
Learn more about using the Export List in our Getting Started with Exports article.
Note: You can also add your own Export settings, on top of the original settings added by the designer. We won't update these for other Viewers or Editors on the File.