Releases

As of today, you’re able to export your Flow animations to Lottie and import them into your Adobe XD prototypes. We’re also shipping a much needed improvement for importing images from Figma.

Adobe XD / Lottie
XD recently launched a Lottiefiles plugin, which required some tune-up on our exports.

• Fix masking bug in Lottie exports
• Make Flow Lottie files compatible with Adobe XD

Figma Import
Flow now gives you the option importing images as… well, images! Rather than as shapes with image fills (which is how Figma actually treats images).

• Add convert images option during import from Figma
• Add progress indicator when re-syncing a Figma file
• Properly import text and text properties

Today we’ve got a great bunch of new and fixes.

Flow
This list looks short, but each entry took a lot of bs&t.

• You can once again copy from Sketch and paste into Flow
• Paste with Keyvalues bug (this was a deep one) @Joe
• Paste shapes from XD @Talha
• Missing font bug with font panel
• Adds a Learn menu item links to pages on our site (basics, flowcasts, docs and tuts)
• Add Rubik as a default font (nice.)

Image Sequence Exports
Here’s a handy little feature for you.

• Export your animations as a set of png files.

Animated Image Imports
By popular request, you can now load an animated image into your animations.

• Import an animated png or gif
• Flow creates a new image layer with keyvalues for each frame of your image sequence

Lottie Exports
Oh, Lottie, you’re such a delicate little one. This update was a tough cookie to wrangle, but we were able to significanly improve text exporting, minifying, and update the version.

• Animate font changes
• Properly minify Lottie files
• Properly compute ascender
• Add fontAscender property
• Handle font ascender animation
• Properly set font variables
• Update bodymovin’ version

Web Exports
If you want to send your devs a bit less code than usual, the new driverless export is just the ticket.

• Create new driverless export
• Update Player documentation
• Update Driver documentation

Common Web Updates
We took a bit of time to think through the documentation and classes going into our open-source Common Web approach for using WAAPI.

• Handle undefined callback
• Update inline documentation for Player
• Add generic timeline class

New export options include Dribbble, an iOS Spinner, a Hover Element and Image sequences. Loads of fixes for a lot of existing exports like HTML, SVG, and especially Lottie.

Expressions
Expressions can now be used in number format property cells.

• Want that rotation to be 2x higher? Just multiply it.
• You can now use expressions like +, -, /, * and much more in number property cells.
• Handy.
• Thx Tim K

Reverse Media
Flow can now add the reverse of an animation to itself when exporting media formats.

• Add capability to append a the reverse set of frames to an exported animation.
• Thx Super Rachek

Lottie
Some great fixes for Lottie exports.

• Custom font embedding
• Fix Lottie iOS text offset
• Fix Lottie text animation changes
• Thx Matej

SVG & HTML
Pattern fill images needed some TLC in both SVG and HTML exports.

• Properly export shape fill type to SVG and HTML
• Fix SVG clipping to bounds (i.e. overflow)
• Fix HTML clipping to bounds
• Thx Marco

iOS Custom Activity Indicator
A hearty new export for you.

• Generates a UIKit compliant ActivityIndicatorView that plays your animation.
• Spinners for everyone!

Web Hover Element
Another hearty new export for you.

• Generates an HTML element that plays forward on hover, and reverse on exit.
• Take that, Mailchimp logo

Dribbble Exporter
A lovely option for framing your scene in a 4:3 layout and exporting to a Dribbble-optimized video.

• Adds your scene to 4:3 frame
• Options for changing background color, adding shadow, rounding corners
• Multiple options for choosing frame size, scene scale
• Exports a formatted video that is compressed and compatible with Dribbble’s standards

Flow
General app updates

• Shapes now clip properly when you turn on the mask to bounds property
• Fix stroke bug in Stage renderer for Gradients
• Fix hard crash when importing poorly formatted masks (Figma)
• Thx James T

This is a quick one, because we found a small / critical bug fix for our release earlier this week.

Flow
A crafty little bug slipped into Flow earlier this week.

• Fix license validation bug

After a hectic spring and early summer, this update brings fixes to 3 critical features of Flow… Figma and Affinity imports, SVG exports and iOS playback.

Figma
We put some solid elbow grease into wrangling Figma’s API, to make importing smoother.

• Dramatically improve Figma importing
• Reduce server errors due to Figma API timeouts
• Fix importing for Figma files with no images, updated env to prod

SVG Export
Thanks to Marco for pointing out a few deep bugs with our SVG exports

• Fix application of image fill type
• Fix shape fill image positioning
• Add shape fill image width and height animations (using pattern tag)
• Fix fill image size and positioning errors

iOS Exports
Thanks to Franciso for pointing out an issue with our iOS export which prevented using the repeatCount variable for Timelines

• Fix repeat issue on Animations
• Use repeatDuration to determine reset
• Accurately store current time
• Properly calculate repeatDuration
• Add placeholder implementations of delegate methods
• Modify timeline to use repeatDuration
• Ensure calling of didStop at end of animation

HTML Exports
In conjunction with the SVG fixes above

• Add border layers to image and text elements
• Add shape fill image width and height animations
• Fix shape fill image size and positioning errors

Illustrator / Affinity Import
In conjunction with the SVG fixes above

• Fix a hard crash when importing SVGs with images from Affinity
• Correctly position images, when imported from an SVG that also contains a transform style element
• Improve SVG image importing from Illustrator

Flow
A couple of subtle touches

• Properly update selected anchor point color when switching layers
• Adjust login error text placement

Our latest release is a small but tasty one, with a pinch of layout, a splash of bugs fixes and a dash of polish.

Flow
Not too much to add here, except a few little bugs to keep things tidy.

• Fix export path selection bug
• Minor styling improvements to windows
• Adds links to password reset page
• Update links to website
• Fix watermarking layout issues
• Fix autolayout issues and constraints with panels
• Clean out some dusty code

You can now create gradients directly in Flow! We also overhauled a lot of UI elements to catch up with Big Sur, including new windows, minor layout issues, and more. Oh… yes, also there are now expanded options for media exports.

Flow
This is a short version of a huge list of fixes we added to Flow.

• A whole lotta Big Sur UI Updates
• Add UI for Updating gradients on Properties panel
• Define features and tiers
• Create new registration workflow
• Add video and animation export options
• Add logic for moving the start and end points of gradients when changing gradient type

Templates
Some much needed updates to a few templates.

• Fix SVG error when exporting angular gradients (default to radial)
• Update build configuration to iOS 13
• Allow resetting and reversing from any point on the timeline
• Fixes background color bug scaling bug

FlowCommon iOS
A big little fix for our iOS export.

• Improve control over resetting and setting the current time of Timelines

This puts it over the top! Our Figma release is officially live, and we’re telling a lot of people about it.

Official Figma Release
Huge improvements. Here’s the laundry list:

• Fix Figma import tester
• Added vector path transform operations for importing.
• Vector nodes hybrid import
• Adds checkbox for overriding the Figma plugin
• Add cursor rects to Figma View Controllers
• Added how to link to Figma import controller
• Enable Importing non frame nodes
• Added Flow Figma plugin support.

Official Figma Release
Some delicious improvements to the main app.

• Fix distribute and align layer commands so they work when the layers have different parents
• Added Underlines for Text
• Fixing attributed string animations in flow
• Add Linked file status button to toolbar
• Add linking Menu items
• Add Font Styles
• Fix importing Variants

Templates
A couple of tiny touches to the templates.

• Fix Web FillImage DropShadows
• Fix HTML text new-Lines

Here are a few more fixes for our Figma beta import feature.

Figma Beta Update
This time around there were a LOT of updates to Flow and our Figma import.

• Figma menu item crash
• Fix bug when importing rectangles from Figma
• Improve Figma Text Import
• Import Figma Variants

Onwards. We’re working super duper hard on bringing Figma up to our Sketch standards.

Figma Beta Update
This time around there were a LOT of updates to Flow and our Figma import.

• Fix paths for lines and ellipses, stop using stroke geometry.
• Added miter limit conversion.
• Fix mask positioning.
• Displaying more Figma errors to user, added import type check and refactoring.
• Fix Figma fonts.
• Fix rotation bug in Figma.
• Add page and scene number text fields to Figma test app.
• Added support for importing specified node ids instead of entire file.
• Added clips content import for frame nodes.
• Convert Figma masks part 1.
• Fix Figma lines.
• Test importing of rounded corners for rectangle nodes.
• Add boolean operation tests.
• Add download images button Figma test app .
• Create shape tests.
• Moved Figma operations into main target, made importer a sync op.
• Add fill gradient tests.
• Convert rotations of Figma nodes.
• Refactored Figma node builder..
• Add Figma fill image tests.
• Added Figma import and download operations, .
• Created Figma text node tests.
• Figma import - test GroupNodes and FrameNodes.
• Convert fill images.
• Implement vector node tests.
• Convert text nodes.
• Save JSON download folder to user settings.
• Switching Figma user ids.
• Add download to Figma test app.
• Implement path conversion in FigmaToFlow.
• Converting vector nodes to Shapelayers.
• Added refresh button and refresh when ‘r’ key is pressed.
• Fixed node info action, refactoring.
• Add Figma group conversion logic.
• Update Figma test app to fetch data remotely, instead of using a local JSON file.
• Fix crash when clicking plus button, when sketch file already linked.
• Setup importer test infrastructure.
• Fix SVGKit hash.
• Create Figma import test app.
• Created FlowNetworking framework and migrated some Figma apis..
• Added FigmaTestFile test.
• Add ImageReferencereSolver.
• Implement path struct, make it decodable, add unit test for path decoding.
• Making paint equatable.
• Flow Figma importer.
• Create NodeDecoding tests.
• Refactor paint property.
• Create FigmaToFlow framework and test framework.
• Add test for testing polymorphic decoding of nodes.
• Create Figma parser object.
• Setup property decoding tests, implement colour test.
• Decode Figma nodes.
• Add node types.
• Added Figma prop type structs.
• Changed Figma import presenter.
• Support linking a Figma file, show creation ViewController when adding new timeline.
• Add Figmakit framework.

Templates
A couple of touchups!

• Fix HTML Readme (thanks @Joe).
• Implement scaling in iOS Launch Animation template.

