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.
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
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 image. If you have multiple vectors in one frame with Auto Layout, we’ll bring that frame in as a stack.
All images, shapes, text elements, and any frame with a gradient fill will come into Play as PNGs for the time being. Read more below on what is not currently supported but will be coming soon (anchor tag).
Text elements will come over as Figma Text, which can be replaced with a Play text element by clicking the "Make Editable" button.
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!
SVG Import: Once we have SVG elements in Play (coming soon!), we’ll import shapes from Figma as SVGs. Play’s SVGs will be scalable and exportable.
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].