Play: Design Better Apps

September 22, 2024

Bug fixes: - LineHeight was not correct for some fonts - Public viewers toggle was reset when reopening the share popover - Design link was showing a project deleted alert - Nav bar was appearing with the wrong height on Sequoia

August 23, 2024

- Overall performance improvements

August 10, 2024

- Support for support for figma text auto resize behavior - Fixes crash caused by creating component thumbnail images

July 26, 2024

This update includes critical fixes to improve app stability: - Crash Fix: Resolved an issue causing crashes when selecting an element. - Sequoia Crash: Applied a potential fix for intermittent crashes on Sequoia. --- Please note, iOS17 is now the minimum iOS version we support Rive Animations - We’re bringing Rive animations to Play as an element! You can upload your own Rive file (.riv) through Play’s asset manager, customize its settings like content mode or autoplay, and add interactions. We’ve added two Rive-specific actions: Set Rive Input, which allows you to add/switch the Rive’s asset file, and Play / Pause Rive, which lets you play, stop, pause, or restart the Rive animation. Editable Text from Figma - As promised, we’ve added to our Figma Import feature. Now, when you copy and paste text from Figma, it will come into Play as a “Figma Text” element. This also works when you paste groups of elements. The contents of a Figma Text element cannot be edited, but the tint, size, and position can be. - In the Element Settings Panel, you’ll see a button that says “Make Editable.” Clicking this will turn the Figma Text into a text element in Play that is fully editable. We will match the font from Figma if it’s available in Play, otherwise we will alert you and replace the font with SF Pro. 3D Transform for all Elements - We’ve added the 3D Transform property to the Layout Panel for all elements. By clicking on the property, you’ll open a pop-up with controls to Rotate X, Rotate Y, Rotate Z, Move X, Move Y, Move Z, or change the Perspective. Improvements - You can now upload an image or video asset to bug reports in Play. This will help us replicate and fix bugs even faster! - You can now add symbols to the left and right of a slider, and customize them through the slider’s Element Settings Panel. - You’ll now find several projects in our Explore Section made by some talented members of the Play community! Look out for the community tag, and make sure to check out their work. - You can now filter the Layers Panel based on the object type. - All objects with interactions will now have a purple indicator in the Layers Panel. Bug Fixes - Main components on the canvas using “Fill” rendered incorrectly on iOS - The Sonoma Caps Lock indicator appeared randomly when renaming a layer in-line - Clicking the tab bar opened the navigation bar panel instead - Modals were presented above Play Mode splash screen - On macOS, the page outline remained in view when the user switched to another page

July 16, 2024

Please note, iOS17 is now the minimum iOS version we support Rive Animations - We’re bringing Rive animations to Play as an element! You can upload your own Rive file (.riv) through Play’s asset manager, customize its settings like content mode or autoplay, and add interactions. We’ve added two Rive-specific actions: Set Rive Input, which allows you to add/switch the Rive’s asset file, and Play / Pause Rive, which lets you play, stop, pause, or restart the Rive animation. Editable Text from Figma - As promised, we’ve added to our Figma Import feature. Now, when you copy and paste text from Figma, it will come into Play as a “Figma Text” element. This also works when you paste groups of elements. The contents of a Figma Text element cannot be edited, but the tint, size, and position can be. - In the Element Settings Panel, you’ll see a button that says “Make Editable.” Clicking this will turn the Figma Text into a text element in Play that is fully editable. We will match the font from Figma if it’s available in Play, otherwise we will alert you and replace the font with SF Pro. 3D Transform for all Elements - We’ve added the 3D Transform property to the Layout Panel for all elements. By clicking on the property, you’ll open a pop-up with controls to Rotate X, Rotate Y, Rotate Z, Move X, Move Y, Move Z, or change the Perspective. Improvements - You can now upload an image or video asset to bug reports in Play. This will help us replicate and fix bugs even faster! - You can now add symbols to the left and right of a slider, and customize them through the slider’s Element Settings Panel. - You’ll now find several projects in our Explore Section made by some talented members of the Play community! Look out for the community tag, and make sure to check out their work. - You can now filter the Layers Panel based on the object type. - All objects with interactions will now have a purple indicator in the Layers Panel. Bug Fixes - Main components on the canvas using “Fill” rendered incorrectly on iOS - The Sonoma Caps Lock indicator appeared randomly when renaming a layer in-line - Clicking the tab bar opened the navigation bar panel instead - Modals were presented above Play Mode splash screen - On macOS, the page outline remained in view when the user switched to another page