Lo and behold our lovely early-adopter-customers let us know that the last realease we actually shipped Figma. Super! Here’s a bit of an update on that.

Figma
Our β version of Figma import is alive. Please remember that it is very, very much a β version, but it works!

• Import Figma files directly into Flow

Path Editing
We’re continuing to make this feature super awesome.

• Added the ability to create line shape in Flow
• Addded buttons for incrementing/decrementing starting point of subpath
• Show the reverse path direction button in the path panel
• Always show the orientation indicator on a subpath handle

SVG Importing
As always, it’s important to keep things up to date.

• Parse style attributes of all SVG elements
• Equalize control points of paths when importing
• Add Image parsing (part 1 of 2)

Templates
Three small touchups.

• Fixed a bug with animations so that they fill forwards
• Fix an issue with the ToggleButton export
• Updated iOS Readme steps

In which we improve path editing, add necessarily absent input options, and add a deluxe luster to our new property panels.

Path Editing
Adding a bucketful of polish to your path editing and animation options.

• Added path, point and curve panels.
• Added path point type options: straight, curve from, curve to, mirrored, asymmetric and independent.
• Added curve options
• Added open / close option for paths
• Display path point positions
• Make path panels react to Light/Dark mode chanes
• Clamp corner radius to min/max based on all selected path points
• Added some lipstick to the look of all three new panels

Bugs
The squashing, quashing, crushing, continuesing.

• Add clicking to start playback for lottie ios and android apps
• Add an app icon to lottie android export
• Round width and height of image assets, because android lottie doesn’t understand what a decimal is.
• Fix some nastiness in the lottie ios constraints
• Fix chrome composite bug
• Fix crash occuring when deleting last path point of a shape

Figma Alpha
Tick…

• Tock

This release focuses on a couple of very handy exports. You can now export Lottie into iOS and Android projects, reducing your time to iterate and helping with handoff to a dev.

Lottie iOS & Android
We added an export for you to test your Lottie animations directly in iOS or Android project. You can also just give your dev the project you export.

• Create a Lottie iOS export option
• Create a Lottie Android export option
• Standardize and move both into Templates
• Add font export to Android and iOS
• Create packages for bundling code for each platform
• Use minified Lottie files when exporting
• Create readmes
• Here’s a bit of butter… The Lottie iOS export will automatically run pod install for you. Mmmmm.
• Dynamically update Android SDK path for the exported project
• Updated the Lottie-Web readme along the way.
• Use proper template name in export window and export folder

Bugs
A whole swarm of bugs. Well, more like small swarm of bugs. Or, even, say, a few annoying fruitflies. Whatever…

• Fixed a crash with the Timeline creation controller
• Some lovely, patient, users were experiencing a very hard crash for us to resolve… We think it had to do with their source files… We fixed it. Maybe.
• Fix the createPlayer function in our Web exports
• Fix reversing of open paths

Path Editing
Ahhhh, yes. We’re working through our path editing feature. Here’s some tasty treats for you to chew on.

• You can now hit the Return key to enter path editting mode for a selected layer.
• You can exit path editing mode by hitting ESC…
• … and when you do, the parent layer of the object will be selected
• Oh, and you can use a menu item now to get into path editing mode as well
• When you create points on a curve, they will be mirrored.
• Improve handling of position of control points and rounded corners*
• Dragging a layer will now snap to path points.

Polish & Other Lovely Things
We made a few tiny, lovely, small improvements to the app as well this time around.

• Added some links into our app in certain places - e.g. when signing into your Flow account.
• Set UTMs for doc and tutorial buttons on Welcome Window
• Properly export the createPlayer function for our Web exports

Alright, here’s an update with some ongoing work, some fixes, and an nice tasty alpha feature that many people have been waiting for.

Path Editing (Alpha)
Enough…

• said.

Preparing for Figma Import
A sneak peak at what’s to come for Figma import…

• Refactor Sketch Import ViewController
• Added initial stages of Figma import flow & feature provider.
• Added Flow Services + Figma endpoints for authentication.
• Added http networking base class, added Figma api.

Flow Common (Web)
Continuing our work to get Safari up to speed with the rest of the internet… We’ve made some improvements to our web export common files.

• Remove Track and Animation from FlowCommonReact
• Remove Scale and Anchor point animations from transform animations
• Removed references to Animation and Track classes
• Move linear gradient animations into timeline
• Refactor transform animations
• Add element ID

Web Exports
We’ve also fixed up some much needed bits for our general web exports.

• Fix FireFox Driver Playhead Styling
• Overflow is handled in layer.css.flt
• Fix fonts in FireFox

iOS Exports
A long awaited touchup for things in iOS.

• Properly handle scene clipping in main iOS export
• Set background color of scene via the storyboard
• Sets background color of scene view

If you missed it, WebKit made a major announcement in April and Safari now has native support for Web Animations. This is awesome. However, we had put in place some very effective hacks to get around major limitations in previous versions of Safari. Now, we’re starting to undo those hacks and bring things back to parity with our Web exports.

Web Animations
Cleaning up some old hacks for missing functionality in older versions of Safari.

• Removed SMIL work around for fillColor and strokeWidth animations
• Added conditional rendering for path animations
• Moved fill gradient animations into html and out of timeline
• Fixed naming bug in fillImage css

General
Two small fixes.

• Updated Flow’s CDN address to use our domain
• Fixed React npm version

A couple of bug fixes and some infrastructure for making Flow animations easier to integrate into your project.

SVG
Fixing an issue with linear gradients in animated SVG files.

• Fix animation of linear gradient stop colors
• Fix animation of linear gradient stop positions
• Fix animation of linear gradient to and from positions

Lottie
A couple of decent fixes for Lottie files.

• Implement exporting mask Layers.
• Export a minified version of the lottie json file

Flow
A couple of touchups in the app itself.

• Fix animation of linear gradients within flow
• Updates aesthetic of sound waveforms and tracks

Web Exports
We created a CDN to access our FlowCommon files – i.e. the player and Timeline classes, etc.

• Setup CDN for FlowCommonWeb
• Updated Web READMEs with cdn instructions

React Exports
We created an npm module for loading our FlowCommon files – i.e. the player, etc. – into your projects.

• Setup npm module for FlowCommonReact
• Update React README with npm instructions

iOS Exports
We created a cocoapod for loading our FlowCommon files – i.e. the Timeline classes, etc., into your projects.

• Setup pod for FlowCommoniOS
• Updated iOS READMEs with pod instructions
• Added flow version to READMEs

In just a few weeks, the stellar Jeremie Benhamron has gone from a white belt to black belt in the Martial Art of Lottie Exports. This release bring mega fixes so that our files now work in the iOS, Android and React demos we’ve tested. It also works on Protopie and Lottiefiles. Performance has increased, while file sizes have dropped dramatically.

Lottie
A laundry list of great goodies that have gone into our Lottie export.

• Fix lottie on Android
• Fix lottie export for iOS
• Fix Lottie on protopie
• Fix Lottie on React Native (except images)
• Fix Line height bug in Lottie
• Reduced the size of exported Lottie files
• Improved performance of Lottie files
• Add README for Lottie

iOS
Two nice additions to our stellar iOS export.

• ADD README to iOS and iOS - Custom Button templates
• Created a new FlowCommoniOS Cocoapod

React
Also, two lovely additions for our rock solid React export.

• Created flowcommon-react npm package
• Update React Readme

Flow Services
Like a well trained ninja, we’re doing things on the dl that you’ll certainly be amazed by.

• Updated flow services encoding strategy.
• Using urls instead of paths for uploading and sourcing assets from s3.
• Updated account authentication handling, updated upload screen, refactoring.
• If you’ve read this far, and are wondering about FS, then email Travis to find out more - we’ll soon need some testers.

Here’s a couple of important fixes as requested by the community.

Lottie
Here are two little, but important fixes for Lottie:

• Add meta field to exported Lottie JSON files (to work w/ lottiefiles.com)
• Fix horizontal and vertical flipping in Lottie

aSVG
Also, two little yet important fixes for aSVG exports.

• Improve line-height for text elements.
• Add mask path for mask Layers

On the heels of our SVG release, we are pushing a small fix that fixes a big bug in SVG exports.

Animated SVG
We’ve fixed how our aSVG files handle anchor points. Prior to this release you’d have had to change all the anchor points to the top-left of layers and groups. No longer will you suffer the nuissance of this bug.

• Add customizable anchor point handling to aSVG exports

Over the last few weeks Jeremie and Owen have been working hard on tuning up our Lottie and Animated SVG exports. Today, we’re officially releasing them and it’s a great milestone for us.

Lottie 1.0
Updated to include images and text, our Lottie export is now competitive with the likes of Haiku and AE.

• Support text
• Support images
• Fix stroke scaling problem
• Improve performance
• Prevent cropping of vertical and horizontal lines
• Update style/presentation of Lottie html file

Animated SVG 1.0
At very, very long last. Here we have an updated export for Animated SVGs, which can produce lovely, lovely files for you to drop into your web projects.

• Support text
• Support images
• Improve perforance
• Update style/presentation of SVG html file

UX
We added a small touch to Flow, making it easer to select the Scene.

• Allow user to select scene by clicking its frames even when other layers are present

The name’s SVG. Animated SVG. We’re getting close to a solid release of an animated SVG file export. As we did with Lottie, we’re releasing the beta today in anticipation of making it better over the next two weeks.

Animated SVG (Beta)
Last year we created a… let’s call it an ultra-alpha version of SVG export. Over the last few weeks, the industrious team of Jeremie Benhamron and Owen Delisle have been refactoring and updating it to a releasable format. Here it goes…

• Update ollllld animated SVG
• Refactor SVG template structure
• Refactor transform animation logic
• Refactor layer track filtering SVG
• Refactor svg animation logic
• Refactor SVG opacity
• Refactor image animation logic
• Move shadow defs
• Move image defs
• Move fill gradient defs
• Move fill image defs SVG
• Add images to SVG template
• Fix Shape path stroke scaling issue
• Setup initial rotation of layer, remove anchor point logic
• Add mask to bounds functionality
• Fix svg opacity
• Add hidden layers
• Add SVG add flipping

