Overview
UI Layout in Play follows a structured layout like SwiftUI or HTML/CSS. It’s very similar to auto layout in Figma, which makes the import process much easier when users design with auto layout.
We've created this Figma file with step by step instructions on importing from Figma to Play.
Using Auto Layout
Figma frames with auto layout applied will import correctly as H stack and V stacks in Play. Using auto layout allows imported designs to look, behave, and export better.
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.
Making Designs Responsive
When a full width parent frame with auto layout applied is imported into Play, setting its width to "Fill" will make your prototype responsive across all iPhone sizes.
Designs without Auto Layout
Frames without auto layout import as Z stacks, with each child pinned to an absolute position. This causes issues with responsiveness across iPhone sizes and easy editing in Play.
Components
Components in Figma will not automatically become components in Play. For now, you’ll need to turn the imported object into a component in Play by clicking the pink cube icon.
Once your components are in Play, you can add multiple states, create interactions, and use the components to design directly in Play
Pages
When you paste full page frames from Figma into Play, each must be dragged onto a different page in Play. You can create new pages and find existing ones in Play's Pages tab. This is necessary as you cannot connect a prototype from frames on the canvas in Play.
Make sure to set each page's width to Fill and turn the top/bottom safe area off in Play if you’re pasting a full page design.
Once your designs are places on different pages, you can easily connect them for a smooth prototype.