Using Play with Figma
Want to do more than just mirror your Figma designs on mobile? With Play’s new Figma import, you can edit your designs, add advanced interactions, and take advantage of native iOS features—directly from your phone.
Play is the only design tool purpose-built for creating mobile products. We recently updated our Figma import feature, which lets you import your Figma components, styles and full pages directly into Play where you can continue designing and incorporate other powerful features Play has to offer.
In this article we’ll talk about how the import feature works and how you can use it in your workflow.
Importing your Figma file into Play
When you import from Figma we’ll convert your Figma file’s components into components in Play. Any Auto Layout choices you’ve made in Figma will be preserved through Play’s layout system, ensuring your components stay flexible and responsive. We’ll import your Figma styles as Play Foundations, giving you the same shared definitions for colors and typography.
You can also import iOS device-sized Frames from Figma as Pages in Play. If your project includes Frames with common iOS device widths (and at least the device’s minimum height) they’ll be brought in as Pages in your Play project. If the Frame is taller than the device’s height, it will scroll automatically.
Creating in Play with your Figma Design System
If you have an existing design system built in Figma, it can be imported into Play where you can build out pages and flows directly on your phone.
This lets you iterate on your designs and take advantage of Play’s unique features including powerful interactions and native iOS features.
Keep Designing in Play
As you explore your design on your phone, you’ll likely see things you want to change—some cards might feel bigger than you expected or certain fonts might appear too small.
In that moment, it would be ideal to make those changes and see them immediately on your device—Play makes this possible since it isn’t just a mirror app for mobile, but a fully-featured design tool.
Unlike many other design and prototyping tools, there’s no need to break your flow and return to your desktop, edit and re-sync through a mirror app. You can create and edit your designs immediately, directly on your device.
You’re also not limited to just editing your imports. You can create new components or compose new pages. You can also use your imported components together with the Play Library, a built-in collection containing dozens of customizable components based on common UI patterns.
And maybe best of all, you can extend your designs with real native elements in Play.
Play’s Native Features
One of the most powerful things about Play is the access you have to all the native features of iOS. Live Maps, Videos, Text Fields, Modals, Pickers and Calendars, Switches and Steppers, Collections…you can take advantage of all these and more in Play.
In the future, when you import your Figma file, if we find parts of your design that reference native elements — such as Text Fields, Date Pickers or Maps — we’ll convert those into their native versions in Play. You might also find grid layouts converted to Collections, a powerful data-backed virtual list available in Play.
Things like input text for login fields are very common but a big headache to “make real” in other tools. Play takes advantage of the native iOS Text Field, which lets you customize things like keyboard type and set options like Auto Correct and Password Fields.
Native Pickers are another useful element you can add in Play. You’re able to sync with a data source, customize each Picker’s appearance and choose a text field to show each selection made by the user.
Native Gestures for Interactions
One of the best reasons to import your designs from Figma into Play is to take advantage of Play’s advanced interactions.
As we’re building out the dev-handoff features of Play, many users are taking advantage of Play’s powerful interaction system to create “realistic prototypes.”
While other tools try to “get close to the real thing” with their prototyping capabilities, there is nothing to simulate in Play — your product is rendered with the same technology as a finished native iOS app.
If you’ve hit the limits of prototyping in your main design tool, you’ll enjoy the expanded possibilities in Play. If you’ve struggled with other prototyping tools that can only try to simulate native apps, you’ll love the performance boost of what Play lets you create. And if you’re planning to conduct a test with users, you’ll be able to test an experience indistinguishable from a real product.
Designing in Play is all about experience, feedback, and iteration. Set triggers for taps, pans, scrolls or drags. Fire actions that transition between pages. Animate elements or properties, scroll to positions, transition between component states and more. Experience your work in Play Mode with the same look, feel and performance of a native app — then dive back into the design, dialing in your decisions until they’re just right.
Want to go deeper? With Play’s variables, you can create forms, validate inputs, and adjust content based on interactions, all from your mobile device and without touching any code.
Share what You’ve Made
With Play, sharing your work is as easy as sending a link to a friend, colleague, or client. They’ll be able to jump straight into your project on their own device. In coming releases, we’ll be expanding our share features to let you discover projects by other users and share your projects with the wider Play community.
Try Play Today
If you’re designing for iOS, you should try designing with Play. And if you’re designing in Figma, then getting started is easier than ever thanks to our new Figma import.
To learn more about importing from Figma, check out our recent webinar where you can see Play in action.
We’re currently in Private Beta and releasing keys every week. If you’re interested in signing up, check out our website and follow us on Twitter for product updates!