UX
In support of SVG export, we needed to add a few tiny, nice… nice and tiny… features to Flow.

• Add ability to resize groups without adjusting contents.
• When sharing Flow files, default to the standard export path when the file is opened on a new comp.

Lottie
Just a little more Lottie.

• Fix stroke width scaling issue

Oh, my, this is a great one. Flow now exports to Lottie! This opens up a great opportunity for everyone who wants to get into UI Animation, but doesn’t want to learn the impossible interface of After Effects.

Lottie (Beta)
We’ve released the first version of our Lottie export, as a beta, because it currently only handles shapes and groups. So, you can make some great animations, but will have to wait for our official release to get text and images as well.

• Export Lottie files

Bugs
We also fixed a few things.

• Fix dragging layers in rotated groups
• Fix timing function evaluation
• Fix artboard autosizing
• Add copy over common file to templates (thanks @aaron)
• Moved states object into constructor to fix safari bug

When we updated GIF export, we added a tiny regression into PNG export. Now, we’re undoing that nonsense.

Bringing Back Transparency
We regressed PNG export.

• Fix transparent backgrounds in PNG and APNG exports.

… jumped over the lazy release.

Auto Updating
A lovely user tried Flow again, only to find that our latest dl (that we released this morning) was crashing. Turns out it was a bug that happens only for people who are downloading Flow, and that haven’t auto-updated before. A bit of an obscure bug and one that slipped through the cracks.

• Fix auto-update logic.

Snapping
We also pushed a nice little update that makes snapping, of layers on the main stage, just a bit more lovely.

• Fixed snapping guides on Stage

Ok. Two things in this release: a major fix for GIF export and the extermination of many, many bugs.

Media Export
We have some really exciting announcements coming soon, and to effectively release them we needed to overhaul GIF export.

• GIF Exporter Improvements – we’ve elminated flickering and missing colors.
• Add ability to cancel media export - if your export is taking too long, you can cancel it.

Terminatoring
The majority of this release focused on terminating a lot of bugs that our lovely users reported, and a bunch we found ourselves.

• Allow user to change image at point in time from Image Properties panel
• Fix images when exported with spaces in their names
• Fix auto updating of App
• Fix crash when creating new project (srsly… what?)
• Add minor and major increments for anchor point
• Fix Safari Stroke Width Animations
• Fix React template signature error
• Fix crash when copying / pasting layers with masks (from Sketch)
• Fix Image archiving crash
• Fix rounded corners bug when corners are 0 degrees
• Open the exported document folder if possible
• Stop using codable value to improve performance
• Discrard cursor rects
• Fix crash when there are differences between layers

Oh, please do take the time to read this release. Flow now comes with a REACT template! You can now export a button, as a react component that is backed by the HTML WebComponent infrastructure from our previous release.

New Export Options (incl. REACT!)
A new React template, new HTML WebComponent template, and all the fixin’s needed to make them work.

• Create React Readme
• Creating React Template
• Removing HTMLWebComponentButton Template from exclude in release
• Update names and descriptions of templates in export window
• Removed undefined function calls from Web Components Button template
• Updating timer variable name
• Created HTML component template
• Updating escaping README system
• Update template readme, add signatures

Exporting
A tiny fix for something we took away.

• After exporting, Flow will attempt to open the exported document folder (if possible)

Crashes
A good handful of bugs crept up and we’ve done some necessary house cleaning.

• Layer difference crash
• Discrard cursor rects
• Copy pasting masks from sketch crash
• Image archiving crash
• Fix rounded corners bug when corners are 0 degrees

Performance
A very major performance increase.

• Stop using codable value to improve performance when images are present

Animated Images
A long overdue and very lovely feature – you can click on an image’s property panel preview to change it, and Flow will add keyvalues and animate between them.

• Allow user to change image at point in time from Image Properties panel

We’re working towards some awesome new export formats, and to get us there we’ve created a new approach for exporting to HTML. You’ll now have an extra option for exporting HTML buttons, using a WebComponents approach. We’ve also added some insanely great performance improvements.

HTML Button with WebComponents
This is a, say it with me, loooooooovely new way to work with buttons in HTML pages. Now, you can embed your buttons with a, yes… say it with me, SINGLE LINE OF CODE.

• Add a new version of the Toggle Button Templates that is more modular using the shadow DOM
• Generate Flow Common Folder in HTML Templates.
• Load in linear gradient animations
• Create Master Script for Flow Common files.
• Naming improvements for HTML Templates and Webpackage.
• Added README.html into WebComponents ToggleButton Template.
• Edit html button web coponents readme, make an flt file

Export
A necessary change. This approach allows you to generate files straight into your folder of choice, and passes the power to create folders to the template.

• Generate all exported folders in templates
• Don’t delete any exported files/ folders in Flow, only delete folders from Templates
• update templates to delete previously exported files/folders

Web Template Improvements
With the WebCompoents approach, we needed to update how we generally export code for SVG, HTML, etc.

• Refactor web template svg animation
• Move ToggleButton class into web package.
• Moving SVG animation into timeline.
• Creating master script in Web Components Template
• Fix web img url for web templates.
• Move player.js into web package
• Updating web animations.js.flt adding a constructor that takes in a root element

Performance
Always and forever, Jeremie makes things better and better.

• Improve performance accross the entire app by optimizing the method responsible for resolving rounded corners of ShapeLayers

Here is a new release that makes Flow a lot faster than it was yesterday.

HTML Button Template
With this release comes a new HTML Button template!

• Add export for a clickable / toggle button that can be run on the web.

Crash Fixes
There were a few hard crashes that we crushes.

• Fix path equalizer crash
• remove fatal errors in TimelineHierarchyViewController
• fix LayerMenu rename layer crash
• Fix deletion bug hierarchy panel

Performance Optimizations
We went to town on making things faster.

• Hierarchy panel updating when deleting rows
• Moving layers on stage
• Resizing layers on stage
• Selecting layers on stage
• Adding and removing layers to the stage

Stage Refactoring
In order to get ready for the path manipulation feature we are planning we needed to completely refactor stage.

• Make everything work butter.

Another beautiful release in our series on catching up with Catalina.

HTML Export
We broke it. And, now we fixed it.

• Update signing process to include new Web template package.

Well, we got past the buckshot of releases last week, and are now updating Flow with a bit more chutzpah.

Nasty Bugs + Crashes
We’ve crushed a lot of tiny critters that made their way int our house. Here’s a list of the crashes that should not happen anymore:

• Copy layers crash, due to some poor counting.
• Importing multiple artboards is more buttery now.
• When you export timelines with path animations, Flow doesn’t crash – like it did, before… for some strange reason.
• Path tracks are lovelier than ever.
• Moving layers, in the hierarchy panel… yes … now shouldn’t cause crashes.
• A few crashes from an updated menu layout have taken their leave.
• A nasty little crash that happened when loading images.

Making Room for More HTML Export Options
We’re about to make more export options for HTML. To do this, we need to overhaul the way things work in our template engine.

• Remove extraneous code
• Update setting current time for recently played animation
• Extract common files into a Web Package
• Merge flow web
• Refactor path logic in html template
• Get rid of hosted template
• Add base url to non hosted html template

Stage Performance
The internal bits of the Stage need some TLC.

• Fix media export
• Fix shadow bug
• Refactor canvas gesture handler P1
• Update specific layer views
• Unhighlight layer before highlighting the next
• Extract viewstore out of stage
• Refactor stage view logic
• Update scene name when renaming scene via properties panel

This release fixes a decent crash in Flow.

Layer Menu Crash
In particular, a crash occurring when trying to display the menu for a layer on the stage of hierarchy panel.

• Fixes hard crash when opening the layer menu.

Good evening. This release fixes code signing issues in Flow.

Gatekeeper
These fixes are necessary in order to allow users to open Flow without changing Gatekeeper’s settings.

• Update code signing process.

Here’s an intermediate release with a couple of things. Mainly, this is to help us test the notarization process.

UI
We’ve tightened up a few bits of the UI.

• Adjust fonts throughout menus
• Add menu items to layer menu
• Fixes blurry icons in hierarchy panel.

UX
Added a small popup to help explain greyed out artboards during import.

• Add pop up to help explain why you can’t create a timeline with artboards that ahve mismatching layer hierarchies

SVG Import
A touchup from last week’s release.

• Import corner radius of rect elements

Bugs
Crushing at least one.

• When creating rounded rects in flow, ensure the corners dont get distorted when resizing the rect

Notarization
Our release process should be smoother with this.

• Update release script to incorporate Notarization
• Add Sign Bundled Frameworks build phase

Uploading
Sneak Preview.

• Allowing upload of document along side timeline uploads. (not visible to users)

A critical tiny fix.

Auto Update
We fixed the issue with auto-update for the previous release.

• Thanks to Jeremie for doing a great job, he matrixed.

This is an awesome feature not only for Flow, but for designers who may be using icons and elements from UI kits. And, for all those non-Sketch designers, there is now a pathway for you to import your designs into Flow.

SVG Import (beta)
You can create timelines from them, or drag and drop them onto your current Timeline.

Please note: this is a beta feature, and will be improved in the coming releases

• Create timelines from imported SVGs.
• Handle all shape types (including arcs).
• Created a converter from SVG format to Flow.
• Rename top-level svg elements into SVG file name.
• Add drag-drop functionality.
• Insert SVG files via in-app menu.

Media Import
A useful touchup to importing media files.

• Allow user to import multiple image, SVG or sound files at the same time.

UI / UX
We’ve added some nice subtle improvements, and some other critical fixes.

• Fix a bug with dragging scenes in the Sketch import window.
• Resize Sketch import window depending on screen size and resolution.
• Add button to empty stage for adding a timeline via SVG file.
• Align divider of layer hierarchy panel to that of the timeline hierarchy. (Travis sheds a tear in thanks).
• Allow Flow to open files with missing images
• Deselect easing curves when clicking on an empty area of the timeline

Export Options
We’ve added a few subtle but important fixes to our export options.

• Player.js pauses after finishing its animation instead of stopping (and going to the beginning of the timeline)
• Added a Delegate protocol to Toggle Button in the iOS export option
• Added a Delegate protocol for the Timeline in FlowCommon (thank you Robin Keech for suggesting this FlowCommon improvement)

