At Figma, collaboration is king! Reducing friction during the handoff process is critical.
When you're designing in Figma, you will see 3 tabs at the top of the Properties Panel: Design, Prototype, and Code. Anyone with edit permissions will see all three tabs.
Every Figma file has Code Mode where developers can inspect design files.
When you share view-only files with your developers, they will have access to Code Mode where they can inspect, comment, and export without having full edit access to the files. Please note, they'll need to sign in to Figma or create a new Figma account to access these features.
The Layers Panel is visible in code mode, but it can't be edited. This is great for teams with unique naming conventions for layers that developers need to be aware of.
In this view there is a drop down menu to view CSS, iOS (Swift), and Android (XML).
There is also a button to toggle between table view and code view
Code view shows developers snippets of generated code that may serve as a useful reference while they're implementing the design.
In code mode developers have access to:
- Click on objects to view fill and stroke colors, formatted to the target platform
- If designers name the colors in the team color palette, developers will see this in addition to the RGBA color codes
- View the font family, style, and size
- Line height will be accurately reflected in pixels
- Click to select an object, then hover over nearby objects to view distances with redlines
- In code mode there's no need to use a modifier key
- Developers can either export all the assets in the file, or click on objects and export them one by one
- In addition to export settings that have been added by the designer, developers can also add their own exports settings in this view-only mode.
However, if the file is reloaded, the export setting will not remain. The designer will not see any extra export settings developers may add for themselves since those are not reflected in the actual design file.
Check out our Developer Handoff video to see this feature in action!