Overview
Play makes it easy to copy your designs in Figma and paste them directly into Play.
Other than the pen tool, Play has everything you need to design from scratch. However, many teams have a design system and/or some initial designs in Figma which can provide a starting point for continued design work or prototyping in Play.
We've created this Figma file with step by step instructions on importing from Figma to Play.
Authorizing Figma within Play
You'll first need to authorize your Figma account within Play. The first time you paste something from Figma into Play, a pop up will appear prompting you to enter your Figma credentials. Once you've successfully authenticated your account, Play will finish pasting your design.
You can also authenticate your account by clicking from the Import from Figma button in the in-app help center (CMD+H).
Importing Designs from Figma
You can then copy any object from Figma and paste it directly into your project in Play. We focus on ensuring designs come into Play looking exactly 1:1 with how they do in Figma.
The Golden Rules
Following these three best practices will make your import process much easier.
Use Auto Layout in Figma before importing
Set the parent-most object’s width to “Fill” in Play
Make text editable in Play.
Importing Assets from Figma
Images and SVGs behave differently in Play (and Swift!) then they do in Figma. Learn more about best practices for importing assets.
Importing Text from Figma
Text is imported as an image layer called "Figma Text" which can be turned into a text element in Play. Learn more about best practices for importing text.
Importing UI from Figma
Layout in Play follows a structured layout like SwiftUI or auto layout in Figma. Learn more about best practices for importing UI.
Considerations
General Best Practices
Don’t paste your whole file at once. Our copy & paste functionality works quite fast but there will be a lag when you paste a significant number of objects at once. We recommend moving sections of your Figma file over as you need them, rather than copying the whole file at once. This will shorten your wait time and remove the potential for errors.
Wait until the import has finished before closing a project. Images are pasted from Figma and added to your assets panel, but they can appear in your design before they’re fully finished uploading giving the impression that the import is complete. If you try to close your project before the import is complete, a popup will appear letting you know.
Troubleshooting
If you see an error when you’re importing a frame that uses auto layout, there’s an easy solution. Right-click on the frame in Figma and select “Copy Link to Selection.” Then paste that link anywhere in Play, and the frame will import successfully.
Coming soon!
We're continuously making improvements to our Figma import functionality. In future releases, we plan to add the following features which are not supported today.
Auto-replace objects imported from Figma with native elements in Play (Tab Bar, Maps, Input Text, etc.)
Gradient Fill: Frames with gradient fill currently come into Play as a PNG.
Wrap Frames: Wrap Frames currently come into Play as Z stacks with children positioned absolutely.
Left & Right, Top & Bottom, and Scale Positioning
Auto Layout Advanced Settings: Stroke, align text to baseline, and canvas stacking.
Layout Grid
Full Figma project import from a Figma file URL (likely in the form of a Figma plugin)
Updating a Shared Library between a Figma file and a Play file
Questions or Comments
We have created this phased rollout with valuable input from our users…thank you for all of your feedback! If you have any comments or questions, please don’t hesitate to email us at [email protected].