The core UI of Play is created with the slider becoming a key element of our interface.
Design Foundation is incorporated, which empowers you to create and update primitives like type, color and spacing. If you update any primitives in your Design Foundation, those changes will be reflected everywhere in your project.
Stacks are launched! Stacks are a foundational Container used in Play. They give you a lot of control over how objects are positioned with different alignment, distribution and gap spacing properties. Stacks can be horizontal or vertical, support scrolling and can also be nested inside one another, which gives you the ability to create powerful and dynamic layouts.
Basic Interactions are launched, supporting go to page and go back (pan), enabling you to link pages together and create simple product flows.
Our big layout refactor is incorporated, now optimized to have over 100 views on one page and maintaining lightning speed performance! With this update, we based our layout system on the Box model, so those familiar with this, or CSS, will have no problem picking up Play's layout system very quickly.
Effects like drop shadows, inner shadows and optimized, native background blur as well as Borders are integrated! You'll also have the ability to stack Effects and Borders and save them to create a Style, which can then be applied throughout your product.
The first version of Components are incorporated. You can now easily convert an Element, or nested group of Elements, into a Component. Master Components will be added to your Component panel in The Library. Whenever you make a change to a Component, it will change anywhere you are using an Instance of that Component in your product. You also have the ability to perform overrides on any Instances of a Component (and decide to apply any of those overrides to the Master Component as well).
Basic versions of Maps and Video Elements are integrated. You can easily add stock videos through our integration with Pexels.
The Play Library is incorporated! The Play Library is a set of pre-built Elements and Components that you can use to give your project a jump start. These are fully customizable with options including Avatars, Buttons, Cards, Dividers, Headers, Rows, Tab Bars, Text Blocks, Videos.
Support for Components with multiple states. This sets the foundation for the next rollout of Interactions, where we will support state-based interactions using different gestures (e.g. tap, pan) as triggers.
Interactions v1.0 is a powerful update enabling you to add interactivity and animation using native gestures like pan, drag and multiple scroll triggers. With Interactions, you can now add these sophisicated native gestures and interactivity to your product without needing to write any code. In this update we have also included performance enhancements and have added in support for Google fonts.
We have refactored our layout system making it more optimized and adding in more advanced features like Grow. We have also added a new Element—SVG—along with integration with the Noun Project, giving you access to thousands of free SVG’s to use in your project.
The Play Library is a powerful way to give your project a jump-start. We've upgraded the Play Library to be made up of all Components—complete with Interactions integrated! We’ve also added new features tapping into the iOS framework, like adding native modals to your project and controlling the status bar.
The new Navigator has new scrolling functionality and supports drag and drop functionality as another method to moving objects around on your page. It also includes the ability to search and sort objects by their type and enables you to do things like rename, duplicate and delete directly from the Navigator panel.
You can now Undo and Redo any action in your session and also bring up a history panel of every action in your session.
We’ve added new Help menus throughout Play—in all the main menu panels as well as on each slider. Each Help menu will give you the option to watch a Help video or read support documentation.
We have added more Interactions including Page Enter & Exit, Set State and Set Scroll Cycle and Child Event Listener as well as the ability to copy and paste Interactions from one object to another.
First version of Figma Import is released! You can import your Figma components and styles into Play and continue to edit your designs and add interactivity directly from your phone.
You can now share out links for other people to view what you've created in Play! While we are in Private Beta, Shared Links will work with anyone else who is in the Beta. Once we launch Play in the App Store, anyone will be able to easily view your work through the Play app.
Collections are a way to tap into iOS' UICollectionView. They are a foundational building block of almost every mobile product and now you have the power to create with them in Play! Collections provide a way to create lists or grids in your layouts when you want to repeat a high quantity of objects or pattern of objects. You can also connect data to Collections. The structure of your design will generate a data model. This feature lays the groundwork for being able to integrate with external JSON files in the future.
Page Layouts are a way to go from an idea or sketch to an interactive product really quickly. Instead of starting from a blank page, you have the option to select from dozens of different Page Layouts. These Page Layouts are based on some of the more common UI patterns we see in product design and behave just as if you had made the content yourself—you are free to edit, add, and delete elements, or wire up interactions between elements and pages.
You can now add powerful Scroll Effects with one tap! You can choose from Scale, Fade, Fade & Scale, Cover Flow, Inverted Cover Flow, Pile and Perspective. Each of these can be fully customized as well.
With our new Play Web Dashboard, you can now upload your images, SVGs and custom fonts from your desktop!
New Native Elements have been added including Input Text Field, Date Picker, Stepper, Picker, Switch, Webview, and Color Well. We will continue to add to these in the future!
New Actions have been added including Set Text, Set Image and Set Video as well as full AV Player controls.
We also added a Quick Selector at the top of the Editor panel to easily cycle through all the objects on the page.
With our updated Figma Import feature, you can now import components, styles (color & type) and full pages from Figma! You can select which items you want to import (or import everything). This update now has full support for SVGs as well.
New Actions specifically created for Collections have been added including Select Cell, Unselect Cell, and Scroll to Cell.
Every Component now comes with Pre-baked States—Default, Selected, Highlighted and Disabled. In addition to these Pre-baked States, you can create Custom States just like before. Pre-baked States come in handy when wanted to create things like buttons or cards where you want to have certain States already created.
Live Maps has been updated! Easily add pins to any location on your Map and connect your pins to any Collections or Stacks that contain cards. Pins are automatically connected to those cards and scroll to that position when selected. You can also set the Start Location of the Map to the user's location, pin location, or a custom location. New Map Actions have been added as well: Set Map Position, Select Pin, Unselect Pin.
You can now create and use dynamic values called variables! This is the initial version of variables, which will act as a foundation for future releases as we roll out transforms and conditions.
You can now import Lottie animations into Play! Using Lottie Actions in Play, you can control playback and animation options as well!
You can now easily incorporate native haptics into your product designs!
Create Teams and set permissions for users to enable collaboration on projects!
Create custom styles for things like borders and effects so you can reuse them throughout your designs.
This update will make the Figma Import feature faster and more optimized.
Some changes to Play's UI & UX to make designing even easier and more fun!
A great way to jump start creating projects for quick prototypes.
We'll continue to roll out new native features like AR, native UI Alerts and Actions Sheets and many more!
You'll have the ability to create shared libraries and copy / duplicate any library that someone has chosen to share with you.
Building on Shared Libraries, you will have the ability to sync any Figma library to Play, so updates to your Figma components (made in Figma) will automatically update in Play.
You will be able to create and save custom motion and easing settings to reuse throughout your project.
Building on Teams & Permissions, real-time multiplayer will allow team members to collaborate in real-time all on device. Chat and commenting functionality will roll out later as well.
With v1.0 of JSON integration, we will support the ability to connect any object, or set of objects, to a JSON file, giving you the ability to have all your content be dynamic.
We will expand the already powerful capability of Play's Interactions with Preset Actions & Special Components. This update will make it easier and faster to create things like menus, drawers, expanding cards and much more without needing to create these Interactions from scratch.
In this update to Variables, we will build on our foundation and support the addition of Transforms and Conditions.
New components for making graphs and charts easily.
While the phone is the core platform for Play, we're working on launching other platforms to complement the iOS experience!
With this update, you will be able to export your project's source code. There will be different phases of this rollout with this being the first one.
Publish your full projects or just individual components for other people to view and fork in the Play Community!
We'll expand Play's file import capabilities to include both XD and Sketch.