Image for post
Image for post

Flow Blog — The Big SVG (Beta)

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?

Image for post
Image for post

Many Requests

SVG Export

Importing

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

Shapes work.

<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.

If you want to know exactly what Flow handles, check out our SVG Compatibility doc.

Inline Styles Please

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="Layer_1" width="105" height="105" viewBox="0 0 105 105">   <circle cx="52.5" cy="52.5" r="50" style="fill: blue;stroke: #fd0178;stroke-miterlimit: 10;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?!?!

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.

Our Site

Get a Copy

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

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