Image for post
Image for post
Flow 1.6 is Out!

The release of version 1.6 opens up some major avenues for working with Flow… Namely, for all you lovely people who don’t work in Sketch, you now have an opportunity to animate with us. You can export your designs to SVG and drop those right into Flow.

Why SVG?

Not only is it an extremely common format, but exporting an SVG file is table stakes for any design tool with its skin in the game. So, our major motivation for this feature is that it cracks open the potential for anyone not working in Sketch to use Flow.

Image for post
Image for post

Many Requests

Over the past few months we’ve had a lot of requests for handling import from a variety of different tools, like XD, Figma, and Affinity Designer. To cover a baseline for all of those we decided that importing a common format that they can all create would be the best first step forward, and we look forward in the future to having custom imports for each format.

SVG Export

This work also provides a foundation for exporting animated SVG files from Flow itself. A tricky task, since the SVG format — while wide open — can be quite temperamental and often restricted in the structure of how things can be animated. Getting a fully 1:1 export with the high-fidelity work you can do in Flow actually requires that we build out a few other features before we can properly export animated SVG files.

Importing

You can easily create a new timeline from an SVG file.

Creating an SVG from Affinity Designer, and importing that into Flow.

You can also import one, or many files at the same time via the menu.

Using Illustrator to generate a few SVGs and then drag and drop them into Flow.

You can also create new timelines from the Stage of a new project.

We call this release a solid “beta” of the SVG import feature. It covers a huge range of basic and complex file types. But, given that the SVG format is so wide open, it doesn’t cover every programming style and structural nuance. If you’re interested, have a read below.

Exporting SVGs for Flow

Let’s get one thing straight: not even Illustrator properly imports all SVG formats and styles. So, let’s have a look at current restrictions and how best to export from other platforms.

Shapes work.

A banal statement, maybe, but crucial for understanding what might be going on when your designs don’t look accurate. When you import an SVG file, we properly handle:

  • <path>
  • <rect>
  • <circle>
  • <ellipse>
  • <line>
  • <polyline>
  • <polygon>
  • <svg> (yes, you can embed svgs in svgs)

Importing shapes allows you to work with all kinds of logos, icons, basic background elements, and more.

We’re already working on images, text, and all manner of other important tags, types, and SVG element styles.

Inline Styles Please

Actually, we’re not asking… Inline styles are the only way to ensure your designs can be imported properly. Since there are many ways of writing CSS, the format for non-inline styles can vary widely.

Instead of pouring our effort into covering all ranges for how people (or tools) may write style sheets for their SVG files, we’ve opted for a simplified approach that will only handle inline styles.

This is lovely:

<svg id="shape" width="100" height="100" viewBox="0 0 100 100">
<
circle cx="50" cy="50" r="50" style="fill:blue; stroke:#fd0178; stroke-width:5px"/>
</svg>

For most tools (e.g. Illustrator) it’s easy to choose the inline setting and export your designs.

Wait. What’s Flow?!?!

Great question.

Flow is a UI Animation and code export 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:

createwithflow.com

Get a Copy

If you want to try it out, grab a copy from:

createwithflow.com/download

…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:

info@createwithflow.com

Or, Slack Us…

join-createwithflow-on-slack

Originally published at https://createwithflow.com on September 17, 2018.

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store