July 3, 2024

Hotfix - Resolved an issue where the fill property was not functioning correctly - Fixed a bug causing incorrect font display for projects duplicated from Explore. ---- 1.10.0 Phase 1 of Figma Integration - Figma import is here! We’re rolling features out in phases so we can deliver Figma integration to users as fast as possible. In this first phase, you can copy objects from Figma and paste them into Play. - There are a few features still in development, like editable text, full SVG support, and gradient fill. Currently, both text elements and any elements with gradient fill will be brought into Play as images. - Other features coming soon include: -- Editable Text -- SVG Import -- Auto-replace objects imported from Figma with native elements in Play -- Full Figma project import from a Figma file URL -- Updating a Shared Library between a Figma file and a Play file Design with System Colors for Accessibility - You can now use Apple’s System Colors in your designs! System colors cannot be modified. If you want to use another color, you can still add it as a Color style, which is different than these System styles. - This will not affect the Color styles in existing Play projects. Native SF Symbol Animations - We added two new actions for SF Symbols: Set SF Symbol and Set Symbol Effect. - Set SF Symbol lets you replace an SF Symbol with another, with or without an animation of your choice. - Set Symbol Effect lets you trigger an Appear, Disappear, Pulse, Bounce, Scale, or Variable Color animation. Each type has one or more properties that further customize the animation. Data for Pickers You can now add up to three columns of data to native picker elements. In each column, you can add an unlimited number of rows by adding each item separated by a comma. Improvements - When you switch between pages, Play will now remember whether you were in Design Mode or Interaction. Mode. Bug Fixes - Sub-panels was getting conflicted when more than one editor was opened - Text field properties weren’t applied correctly to the text field value, only the placeholder - New corner style values were not saved - Dismissing Play Mode from a modal caused the editor to load instead of the Lobby - Setting the #000000 color’s alpha value to 0% hid the HEX label - Deleting a Corner Radius Style while the element is in view did not break the style - The Figma authorization flow was not re-triggered when trying to import elements after revoking Figma account access - The Color Panel was not updated when selecting a gradient color type via the attributes panels - Project Display Mode was not getting saved after closing the app

July 2, 2024

Phase 1 of Figma Integration - Figma import is here! We’re rolling features out in phases so we can deliver Figma integration to users as fast as possible. In this first phase, you can copy objects from Figma and paste them into Play. - There are a few features still in development, like editable text, full SVG support, and gradient fill. Currently, both text elements and any elements with gradient fill will be brought into Play as images. - Other features coming soon include: -- Editable Text -- SVG Import -- Auto-replace objects imported from Figma with native elements in Play -- Full Figma project import from a Figma file URL -- Updating a Shared Library between a Figma file and a Play file Design with System Colors for Accessibility - You can now use Apple’s System Colors in your designs! System colors cannot be modified. If you want to use another color, you can still add it as a Color style, which is different than these System styles. - This will not affect the Color styles in existing Play projects. Native SF Symbol Animations - We added two new actions for SF Symbols: Set SF Symbol and Set Symbol Effect. - Set SF Symbol lets you replace an SF Symbol with another, with or without an animation of your choice. - Set Symbol Effect lets you trigger an Appear, Disappear, Pulse, Bounce, Scale, or Variable Color animation. Each type has one or more properties that further customize the animation. Data for Pickers You can now add up to three columns of data to native picker elements. In each column, you can add an unlimited number of rows by adding each item separated by a comma. Improvements - When you switch between pages, Play will now remember whether you were in Design Mode or Interaction Mode. Bug Fixes - Sub-panels was getting conflicted when more than one editor was opened - Text field properties weren’t applied correctly to the text field value, only the placeholder - New corner style values were not saved - Dismissing Play Mode from a modal caused the editor to load instead of the Lobby - Setting the #000000 color’s alpha value to 0% hid the HEX label - Deleting a Corner Radius Style while the element is in view did not break the style - The Figma authorization flow was not re-triggered when trying to import elements after revoking Figma account access - The Color Panel was not updated when selecting a gradient color type via the attributes panels - Project Display Mode was not getting saved after closing the app

