You can easily copy your designs in Figma and paste them directly into Play! While you can design from scratch in Play, if you have your design system or some initial designs in Figma, this feature will make it much easier for you to get those designs into Play and continue your work.
How it works
To move your Figma designs into Play, you first need to authorize your Figma account through the Figma button in the top right corner on Play for macOS. You can then copy any object from Figma and paste it directly into your project in Play. If you paste Figma objects without first signing in, you’ll be prompted to do so, then Play will finish pasting your design.
We focused on ensuring designs come into Play looking exactly 1:1 with how they do in Figma.
Note: this video is slightly out of date
What is supported today
We will be rolling out updates to the Figma import feature with every new release of Play. Here is what is supported in this initial launch:
Copying objects, groups of objects, and sections from Figma into Play. Auto Layout will be respected through V & H stacks in Play.
Any objects pinned in an Auto Layout stack in Figma will be offset from the correct grid position.
Objects with “Hug” size in Figma will import as “Auto” in Play, except text, images, and SVGs which will come in as fixed point values.
Objects with “Fill Container” size in Figma will import as “Fill” in Play.
Any objects with more than 0% corner smoothing will use continuous corners in Play.
Text elements will come over as Figma Text, which can be replaced with a Play text element by clicking the "Make Editable" button.
Images will come over as PNGs.
SVGs will come over as an SVG element.
If you have multiple vectors in one frame that does not use Auto Layout, we will assume this is a full SVG and import the full frame as an SVG. If you have multiple vectors in one frame with Auto Layout, we’ll bring that frame in as a stack.
Frames with a gradient fill will come into Play as PNGs for the time being.
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.
What is NOT supported today (coming soon!)
Here is a list of what we’re adding in the future. The higher on the list a feature is, the sooner we expect it to be released!
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 support will come eventually.
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].