Sketch Import
A touchup for importing layer styles mixed with unsaved changes.

• Override opacity of LayerStyle with that of layer

Catalina
Another year, another major MacOS release, and here is our fix for some strange behaviour that Catalina brought (will bring?) with it.

• Fix crash occuring in Catalina

This update brings four great features that make importing from your Sketch files better than ever.

Layer Styles & Overrides
We’ve greatly improved Flow’s ability to import your designs as they look in your original file.

• Import Layer styles
• Import Layer style overrides
• Import Symbol overries (incl. fill images, text, etc.)

Color Palettes
If you’ve created document-level colors for your design files, they now import and can be accessed in Flow via the Color Panel.

• Import Document-level Color Presets

Radial Gradients
You can now import, animate and export radial gradients.

• Import radial gradients from Sketch files.
• Animate radial gradients (via differences in Sketch file).
• Export radial gradients (and animations) to HTML and iOS.

Import Multiple Artboards
This is a fantastic new feature. When creating a new timeline, you can now import more than 2 artboards… You can import as many as you like!

• Add multiple-artboard import when creating new timelines.
• Update timeline creation UI

We’ve had quite a few requests for scaling the animated views generated from our Custom Button export option.

Instead of writing a tutorial on how to do this, we’ve updated the export to allow scaling via Interface Builder.

Custom Buttons are Scalable from Interface Builder
The buttons generated by our Custom Button export option can now be scaled in Interface Builder, and be aligned using Autolayout Constraints.

• Add automatic scaling to custom buttons

Flow is starting to get really powerful. We’re unlocking new ways of exporting code, and this is just the beginning. This release introduces a simple Onboarding Animation export, as well as one for animating native toggle buttons, both in iOS.

iOS Onboarding Animations
Flow can now generate an Xcode project that has your timeline integrated as a properly formatted onboarding animation.

• Add “iOS Onboarding Animation” export option

iOS Custom Buttons
Flow can now generate an Xcode project that has your timeline integrated into a native iOS button (i.e. UIButton) that toggles between on and off states.

• Add “iOS Custom Button” export option

Bugs
We found an esoteric bug that blocked people from activating new trials and paid versions of Flow. It was happening to people who had previously signed up for a trial prior to March 2019.

• Fix Authentication Bug

p.s. yes… if you have a keen eye, we went from 1.5.2 to 1.5.6… there were a couple of broken prebuilt versions we were going to release – alas, preplanning, so idyllic, so unwavering, so unapologetic.

A simple update that adds some pretty nice functionality.

iOS Launch Animation Export Option
Flow can now generate an Xcode project that has your timeline integrated as a properly formatted launch animation.

• Add “iOS – Launch Animation” export option

Here comes a swath of lovely fixes that we needed to get done in order to prep Flow for some upcoming releases we have scheduled throughout July.

HTML Export
Ohhhh boy, this is a good and subtle one. We’ve updated how we export HTML to include a non-ui class for playing animations. Which will allow you to more easily integrate multiple animations into a single .html page.

• Incorporate Player.js into HTML template
• Use unique ids in html template
• New constructor, update labelling of exported interface components

Crushed Bugs
This list looks short, but a lot of people were running into these bugs.

• Fix document serialization crash
• Fix Zendesk crash
• Fix source file linker crash
• Removing step for accessing old devmate license key.

IOS Export
Here we clean up a bit so the Xcode project has fewer unnecessary warnings.

• Get rid of warnings iOS export
• Update Flow Common files
• Force unwrap CGPathCreateWithSVGString

Template Window Changes
A bit of UI maintenance on the template chooser. We’re getting ready for some great updates in the coming weeks.

• Resize template window
• Sort templates in alphabetical order.

Hit Testing
A subtle but lovely fix. We’ve updated how shapes are hit tested on the Stage, now making it possible to select through to underlying layers when clicking outside of the path of a shape layer.

• Shape & Mask layer hit testing based on Path
• refactor highlight logic

Feeback Window
A tiny fix that was annoying for us and for a few users.

• Allow user to scroll and input multi line message in Feedback message text input.

Git Friendly Files
We’re always trying to git friendlier with how we generate files.

• Round values in archived Flow File

Timeline
It only took 2 years for this one…

• Add ability to select and deselect all keyvalues (cmd + A / Cd + Shift + A)

Sketch Maintenance
Some necessary updates for handling the latest version of Sketch.

• Update version of Sketch test files.
• Stop saving Sketch files when running unit-tests.
• Update, save test files with Sketch 55.

This release introduces a new easing curve window – with enough preset curves to fill a bucket. You can choose from any of the standard easing curves that have been around since the 80s, and you can also create custom curves.

Easing Curve Window
Pure Butter. Someone asked us a long time ago to have custom easing curves. We set out to do this, and along the way needed to lay a lot of foundation before getting to this feature. Finally, we’re done. And, we’ve also laid the groundwork for behaviours.

• Add a new easing curve window
• Incorporate all the default bezier options (e.g sine, quad, back, etc.)
• Add a super hot easing curve editor view
• Add ability to create custom curves
• Add ability to modify control points on easing curve picker
• Add ability to modify control points via text fields
• Add custom easing to html and iOS export
• Use page control to toggle between preset and custom curves
• Animate the size of the window to hide / reveal curve editor
• Save window expansion state
• Expand window when user creates new custom curve
• Click on curve in timeline selects that curve + launches window
• Disable creating custom curve when step selected
• Create an animatable path button
• Customize animations for + x and < > buttons
• Add ability to delete custom curves
• Handle edge cases when deleting curves
• Select custom curve after adding or deleting curve
• Allow only Step curves for non-animatable propeties (e.g. text content)
• Udate easing curve selection correctly after reversing a timeline
• Switch between In / Out or Forward / Reverse curves automatically when reversing a timeline
• Update easing curve editor when user selects a new tab
• Allow user to increment control points via up and down arrows.
• Update easing curve window after timeline changes
• Highlights selected curve, updates custom icon
• Clean up all the things

Exporting
A touchup for exporting to HTML.

• Converts maskToBounds property to overflow style in HTML export
• Added a method to encode images directly into SVG files (fyi, foreshadowing)
• Adds background pattern support for SVG

Scaled iOS Animations
We’ve figured out a solid way to scale your animations on iOS, so it’s possible now to change the size of a Scene in code and have all the spacing, and sizing of animations follow suit.

• Add scale(to:) method to exported SceneView class

Git-Friendly Files (again)
We used to have a git-friendly export, and then our relationship took a turn, but we’re back together and happier than ever.

• Write stable JSON files

Otros
We tidied up a few loose ends.

• Updated our About Window – colors / names / praise
• Fix mask corner radius problem
• Close open documents when app is deactivated or app is opened no valid license is found.
• Open Welcome window after activation process is successfully completed.

Honestly, we hit live on a release and 30sec later another related bug came in from our crash reporting system. So, we’re catchin up on that one.

The Intro Vid
Stopping the intro vid shouldn’t cause Flow to crash.

• Stopping the intro vid no longer causes Flow to crash… as it never should have done.

A micro release.

The Intro Vid
Opening the intro vid shouldn’t cause Flow to crash.

• Opening the intro vid no longer causes Flow to crash… as it never should have done.

This release is a solid hodgepodge of nice updates. In particular, we’ve improved import and export, fixed a glaring issue with round corners, and have introduced a new kind of layer - a plain layer, a boring layer, with nothing in it… This is great news for exporting properly structured <divs> or CALayers instead of being restricted to shape / image / text layers.

Swift Update
Update export to Swift 5.

• iOS template now exports Swift 5 code.
• Yup.

Sketch Importing
We updated a few things with regards to importing Sketch files.

• Reverse order of layers copied from sketch so they show up in the proper order in Flow
• Add ability to represent interaction connections
• Import hot spot layers from Sketch files
• Load sketch flow connections
• Preserve artboard IDs

p.s. If you’re crafty you’ll figure out what we’re doing with the last four tickets in the list above

UX/UX
A couple tiny fixes.

• Text is smoother on screen because we’re now updating the backing scale factor when changing zoom level.
• Make modifying resizing constraint undoable.

Crushed
A few nasty bugs met a timely end this week.

• Duplicating a layer by option-dragging now doesn’t not show the layer (i.e. the original layer was disappearing during the drag action)
• Tightened up resizing layers vertically (things were overstretching).

Export - iOS
You can now clip a layer to its bounds, and other lovely things.

• The masks to bounds option in Flow is now exported to iOS – this will let you do some pretty nifty things.
• Initial font sizes are now properly exported.
• There is a better way of handling autoreverse and repeat options for timelines / animations – you can mess with this in your Xcode projects.

Export - HTML (aka Corner Radii)
MMMMM. Flow wasn’t exporting corner radiuses properly, and that was a sad thing.

• Radiuses now export properly, and that IS a beautiful thing.
• They animate

Layers!
OMG. You can actually make layers that don’t have content in them. For example, if you want just a straight DIV in HTML. For example, if you was just a straight CALayer in iOS.

• Add option to create empty layer.
• Convert empty groups to layers.
• A lovely trick: if you created a group, and didn’t rename it, and remove all its things, we change its name to Layer – because having a layer called Group didn’t make sense to some of us, though it did to others, but it was the former group that won the UX battle.
• Patch up bugs related to allowing empty layers (which some of us think are empty groups - and, technically they are correct)

Trials
Like our trial? You can now click on the pink button to jump to the license purchase page.

• Do it.
• Do it now.
• You won’t regret it.

Sketch libraries. Like a pro, you can import them now. If you’re keeing up to date, you’ll see we have been busy trying to get a few solid fixes out on a weekly basis. So, here’s a few lovely updates for this week.

Sketch Library Import!!!
This gets its own section. You can now:

• Import symbols from Sketch libraries

Other Sketch Import Improvements
Making things a bit tighter, thanks to some user feedback about styles.

• Include symbol background color only if it is enabled in Sketch
• Exclude importing styles if they are disabled in Sketch (e.g. shadow, border, fill border options)
• Fix importing nested symbols with resizing constraints

