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.

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.

Fast, seamless imports from Figma directly to your phone where you can continue designing.

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.

Designing in Play using components and styles created in Figma.

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.

Once you see your design on your phone, things like spacing, size and type can easily be changed in Play.

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.

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.

A native Text Field being created in Play.

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.

A native Picker being used to create a city selection on this login page.

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.

Play supports video and full video controls. In this example, we combine Play’s Scroll Start trigger with Set State to create a smooth animation.

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.

Play let’s you customize Scroll Effects like cover flow, fade, scale, and pile. Simply choose the effect with the slider, experience it, and make changes in real-time.

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.

Variables 1.0 will be rolling out in Play’s next release (v0.9.5)

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.

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!

Play helps teams design, build and share powerful mobile products — directly from their mobile device.