It’s the attention to detail, the refinement of the finest elements of a product, a design, a user interface, that helps a product stand out. UI Animations definitely fall in this category – they happen quickly and must communicate critical ideas, important state updates, or bring delight. On top of that, they take place in a fraction of a second. To truly nail a beautiful animation you need to precisely craft its motion, timing, and iconography.
It often takes a lot of iteration and testing to achieve a great balance of those elements. An interesting side-effect of achieving such a balance is that the product just fades away to the point where you don’t notice it, and when you do you might think something along the lines of… “oh yeah, that makes perfect sense”, and then never think about that animation again.
Furthermore, what’s difficult about trying to achieve this balance is that if you get it wrong then the effect is glaring.
This article is about today’s latest release and the level of detail we put into a few key elements of Flow make it easier to work with – like you’d expect, and like you’d not notice if it had have already worked this way.
Copy / Paste
We have overhauled how you can copy and paste layers and keyvalues in Flow. As you’d expect, if you copy and paste a layer, the new one will paste with a slight offset from the original’s position – you can also paste in place.
What’s new is that you can now:
- Paste or paste in place with keyvalues.
- Paste across timelines and documents.
- Paste keyvalues from one layer to another.
The Basics
The following video shows the four commands mentioned above.
Between Timelines & Documents
And, you can do all of these across both timelines and documents.
Thanks to our users (esp. J McK) for helping us get on top of this issue.
Why This is Great
Let’s say you’ve laid out your view or page and are animating only a small element of your design. Now you can select the layers being animated and copy them to a new project so you can isolate that animation for export.
Importing Nested Shape Groups
Since Flow taps straight into a Sketch file, it means that our import, rendering, and rebuilding pipeline is wholly dependent on the structure of Sketch’s document format. In a recent release, they updated how they store shape groups and as a result we needed to apply a solid dab of elbow grease into making sure our import process remaimned up to par.
The key change Sketch made was to how they structure shape groups (i.e. booelan operations like Union, Subtract, Intersect, Difference).
Given the above file – 3 artboards with the same shape hierarchy and differing only in the number of shape groups (unioned) – after Sketch’s 52 update our Flow import…
1.2 Looked Like This…
We needed to restructure our import process to handle nested shape groups. In doing so, we also made updates to how we handle paths in Flow – a much needed update that had been lingering for a while in our backlog. So, now…
1.3 Looks Like This…
Why This is Great
It’s easy to say “because your designs are 1:1 in Flow” but really, that’s not the whole kit and kaboodle. Sketch offers an incredible amount of flexibility in how you can structure your designs to make them look great. BUT. In the end, that flexibility can clash with how you might try to explain the layering and effect to a developer.
The tighter Flow can be with your designs, the less you have to worry about the structure of your work and the more you can simply flow from design to production.
Also…
You can now import more complex shapes into Flow.
The Big Small
All the attention to detail in code and functionality that go into making sure the basics are covered better than before makes up a big release with a small amount of new features. You can copy and paste, and your imports are closer than ever to your original designs
Next… Drivable Animations.
We’re queueing up some work to be done on animation exports. Specifically, we’re looking to introduce drivable animations into Flow. The goal: attach the progress of an animation to:
- a gesture,
- a slider,
- a progress update, etc.
In doing this we’re going to also rethink the structure of our code export and focus on the performance of exported code (thanks to a few users making long, tightly updated animations, we noticed our iOS animations can sometimes get out of sync). And, on the web side of things, we’re going to add a little JS and introduce a new structure for triggering animations.
Wait. What’s Flow?!?!
Great question.
Flow is a motion-design tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by exporting production-ready native code for iOS and HTML.
If you’re not already familiar with our product please have a look at our previous article:
Our Site
If you want to know more about the product, just visit our website:
Get a Copy
If you want to try it out, grab a copy from:
…where you can get a license and a .dmg with all our love and hard work bundled within.
Get in Touch
Have some more questions? Connect with us at:
Or, Slack Us…
❤︎