Mask to Bounds (in Flow)
Want something to slide into the frame of another layer? Now you can (but only in Flow).

• Create a Mask to Bounds property
• Started working on exporting this feature to iOS / HTML (this will be in a 1.4.4)

iOS Exporting
A small touch.

• We added the Flow version to exported iOS projects.

A Wee Bug
Travis was naughty, and didn’t fully test something – but he handed off responsibility to Jeremie… who also was less than accurate. We apologize for this bug, that you probably didn’t even notice.

• Create ImageView with proper positioning.

A few user-requested fixes, obvious bug crushing, and a loving desire to keep improving Flow.

Zooming
For all your microscopic design needs.

• You can easily zoom to fit the scene to the stage
• Pick a bunch of layers, and zoom to fit that selection
• Dive in up to a max zoom of 1600%

Media Export
Yesterday: Charlie Chaplin movies. Today: Blockbusters.

• Movies now export with their audio tracks

Code Export
For you iOS devs – a small tweak.

• We added options (in export code only for now) to autoreverse and repeat animations on iOS.

Resizing Animations
Started too small? Make your animations bigger.

• Resizing the artboard, or animations, is much improved
• In relative mode, resizing correctly adjusts keyvalues and sizes
• We refactored a ton of code for this.
• Jeremie panicked a bit.
• He’s a wizard.

Bugs
A few bugs didn’t survive this release.

• Once upon a time you shadowed images had no shadows, today they do.
• We made a complicated thing simpler… SimpleSetKeyValueValueCommand

This update cleans up a few crashes that have been happening with our latest release, and smooths out some rendering issues when exporting for HTML and running in Safari.

Flow Common Git Repo
When exporting to iOS, there are a few common files that we use to handle animations and integration with UIKit.

• Create Git repo for Flow Common
• Include Flow common as Git submodule in Flow
• Reference Flow common files from bundle

Safari Rendering
Safari wasn’t rendering properly. Thanks Safari.

• Added a lightweight animation to force rendering for the entire artboard.

Export Fixes
Updated some important things related to exporting – mainly for Safari, but also for gif/apng/mov files as well.

• Remove references to and file generation for css animations
• Ensure Text appears in gif export
• Fix exporting text in Movie export
• Remove declaration of CSS filters (for shadows), animations will handle this setting
• Use classes not ids in html export - so you can use multiple exports on the same HTML page

Crashes
Ah, there were some crashes. Only a couple. Gone now.

• Fix crash when trying to delete scene
• Fix importing attributed string

Flow now exports drivable animations.

This is massive for the future of Flow.

Drivers are a critical step towards integrating interaction and “prototyping” into Flow itself. Interaction has always been our goal, and this release really concretes that direction. Our approach to integrating interaction is code-first because it proves that components are possible using Flow’s unique approach to design, animation and production.

Enough said for now, here’s a “short” list of all the things we did since our previous 1.3 release.

Keyframe Animations
This is where drivers start, with a massive overhaul of how we handle the export of animations. Ulitmately, this feature gives us major performance improvements to exported projects, and much more elegant exported code.

• Use CAKeyframeAnimations in iOS export (major overhaul of our code export template)
• Fix synchronization issue with exported iOS animations (Using keyframes instead of timersl)
• Use JS + web-animations api for HTML export (major overhaul away from CSS animations)
• Use SVG keyframe animations (instead of multiple tags)

Drivers
Flow now exports drivable animations. You can use sliders, progress updates, triggers or gestures to progress through your animations. On iOS and HTML!

• Add iOS driver to exported template (drag or tap to move through the animation)
• Add HTML driver to exported template (slider or buttons to move though the animation)
• Sync SVG and Web-Animation API in control of driver
• Make HTML timelines resuable and swappable

Exporting Code
A laundry list of the lovely things we update to make the previous two sections possible.

• Add launch screen animation to iOS template
• Add SVG animation easing
• Add SVG keySplice, keyValues, keyTimes to export
• Add gradient animations in HTML
• Add fill image animations in iOS
• Add SVG gradient end point animations
• Fix image changes in HTML
• Fix text alignment in HTML
• Fix corner radius animations in HTML
• Fix shape resizing animations in HTML
• Fix exporting fill gradient in iOS
• Fix shadow animations in HTML
• Fix step easing curve implementation in HTML
• Fix complex transform animations in HTML
• Fix anchor point animations in HTML
• Fix mask animations in HTML (Safari + Chrome, FF still has a little bug)
• Export contents gravity for images (e.g. center, bottom-left, etc.) in HTML
• Export only images, sounds and fonts for the current timeline
• Overwrite old exports w/o sending previous versions to trash (saves a ton of disk space)

Exporting Media
We upped our game when it comes to media exports. Check it out…

• Add APNG (animated png) export
• Open GIFs and APNG in default browser after exporting
• Add UI option for opening after export is complete
• Add content scale option for media-based export (1x, 2x, 3x, 4x)
• Add looping option for GIF and APNG export
• Fix shadow scaling bug for scaled media export

UI/UX
A few things we updated in the interface.

• Added a menu item and hot-key for inserting images into your projects
• Added exit button to the welcome activation window for users to close the app
• Created custom feedback controller that uploads tickets to Zendesk
• Add select all timelines check box to code export panel
• Fixed color well bugs
• The color well will highlights to indicate if it is actively linked to the color picker
• Calibrate zooming and scrolling the stage when using track pad and using mouse wheel
• Display time pop up when dragging keyvalues
• Right-clicking on a layer in the stage now displays a contextual menu
• Added a reveal menu item to layers

NewsFeed (UI/UX)
We added a lovely in-app news feed to keep you apprised of the goings-on with Flow.

• Added a new feed view with clickable links to news items
• Added a top bar item to hide / reveal the news feed view
• Highlight the top bar icon when there is news

Code Preview
A touchup.

• Update code preview to use the new CAKeyframe animation code.

[Yes, CP is still only for iOS]

Bugs
A slew of bugs were destroyed.

• Fix ability to select pasted keyvalues after pasting
• Fix layer pasting offset
• Properly update “timeline from sketch” button on the stage when there are no timelines in the document
• Fix timeline hierarchy row selection bug
• Fix selection behaviour in Timeline Hierarchy outline view
• Fix focusing issue for timelines only when selecting a new timeline that isn’t currently in focus
• Fix font size and font panel selection / sync
• Properly sets font coming from font panel
• Fixes mask icon asset for light mode

Trial Licenses
We changed how many days you can use the trial license.

• Trial licenses are now 15 TOTAL days, instead of 30 from the day you first get a license.
• This should give users more time if they’re not opening the trial every other day, or if they get a license and forget about us for a month.

Crashes that Won't Happen Anymore
We crashed into a few things, but we’re better drivers now.

• Prevent app from crashing when timeline duplication fails
• If no layers in symbol master don’t create a layer
• Fix a bunch of things that were crashing, but that don’t warrant a description because they were silly and you probably just don’t want to read any more in this list because it’s so long, and thanks for getting here if you read throrugh everything we wrote above… because we did a lot, and we cried a lot along the way… and we really appreciate your attention to detail.

Crash

• Prevent crash when dragging scenes – with nested shape groups – in Sketch import process.

Export

• Use current scene size in GIF, movie and PNG export instead of original size of scene when imported.
• Update iOS export to Swift 4.2, make iOS 10 minimum OS.

Crashes

• Prevent crash from occuring when displaying duration pop up.
• Prevent crash when dragging scenes in sketch import process.

UI

• Change default colors of inserted shape layers to “Flow” colors.

UX

• Allow user to simultaneously area select and scroll in the timeline to select keyvalues.

Copy / Paste
Obviously, right? This update was actually a ton of work to get Flow up to expected behaviour. Here’s what we did:

• Restructing infrastructure for copying layers and keyvalues
• Add proper copying data to pasteboard
• Allow pasting between projects
• Fix placement of pasted layers when pasting into a different timeline.
• Preserve transform properties when copying / pasting sublayers of a group.
• Add copying keyvalues to copy action
• Paste keyvalues with proper key combination
• Add new paste commands to main menu

Sketch Import
Still catching up from the latest change to Sketch’s file structure.

• Fix sketch import to support nesting of combined shapes

Path Boolean Updates
Strenthening how Flow handles path boolean operations.

• Fix path subtraction problem
• Fix path boolean ops by rounding
• Fix path subtraction edge cases

Low Level Love
A few critical things we needed to update to handle everything you just read.

• Make dictionary config equatable
• Refactor LayerFactory in order to avoid useless returning array of created layers
• Refactor interpolate logic
• Make operation property for fleshed shape layer
• Make Layer & LayerSnapshot codable

Export Updates
A bit of polish.

• Fix CSS font references for HTML exports
• Add “Made with Flow” comments

Crushed Bugs
We crushed the following:

• A crash occurring when dragging Artboards in sketch import process.
• A crash occurring when importing sketch files which contain combined shapes which themselves contain combined shapes
• A crash occurring when copy pasting layers from sketch which contain combined shapes which themselves contain combined shapes

There are a couple more bugs we are currently crushing, and when they’re well crushed, smashed, pulverized, we’ll release again… Hopefully in a few days.

UI
We tuned up a lot of the interface and how things work. Here are the things we added:

• A more obvious state for Relative Mode.
• The ability to show / hide titles on the toolbar.
• Playhead snapping to the scrubber on the touch bar.
• The ability to select a range of time to review on the timeline ruler.

And, the things we fixed:

• Separated transform into two lines called rotation and anchor point in properties panel.
• Properly update colors when toggling between dark mode and light mode.
• Hierarchy view selection colours were messed up, now they’re better.
• Update lock icon in properties panel.

Thanks @AS for your help on identifying a few small improvements that made a great difference.

UX
To make life a touch smoother, a tiny bit more pleasant, and a little better in general, we:

• Updated the document creation workflow.
• Prevent the activation window from constantly popping up.
• Let you skip to the in / out points of selected track animations (see the new commands below).
• Introduced separate time ranges for each timeline.
• Disable export when there are no timelines in a project document.

Performance
We dramatically improved the performance of the app when:

• Dragging many key values at once in the timeline.
• Scrolling & Zooming the timeline with many tracks.

Thanks to @JMcK for the heads up on these two points.