June 25, 2024

Hotfix - Fix for a crash that was preventing users from opening the app - Also includes a fix where the undo stopped working across the app

June 4, 2024

Bug fixes: - Quick Add V-Stack Element was not working. - Fixed an issue with the animation of a pinned element. - Corner Radius Styles were not loading in AppClips if you didn't have Play installed. - Copy and paste the Page Enter and Page Exit triggers. - Resolved an app crash issue related to custom font loading. - Corner Radius Styles options were not available when dragging an element's corner, preventing Style value updates from being reflected. - Color Styles were still being displayed on the Code panel after deletion. - Fixed an app crash that occurred when opening an App Clip link right after a fresh install. - Fixed a memory leak issue with videos while in Play Mode. - Resolved an issue where symbols in the nav bar were getting reset. - Videos with auto-play turned off would sometimes auto-play anyway upon entering live play mode.

May 28, 2024

New Educational Templates - We’ve added more content to our Explore section in the macOS lobby! You’ll now find two tabs in the Explore section: Gallery and Templates. All projects in both tabs can be duplicated into your team where you can edit and customize the project. - The Gallery tab contains the existing demo projects that were previously in the Explore/Learn section. We’ll continue adding more full demo projects to the Gallery, and we’d love your suggestions. - The Template tab is new and focused on common UI patterns and interactions. These projects are usually focused on one interaction to help you gain a deep understanding of the concept. The Templates tab will also include our first iteration of Play Library, which is a set of common UI components that we’ve pre-built for you to copy and use in your project. Copy & Paste between Projects - You can now copy objects from one project in Play and paste them into a different project in Play! This is especially helpful for the components in the Play Library demo project. And, until we ship Shared Component Libraries (coming soon!) it's an easy way to create a project for the components you want to reuse, and easily copy/paste them into new projects. Corner Radius Styles Corner Radius styles are joining Play’s design system! You can manage your Corner Radius styles the same way you manage Color, Gradient, Type, and Spacing styles. Improvements - We’ve refactored image and video data in Play, so images, videos and project thumbnails will display correctly across platforms. - You can now add teammates to collaborate with when you’re signing up for Play. You can always add more in the Members tab. - If you switch to another project’s editor window on macOS, you’ll see a toast on the mobile app to “Switch to Focused Window.” If you tap this button, the new project will display on mobile. - Users can now see release notes within a pop-up in the Play app. - We updated SF Symbols to version 5.1. There’s over 700 new symbols, making Play’s SF Symbol library more than 5,000 icons. - You can now duplicate pages by right clicking on the page’s tab. Bug Fixes - The Progressive Blur Radius slider was not working - Uploaded fonts were not properly displayed in Live Play Mode - Pinch to zoom didn’t work on App Clip prototypes - Multiplayer cursors were displayed indefinitely when the cursor’s user signed out - Pasted text elements did not use the default System Font - Dynamic text broke Play’s mobile app tab bar - Users could access tab bar and nav bar settings from Interaction Mode - Map pin and assets panels were opened outside the Play app’s window frame - Edits to gap selection weren’t always detected - Set State actions occasionally caused crashes - Set Scroll actions occasionally caused crashes - Clicking an asset from the Assets Panel didn’t add the asset after trying to click & drag the same item