Overview
Because Play is built to be 1 to 1 with code, images and SVGs behave differently then they do in Figma. Here are a few tips to get the best results when copying your assets into Play.
We've created this Figma file with step by step instructions on importing from Figma to Play.
Images
Rectangles
Rectangles with image fills will paste into Play as an image element. Play respects the aspect ratios like Fill & Fit.
Frames
Frames with image fills will paste into Play as a stack with an image inside. If there are multiple layers (like an image and a color), it will paste into Play as multiple layers in a stack.
Want to paste into Play as a single image? You have two options:
1. Copy as a PNG in Figma (CMD + Shift + C) to paste as a single image.
2. Export the selection from Figma and upload to Play.
Cropping and Masks
Using the ‘Crop’ setting on images, or masking a layer, is currently not supported in Play.
Just like with frames above, we recommend either:
Copy as a PNG in Figma (CMD + Shift + C) to paste as a single image.
Export the selection from Figma and upload to Play.
SVGs
All vector paths in a frame or group will flatten when imported into Play. Including any background fills.
Each SVG in the image below will be a single layer in Play.
Why are SVGs in Play sometimes blurry?
Figma is a vector tool, which means SVGs appear crisp at any level of zoom. Think of Play as you would a production tool. Play treats SVGs like any other asset in Swift. Which means zooming in beyond 100% of the asset’s size will cause some blur.
We recommend you ensure the SVGs you copy from Figma are the size you will use in production.