New / Updated Commands
A couple of subtle touches / new key commands will let you do the following:

With layer(s) selected on the stage…

• Pressing U will expand / hide the tracks for those layers in the timeline.

With layer(s) or track(s) selected on the timeline or the stage…

• Pressing I will jump the timeline playhead to the FIRST key value of the selection.
• Pressing O will jump the timeline playhead to the LAST key value of the selection.

When the Time Range selector is smaller than the entire timeline…

• Pressing CMD+Left will jump the timeline playhead to the START handle of the selection.
• Pressing CMD+Right will jump the timeline playhead to the END handle of the selection.

A small change…

• Toggling Relative Mode is now done with CMD+OPTION+R (we’re queuing up a new command for CMD+R)

Export
Getting things to code…

• Fix placement issues in iOS when exporting a certain size artboard and running it in a different size device simulator
• Export fill images in iOS.
• Add support for testing Export more thoroughly.

File Size
Our files were a bit chunky before. So we:

• reduced the size of Flow files by storing image hashes instead of data blobs.

Crushing Bugs
We absolutely crushed these bugs…

• A sneaky one that was preventing the creation of font and font size tracks.
• A snarky that was preventing proper undoing of timeline scaling command.
• A tiny one whose job it was a to not update the timeline ruler when scrolling in timeline.
• A beautiful one that really only ever wanted to see Flow crash when resizing images.
• A lazy one that really wanted scrolling to be slow when choosing a sketch file in finder.
• A confusing one that wanted buttons to be on top of one another.
• A slightly obscure one that tried to mess with the timeline hand dragging tool icon.

Crash

• Fix Crash when displaying Export Window

This week’s retrospective.

“Hey, Travis, can you polish up the colours and UI for Mojave?”

“Sure thing.”

⇨︎ Deletes innocuous UI component and introduces a critical bug right before shipping.

Thanks Travis.

UI
OMG. Soooo much Yin and Yang.

• Updated Light mode UI, use system colors like control accent colors etc to make UI more dynamic
• Created Dark Mode UI

Document Creation
Finally.

• Ability to create empty documents without linking a sketch file

Timeline Creation
Ah, yes. When you have no timelines in your project, we show you a couple of lovely buttons on the stage.

• Timeline Creation options in place of the stage when no timelines present
• Ability to create empty timelines, without using sketch artboards

Fix Sketch Import
Sketch 52 is now supported. Man, did they ever overhaul their document structure this time around.

• Fix Sketch Import for files created with Sketch 52 and later
• Prevent user from importing sketch files older than 52.0

Welcome Window
We poured an extra ounce of ❤︎ into this one.

• Updated Welcome window UI
• Intro Video
• Intro.flow sample file

File Size Reduction
Smrt.

• Reduces preview image generation to only the first timeline

Sketch Import Window
We poured 2 ounces of ❤︎ into this one

• Updated Sketch import window UI/UX
• Drag n drop artboards

Stage
A simple touch.

• Hide highlight layer while panning stage.

Scene
A much needed addition, you can now resize the main scene of a timeline.

• Add ability to select and highlight the scene
• Add Scene Properties panel
• Add Preset device sizes in scene properties panel for scene to various device sizes
• Add ability to resize the scene via properties panel and resizing handles on stage
• When resizing scene changes applied “relatively”, i.e. no animations created (scene’s properties are non-animatable)
• Add ability to set scene background color and opacity
• Add ability to rename the scene
• When resizing scene can chose whether its contents should be resized or not (i.e. option to override scene’s sulayers resizing constraints)
• Added a layer with a checkered pattern behind the scene to provide visual feedback when modifying the scene’s opacity
• Hide the scenes shadow when the scene is selected
• Disable copy pasting of scene.

Bugs
A few John Goodman’s for you.

• Fix crash when changing opacity
• Fix menu validation bug
• Migrate to Swift 4.2
• Fix Xcode 10 warnings
• Area selection bug
• Dont apply relative mode when creating new timelines.
• Prevent timelines from staying selected.

Activation Failure
There was a relatively incoherent message, now we hope its less than relatively incoherent.

• Fix activation failure dialog

Export
Blam > Hopefully this makes export to safari better. Safarrrrrrrriiiiiiii.

• Fix Safari SVG animations

HTML Export
We launched with a strong iOS export. Here, we make amends to all the lovely web people who have given Flow a run for its money:

• Don’t include empty css animation blocks in html export for non-animated layers
• Fix anchor point animations in html.
• Add ability to export animation tracks with multiple keyvalues in html
• Add ability to export step function easing curves in html fix border width animations in safari and chrome
• Fix rotation export in HTML
• Fix exporting flipped vertical and flipped horizontal properties in html export

There’s more HTML improvements on the way, but this is a pretty decent step for now.

SVG
And, a few SVG updates to accompany the ones above:

• Don’t scale width of border when scaling SVG
• Fix SVG scaling
• Adjust SVG path string precision

iOS Export
A bit of a tune-up for iOS export:

• Patch strokeEnd Animation bug in iOS export
• Correctly animate border width in iOS export
• Export images into iOS as 1x
• Set initial corner radius of layers in exported ios projects
• Fix exporting contentMode in iOS export

UI / UX
To make Flow just a little bit more lovely to use, we improved the following things:

• Prevent insert shape drop down menu icon from being cut off
• Allow zooming of timeline with track pad
• Allow users to create timelines using one artboard
• Fix the checkboxes in the export panel so that clicking on their associated titles checks/unchecks the check box.
• Update code preview when switching to new timelines
• Add border color, border radius and border width code snippets to CodePreview

Exporting
Tuning up how to spit out code:

• Move to the trash any previously exported timelines when reExporting the same Flow document
• Support exporting content mode of image layers in iOS and HTML
• Support exporting borders in iOS and HTML

Bugs & Crashes

• Fix bug causing flow files to become corrupted
• Fix crash occuring when resizing layers to 0x0

UI/UX
A tiny bit of polish.

• Polish shape menu (kinda)
• Add hot keys to change focused timeline

Integrity
A critical update to how we save files.

• Prevent bug whereby saving flow document can potentially corrupt the flow file

Crashes
Crushing things.

• Prevent crash when loading code preview
• Fix crash happening when user tries to bring up feedback window and main Flow Window is hidden or inactive.

Export
Improved format for exporting code.

• Fix path animation on HTML export
• Store exported code in top level directory named after Flow Document
• Export timelines into separate folders
• Use unique bundle identifiers for every exported timeline
• Avoid overwriting timeline folders when timelines have the same name in the flow document.

Bugs
Critters, everywhere, but not too many thankfully.

• Fix problem causing scene to be invisible in Flow for users on macOS
• Fix undoing an attributed string change
• Keep the playhead within the focused timeline’s duration after switching, adding or removing timelines
• Prevent crash due to stage drag handlers not having time set

UI
A tiny addition.

• Added Dropdown for inserting new shape layers into Flow document

iOS Export
Always tightening this one up.

• Fix exporting of attributed string
• Use triple quotes swift syntax for multiline strings. (Makes it easier to read multiline the strings in exported code)
• Escape quotations in single line string in Swift export

HTML Export
Tuning up the web export – a very different structure than iOS, so we’ll be constantly updating this bit.

• Add top level art board element to HTML export

Bugs

• Fixed a crash when scaling keyvalues
• Fixed iOS export when exporing multi-line strings in text fields
• Fixed lineJoin / lineCap export to iOS
• Fixed shadow offset for Y property when exporting
• Squashed a bug causing Flow to crash when opening a file that had its properties panel collapsed

Pretty Things

• Draw title of property tracks in blue
• Open/close group icons in Timeline when expanding and collapsing group layer
• Added the ability to use the property panel to change the start/end time of multiple keyvalues
• Updated syntax highlighting to support multiline strings in code preview
• Can now print multi-line strings for attributed string text in iOS Export

User Interface
The pretty, important things.

• Fixed white spot appearing in corner of hierarchy panel
• Use the user display’s color space instead of generic color space (looks more like Sketch colors now)
• Added dividers to the top of timeline headers
• Added a tiny little label that says “Timelines” in Timeline Hierarchy Header view
• Created a consistent blue color, applied it throughout the app’s style
• Updated button style and size top bar
• Updated style of timeline ruler view
• Added a shadow, and a tiny border (can you see it) to to scene to improve contrast between scene and stage
• Stopped drawing easing curves if there’s no space between keyvalues

User Experience
The things that will make you smile, a.k.a the things that would make you not smile if they weren’t there.

• You can now increment layer property values by pressing up and down keys while your cursor is in their textfields on the properties panel.
• You can also increment in the keyvalue time fields
• Created a nice way of translating dev-speak to friendly language for error and alerts that pop up.\
• We now center the main artboard to the stage when switching between timelines, or opening new files.
• Add relative mode button that lets you change the values across all keyvalues for a property throghout the entire timeline.
• You can now snap the playhead to keyvalues on the timeline
• Fixed up how keyvalues snap to tick marks in the timeline header
• Timeline hierarchy and tracks collection view rows are in sync when collapsing and expanding (they were in a fight before)
• The stage now zooms relative to currently visible center of stage view
• Pause playback when dragging on the touch bar
• Added a bunch of tooltips
• Prevent interaction with trackview components which do not belong to the focused timeline (e.g. you can’t move the keyvalues of a Timeline that isn’t focused)
• Collapse and expand track views appropriately when switching focus to a new Timeline.
• Save flow version used to create flow file in .flow file
• Only show permissible easing curve functions in multi-keyvalue properties panel
• After copying keyvalues, you can now paste in place
• When moving layers on stage, you must now hold down command in order to snap layers to guides and edged, etc. (was the other way around before)

Performance
Quasi-UX stuff

• MEGA performance increase by improving the signals infrastructure
• Improved stage performance when handling all timeline changes
• Improve sound track drawing performance

Exporting Media
Here’s what we did to help you get media OUT of Flow…

• GIFs!
• You can also export the current frame as PNG.
• Updated the compression settings for MP4 to Apple ProRes4444 / .mov < better quality than before.
• Hidden layers were getting through, now they down when exporting to Gif, PNG or movies

Exporting Software
Here’s what we did to help you get code OUT of Flow…

• Added crypto utilities and verify digital signatures
• Added launch story board to exported iOS projects
• Added a block to suppress animations when creating views in a ViewController
• Added an app icon to exported iOS projects
• Export layer flipping on iOS (sometimes things were upside-down)
• Add even-odd fill rule on export (now you can have complex shapes with holes cut out properly)
• Timeline you’re exporting now gets slipped into a view that is centered in the exported iOS project
• Dash offset values are now exported

Bug Fixes (General)
Things that should have worked in the first place…

• Copying and pasting text layers within Flow
• When pasting keyvalues onto another layer, prevent unnecessary extension of timeline duration
• Remove track if necessary after keyvalue pasting operation
• Fixed a rounding bug in PasteKeyValuesForTrackCommand
• Load source file from archive if Sketch file can’t be deserialized
• Clip values inputed by user in textfields in properties panel and keyvalues panel (e.g. can’t make the stroke end 100)
• Fix undoing deletion of layers
• Prevent sizes from being negative while being changed by relative mode
• Update resizing constraints after resizing layers
• Fix problem when resizing timeline
• Insert tracks at proper indicies in timeline hierarchy
• Update selection in timelineView hierarchy when expanding nodes
• Expand nodes in the timeline hierarchy to match ^
• Updates position of playhead scrubber properly
• Fix calculation of snapped time in TimelineView Model
• Fix rounding issue in snapToClosestTickTime method
• Apply User settings when reopening document

Bug Fixes (Code Export)
More things that should have worked in the first place…

• Fix shadow export
• Fix path export
• Fix font export
• Fix export problem for rotations during reset
• Fix exporting mask animations in iOS
• Fix animation flickering in iOS
• Fix miter limit when exporting HTML
• Fix exporting of Textlayers whose fonts are not found on users system
• Fix path animations on iOS export
• Fix dash pattern animation export
• Make sure shadows don’t show when shadow color is clear

Crashes & Beachballs
Things that shouldn’t happen…

• Stop flow from crashing when selecting timeling after opening flow file with properties panel collapsed
• Prevent user from selecting empty playback range causing crash

Property Changes
New tidbits you can change in Flow…

• Added Dash pattern offset property
• Added a flipping panel with segmented control
• Converted horizontal/vertical flip properties to be non-animating
• Created a property panel for dash pattern keyvalues

Code Preview
Improvements to the code preview window…

• Added a new custom black code preview style
• Added a tiny little message to the code preview window when no layers have been selected
• Added a split view to handle layout code on the left, and animation code on the right
• Updated the aesthetic of the code preview window (styles, colors, fonts, etc)

Sound
A few things audio…

• Ensure sounds can be played when reopening Flow file with sound in it
• Set max duration for sound tracks to 30s (sorry, you won’t be able to listen to Over the Hills and Far Away)

Path Handling
There’s only a few bullet points in this one, but it was a lot of work that made Flow immensely better…

• Save normalized paths so that manipulating width or height of layers doesnt affect path property of shape layer
• Add path equalization to enable path animations
• Use normalized paths everywhere

SHADOW IMPORT/EXPORT BUG FIX
Thanks to some lovely feedback we received today, we found that we weren’t properly importing shadows from Sketch, or exporting them to code.

• Set default shadow opacity so shadows are visible in Flow after importing.

TIMELINE BUG FIX
There was a bug on the timeline that we found shortly after releasing.

• Fixes an area selection bug where keyvalues weren’t being selected after scrolling downwards quite a ways (for animations with lots of tracks).

Right, so usually I like to try and organize these release notes into categories so you can see a little easier just what we’ve been up to. Buuuuut, this time… there’s just too much, and I’m on my second cup of coffee, and there’s about 10 other things to do, and we’re trying to get to a V1.0 in a few weeks, so really…

The big news is…

NEW TIMELINE
This one is so butter. We’ve rebuilt the timeline so that it can handle 2 mega things:

• Zooming! - Yes, you can zoom in an out.
• Area Select! - MMMMMM, you can use your mouse to select a bunch of key values.

The timeline is so sweet now.

PERFORMANCE
Also another biggie. We’ve dramatically improved performance. It’s not easy balacing time and space, but we hope this new version is definitely less beachbally than the previous release.

All The Other Things
The list was too long to wrangle this time, so here it is:

• Execute selection and deselection of hierarchy rows on main thread to ensure they don’t interfere with reload
• Fix grouping moving and ungrouping nodes
• Archiving tests
• Fix timeline hierarchy update problems
• Fix Timeline Selection bugs and crashes
• Dont resize group when removing one of its sublayers
• Fix moving layers command bug
• Fix reloading of tracks
• Made open folder button at TemplateExportProgressWindow
• Performance improvements
• Fix release problems
• Updater fixes
• Made dashPattern panel
• Fix problem when computing row changes
• Reload before expanding and collapsing
• Enable live resizing optiosn for root layers
• Handle updating the timeline when grouping and ungrouping and moving layers in hierarchy
• Fix Bug preventing the deletion of tracks when deleting layers.
• Snap play head to visible tick marks when dragging playhead and holding down CMD
• Copy/Paste Tracks
• Fix eye Icon bug
• Fix soundTrack insert removal indexing bug
• Fix keyvalue scaling
• Fixed the logic for fading step right and left function
• Fix drag and drop
• Bug FIX: Clicking on easing curve in track should pop up easing curve controller”
• Fix algin keyvalue undoing
• prevent splitting step left right and middle animatins
• Fix crash when area selecting out of range in timeline
• Polish panels background colors and broders
• Fix bug causing crash when removing first timeline
• Set timeline cursors via cursor rects
• Update DevMateKit to latest version
• Show correct time in timeline pop up when dragging past beginning or end of timeline duration.
• Fix problem where tracks would be cut off when resizing
• Add TimelineHierarchyViewModel fix crashes
• Allow splitting of layer and timeline Tracks
• Add keyvalue hitting radius to metrics
• Add pop up back to timeline
• Added functionality to grey out sound and shape in the insert menu.
• Polish timeline esthetics
• Add file for defining night build pipeline
• Implemented hand tool functionality in timeline
• Check export directory and print better error
• Added Tests for ExtendTimeline and ScaleTimeline commands
• Reduce memory use
• Usee all available size for timeline content view
• Track cursor when dragging
• Release script improvements
• Remove unnecessary try?s
• Fix flow file openning
• New timeline
• Fix memory leaks
• Changed the stage background color for light theme
• Fixed adding sound bug
• Update stage colour
• verify code signing in Release script and sign embedded libraries in Flow
• Move Angle.swift to FlowCore and Make FlowCore a dynamic library instead of a static library.
• Multiple applications of Keyvalue Distribute and Alignment commands should not have any affect after the first one.
• Removed shadow opacity property
• Added a test to check that anchor points dont move while scaling a middle KEyvalue
• Allow selection of sublayers that our outside of groups bounds
• Remove unnecessary resizing of group during grouping command
• Polish Multi keyvalue info panel
• Adjust timeline selection box stroke and fill
• Clip values of properties when they exceed or subceed max and min values respectively
• Additional features for the scale and clip/expand popup box in timeline
• Add timeline zoom slider
• Give user feed back when clicking on keyvalues align distribution icons
• Fixed minior alignKeyvalue bugs
• Added timelineselectionBox fillcolor
• Hook up keyvalues alignment/distribution Buttons to Commands
• Allow selection of sublayer outside of group bounds
• Create Sound Drag Handler Use trackView in stead of SoundTrack View.
• Implemented DistributeKeyvaluesAcrossTracksCommand
• created Distribute Keyvalues within Track and Tracks Commands
• Add resize group to fit menu item
• When clicking on timline or layer keyframe not all selected keyvalues (not in key frame) are deselected
• Implement dragging keyframes
• Fix KeyFrame Selection
• Add basic keyvalue alignment
• Have only one timeline expanded at a time
• DuplicATING keyvalues via dragging in timeline
• Added relative changes mode
• Implement Scaling of keyvalues with TimelineView via dragging
• Remove refitting of group when moving sublayers
• No longer re-fit group after resizing
• Fix area selection box drawing
• Optimize dragging of multiple keyvalues (without scaling) and fix selection bugs when dragging.
• Fix duration undo titles prefill text field
• Add scale and expand options to duration
• Grouping Fixes
• Correct playback selection when scrolling the timelineView
• Fix undo for deleting tracks
• Cleaned up timeline playback range selection
• Fix Move Keyvalues bug when dragging to the left past t =
• Move drag tolerance to base gesture handler only invoke timeline area select hander when drag does not start on to of keyvalue or keyframe
• Added timeline zooming
• Move Multiple Keyvalues
• Add ability to select keyframes
• Handle time range selection
• Add TimelineAreaSelectHandler
• Create TimelineGesture handler
• Refactored selection logic in timeline fix selection bugs
• Allow dragging after clicking to set animation position
• Created TrackRowView
• SyncUp vertical scrolling for tableview and outlineview of timeline
• Round time when checking for key values
• Clean up timelineView UI
• Changing coordinates of view when clicking timeline
• Split TimelineView into An Outline View and a TableView to Enable Zooming and panning in the future
• Save scene scale and offset to document
• Changed keyvalues time panel checks round earlier on property textfields linted
• Removed unused connections
• Remove unused TrackViewControllers when track nodes are removed from node hierarchy
• Deselect keyvalues on brief mouseUp
• centred small artboards in sketch
• Move logic from trackview into VC
• Added scaling keyvalues on multikeyvalue panel
• Create pastekeyvaluesintolayer
• Keep selected keyvalues selected if clicking on selected keyvalues
• Keep keyvalues selected if shift click in timeline
• Let multi-keyvalues panel call set animation curves command
• Always round edges of tracks
• Update copy keyvalue structure
• Made start and end time editable for multi key value panel
• Made ScaleKeyvaluesCommand
• Draw left and or right side of keyvalues and track sections squared off when step animations are present to give user visual cue of step animation
• Make left and right arrow keys move timeline scrubber
• Change which extract function called
• Made step track colours lighter
• Fix layer resizing problem

Sketch Fixes
Sketch 50 beta came out, and things broke again, but we fixed them:

• Importing paths
• Importing images
• Importing text layers All work again.

Multi-Keyvalue Selection
Like music to my ears. This is one I’ve been waiting for for a long time.

• You can select multiple key values.
• And copy them…
• And paste them…
• Which requires some backend majique to remove redundant keyvalues
• And also requires a much needed Multiple Keyvalue info panel
• To make things easier we created some backend copy / paste helpers
• Made sure the easing curve option ignore keyvalue pairs with the same value
• Improved copy infrastructure

A New Step Curve
Ever feel like you just wanted to be somewhere else right now? Well, until today, so did keyvalues. Now you can set a special kind of curve between two keyvalues that makes them JUMP from one value to the other without animating. It’s like saying “Don’t animate between 10 and 20”, and it’s lovely.

• Adds step curve option for animations
• Support step animation in HTML export
• Support step animation in iOS export
• Adds color-tone change to track areas where steps happen

UI/UX
And for some lovely improvements to the user experience and interface:

• Resize group layer when sublayer is deleted
• Expand group in hierarchy view after undo brings back group
• Remove jump when changing anchor point
• Code preview works for multiple selection on hierarchy view
• Made send feedback button in main window work again
• Delete tracks in timelineview when deleting a layer
• Resize scenes if too small in sketchImport window
• Fix selection box problems
• Prevent deletion of layers if dragging
• Prevent skipping around in timeline while dragging on stage
• Generate code if code preview is brought up

Export
The things we fixed when exporting your animations to code:

• Round values on export
• Export Images with the same name
• Fix image and font changes on exported HTML
• Made finish export only occur after export finishes
• Prevent playing animation while mouse is down
• Fix gradient export
• Fix mask export for iOS

Stabilité
Tidbits.

• Store images by hash in image catalog
• Clear out test files for release < lightens the load
• Fix group resizing when rotated
• Fix problem when dragging too far with locked aspect ratio
• Update gradient mask when necessary
• Fix crash when resizing

Grouping
I’m going to be honest here, if you grouped layers then had a good time with them, then decided they didn’t really get along and that they probably shouldn’t be in the same group, then you ungrouped them…. well, honestly, we used to just destroy all your hard work.

• Grouping used to destroy animations. Now it doesn’t.

CODE EXPORT
The major reason for taking so long to get back to you with a really great update is that we completely rebuilt our code export pipeline to use templates. This approach makes it “super” easy to customize the code output of Flow into ANY LANGUAGE YOU CAN THINK OF (probably even Latin).

Here’s what we added and fixed for export:

• Added templates < wham.
• Added HTML template
• Added HTML/CSS animation export
• Rebuild iOS export
• Added exporting sounds (iOS) 🎶
• Smart font exporting (iOS) - don’t export system font files, or files specified at www.iosfonts.com
• Fixed exporting text and attributed strings
• Fixed a reset issue for the timeline in an exported project (iOS)
• Fixed how we handle horizontal and vertical flips / scaling in animations (iOS)
• Fixed path rotation export - sets values instead of incrementing them.
• Fixed path animation export
• Added support for exporting masks (iOS)
• Remove old codegen framework
• Use new monolithic interface for Flood (TBH I have no idea what that means, but it’s by far the best commit title for this releasae!)

INTERFACE
We updated a few things in the interface, however more of this will be apparent in the NEXT release:

Here’s what we added and fixed for UI:

• Made parent tracks look like child tracks (renders keyvalues into parent tracks, adds gaps, etc…)
• Added a new export panel UI
• As a user you can more easily move keyvalues between, or on top of other values
• Updated the team list in the welcome window
• Initiate code export with a key combo: CMD+E
• Added a Send Feedback help menu item
• Updated a link to tutorials
• Made the eye / lock icons share a single column (option key toggles between them)
• … AND
• … LAST BUT NOT LEAST
• Added the ability to drag and drop layer rows in the hierarchy panel!!@!@#!@#! (@jerbear poured a lot of bsat into this to make it tip-top)

EXPERIENCE
We did our best to take all the great feedback and improve on some critical issues.

Here’s what we added and fixed for UX:

• Fixed the hide / lock button behaviour
• If an animation is running and you change something, the timeline will now pause
• Disabled the ability to accidentally right-click while dragging a keyvalue
• Image tracks do not get generated if there is no change between artboards (this was actually quite tricky because they’re treated like completely separate objects even though they may look identical)
• Fixed the re-expansion of the timeline (e.g. after undoing)
• Fixed the resizing of groups
• Fixed a small problem with layers having the same name
• Added backwards compatibility for text color changes in old Sketch files
• Prevent a silly and almost utterly unintelligible error dialog when exporting and overwriting folders
• Wrote a much nicer, friendly, and generally more eloquent error message when loading old Sketch files
• Fixed some issues with undoing of group move actions
• Fixed / re-added the deletion of keyvalues
• Fixed code preview (we lost it along the way)

PERFORMANCE
We tried to make things a little smoother as well.

• Put the rendering of code preview on a background thread.
• Increased responsiveness of the app when selecting many layers at the same time.

SKETCH IMPORT
This is a bit like UX, because don’t you just hate it when things don’t look the way you want them to?

Here’s what we added and fixed for Sketch Import:

• Extracted Sketch Kit (our lib for importing / handling Sketch files) into seperate library
• Updated Flow to read Sketch version 49 files - I really wish we knew the future and could anticipate their releases
• Fixed importing of text color
• Fixed mask animation importing
• Remove UUID from Keyvalues (thanks for the tip > @andydent)
• Handle things better when a user has chosen artboards which don’t match
• Handle pattern fill types

TESTS
We added hundreds and hundreds of automated tests to help us keep things stable so your creativity can keep on Flowing. (By “we” I mean Kobe and Joel)

HELP
We added a help window – and some content, but not a lot of content, because we’re a small team, and we’re trying hard, very hard, to bring you a great tool, so we have to spread ourselves a bit thin, but we’re doing our best.

Sketch
Two small fixes to catch up with the latest file versions in Sketch:

• Updated import to handle Sketch 49 file format
• A kiss from Jeremie

Crash
A couple of small fixes to catch up with the latest file versions in Sketch:

• Updated import functionality to properly “handle” slices on images
• Updated import for text color
• New, more clear layout for the .dmg (now it makes sense)

Improvements

• Removes group layers when they become empty
• Draws shapes into the layer hierarchy (mmmmmmm)
• You can now select layers – in the hierarchy panel – that are locked or hidden… This doesn’t select them on the stage.
• Keeps all your selected rows selected when the document is refreshing (otherwise this would be really annoying).
• You can only edit properties of selections if they’re unlocked and visible.
• You can’t Ducplicate anymore, but you can Duplicate (thx @Michael Franco).
• Fixes the generation of SVG code, it’s prettier now.
• Prevents the exporting of iOS standards fonts (per: iosfonts.com).
• Minimum build is now OSX 10.11 (thx @MvonS).

Updates

• Update the brand! New app logos galore ;)
• Adds a nice button for toggling the visibility of layers that are off of the main artboard.
• Updated the look of thumbnails via a lovely QuickLook plugin.
• Lots of visual polishing on the Hierarchy Panel.
• Prevent deleting an object when deleting a track in the timeline.
• Update parent tracks based on child track length in the timeline viewer.
• Update links to external sites and email addresses, they now use createwithflow.com ;)
• Track views show markers for key values in their child tracks.
• Fixes for using custom fonts.
• Keep timeline open while refreshing the document (i.e. so it doesn’t collapse all the time).
• Fixes a bug where editing text in the property field crashed the application.
• Update colors for selected tracks in timeline viewer.
• Hots up the hierarchy view by adding custom icons depending on the layer type.
• Puts some much needed love into how the eye / lock icons work in the hierarchy panel.
• Fixed a bug where groups wouldn’t have opacity applied during import.
• Fixes an error when exporting code with custom fonts.
• Fixes a crash caused by an invalid layer state.
• Makes an error message more palatable – for ensuring duplicate artboards have the same hierarchies.

Updates

• Handle overwriting of fonts on export
• Updates the error message
• Fix Crash caused by trying to add invalid property to layer state
• Fix error when overwriting fonts
• Adds release assets, basics and travelapp sketch files
• Removes old files, adds release-ready sketch files.
• Fix group opacity and styling
• Fix Shape properties not showing in the panel
• Update lock / eye icon colors to white when selected in hierarchy
• Arrow for selected track in timeline should remain blue.
• Changed color of selectedTimeline row to lighter color
• Adjust height of suffix labels
• Group arrows dis/appear
• Update color of hierarchy layer name when selected from stage
• Add ability to drag and drop (layers) rows in hierarchy panel to modify layer hierarchy
• Fix bug preventing rows in hierarchy panel from displaying
• Reselecting the rows for currently selected layers when the document is refreshed.
• Change appearance of mask to scene button to look like other tool bar buttons
• Drawing shape layer image paths in the hierarchy panel to visually associate the layer

Updates

• Reselecting the rows for currently selected layers when the document is refreshed.
• Create unit tests for context sensitive selection infrastructure
• Change website and emails to new flow website and emails in app
• Change appearance of mask to scene button to look like other tool bar buttons
• Drawing shape layer image paths in the hierarchy panel to visually associate the layer.
• Removing group layers when they become empty.
• Allow user to select layers in the hierarchy panel that are locked or hidden

Updates

• Fix parent tracks don’t update based on child track length / time
• Custom fonts not rendered properly
• Fix app crashes when editing text in the text property field
• Set type string of TextField property in TextLayerPropertiesPanel
• Make leading edge of parent track start at appropriate location
• Deleting a layer track deletes the object from the hierarchy and stage.
• Expand previously expanded nodes after document refresh
• Make Trackviews Associated to layers take into account the key value of their sublayers
• Deleting a layer track deletes the object from the hierarchy and stage.
• Visual polishing Hierarchy Panel
• Restored sketch plugin
• Visual polishing Hierarchy Panel (a)
• Visual Polishing (non-Hierarchy Panel)
• Changed Check out examples online url to http://createwithflow.com
• Changed the display of thumbnails so that they do not show with a corner curl and with a white background.
• Convert to Swift 4.0
• Visual polishing
• Add ui button for mask to scene