Name: Unique and great
Item: Flow
Rating: 5
Author: a17c0463b54346aaaef7d566310b2f46

Group

Software

Media tools

Sub category

Visual design

Product type

Sync Sketch or Figma files and animate them in seconds

Fine-tune your creative vision with powerful tools on our timeline

Export your animations to Lottie, Swift, Web Animations, and more

Dozens of tutorials, docs, and screencasts to get you going

No codes, no stacking—just choose the plan that's right for you

You must activate your license within 60 days of purchase

Ability to upgrade/downgrade between 3 license tiers

Important Note: Flow is specifically for Mac users only

March 16, 2021

Founder

<h4><b>Flow is a powerful motion design tool that lets you create anything from beautiful animations to ad content and promo videos.</b></h4>

<p><div class="story-inline-video"><iframe id="flow-vid" width="560" height="315" src="https://www.youtube.com/embed/nbgmC-oP444?rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></p>

<p>There’s nothing better than a design tool that blends both simplicity and power. (“Perfectly balanced, as all things should be.”)</p>

<p>And that’s exactly what you get when you use Flow to <b>create beautiful animations with ease without missing a single detail</b>.</p>

<p>Drawing on the best qualities of popular modern design tools, Flow takes an elegant and modern approach to motion graphics, helping you bring your designs to life.</p>

<p>
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="flow-1"
        >
            
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p>


<h5 style="text-align: center; "><i>Flow’s sleek UI draws from some of the best design tools out there, giving you the best user experience possible.</i></h5>

<p>The magic begins in Flow’s timeline. (A much better kind of magic than making a plane disappear.)</p>

<p>When you move objects on the stage, the timeline tracks the changes you make and<b> generates animations on the fly</b>. No need to create static, complex, cumbersome keyframes!</p>

<p>Animation parameters are easy to change—simply <b>select the layer, position the playhead, and change a property</b>.</p>

<p>You can <b>instantly change the timeline</b> by selecting one or more key values and sliding them along the colorful timeline or using the align tools.</p>

<p>
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="flow-2"
        >
            
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p>


<h5 style="text-align: center; "><i>Flow’s powerful timeline editing tools are colorful and intuitive, helping you craft world-class animations without the headache.</i></h5>

<p>Flow’s state-of-the-art curve editor offers you everything you need to<b> tweak the timing of your animations to perfection</b>.</p>

<p><b>Access more than 30 default easing curves that cover a wide range of motion styles</b>, including linear, ease in, and even bounces.</p>

<p>For more control, you can<b> create your own custom curves and apply them to any animation in your project</b>.</p>

<p>
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="flow-3"
        >
            
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p>


<h5 style="text-align: center; "><i>Modify the speed and pace of your animation like a boss with Flow’s custom easing tool!</i></h5>

<p>With Flow, generating media exports is clean and simple, so you can hand them off to your devs without any issues.</p>

<p>Export single frames without a sweat. If you need an overlay, you can<b> export an animated PNG and drop it into your video or project</b>.</p>

<p>Making product mockups or standalone ad content? Flow lets you<b> upload optimized MOV or MP4 files to your favorite social media app or portfolio site</b>.</p>

<p>
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="flow-4"
        >
            
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p>


<h5 style="text-align: center; "><i>Flow makes it easy to export movies, GIFs, and animated PNGs that are ready to use!</i></h5>

<p>Flow is built for production, allowing you to <b>convert all your animation code for a variety of formats</b>, including web, iOS, and Lottie.</p>

<p>For the web, Flow <b>combines CSS, SVG, and Javascript-based web animations code</b>—a cutting-edge approach to native animations in the browser.</p>

<p>For iOS, the tool <b>blends UIKit and Core Animation written in modern Swift </b>for clean animations that are fully compatible with any iOS device.</p>

<p>Check out the code preview window to<b> get a code sneak peak of any designs you’re working with</b>! (<i>“Just as I suspected… it’s beautiful.”</i>)</p>

<p>
        <div
          class="story-img-container open-carousel-modal-on-click"
          data-story-image-id="flow-5"
        >
            
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    
            <svg
              aria-hidden="true"
              focusable="false"
              data-prefix="fas"
              data-icon="search-plus"
              role="img"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512"
              class="hover-mag-glass svg-inline--fa fa-search-plus fa-w-16"
            >
                <path
                  fill="currentColor""
                  d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6                   0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12                   12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6                   9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0                   208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7                   99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136                   136-60.8 136-136z"
                />
           </svg>
        </div>
    </p>

<h5 style="text-align: center; "><i>Easily export code for iOS (Swift), Web (HTML/CSS/JS) or SVG, and watch your designs come to life!</i></h5>

<p>If you’ve ever spent way too long on a site because of its mesmerizing animations, you’d know the power of great motion design. (<i>“The taco bounces when I hover over it!”</i>)</p>

<p>Beautiful launch, onboarding, and button animations? That’s just scratching the surface.</p>

<p>With Flow, you’ll get all of the above and more for stunning signature animations that take your product to the next level.</p>

<p><b>Get lifetime access to Flow today!</b></p>

<p><b>NEW: </b>No codes, no stacking—just choose the plan that’s right for you!</p>

Productivity

Design

Bring your brand to life with beautiful animations made easy

<h4><b>Flow is a powerful motion design tool that lets you create anything from beautiful animations to ad content and promo videos.</b></h4>

<p><div class="story-inline-video"><iframe
  id="flow-vid"
  width="560"
  height="315"
  src="https://www.youtube.com/embed/nbgmC-oP444?rel=0"
  srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/nbgmC-oP444?rel=0&autoplay=1 onclick=&quot;window.parent.postMessage('embed_slug:flow-vid','*')&quot;><img src=https://img.youtube.com/vi/nbgmC-oP444/hqdefault.jpg ><span>▶</span></a>"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loadonscroll
></iframe></div></p>

<p>There’s nothing better than a design tool that blends both simplicity and power. (“Perfectly balanced, as all things should be.”)</p>

<p>And that’s exactly what you get when you use Flow to <b>create beautiful animations with ease without missing a single detail</b>.</p>

<p>Drawing on the best qualities of popular modern design tools, Flow takes an elegant and modern approach to motion graphics, helping you bring your designs to life.</p>

<p>
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-1.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    </p>


<h5 style="text-align: center; "><i>Flow’s sleek UI draws from some of the best design tools out there, giving you the best user experience possible.</i></h5>

<p>The magic begins in Flow’s timeline. (A much better kind of magic than making a plane disappear.)</p>

<p>When you move objects on the stage, the timeline tracks the changes you make and<b> generates animations on the fly</b>. No need to create static, complex, cumbersome keyframes!</p>

<p>Animation parameters are easy to change—simply <b>select the layer, position the playhead, and change a property</b>.</p>

<p>You can <b>instantly change the timeline</b> by selecting one or more key values and sliding them along the colorful timeline or using the align tools.</p>

<p>
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-2.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    </p>


<h5 style="text-align: center; "><i>Flow’s powerful timeline editing tools are colorful and intuitive, helping you craft world-class animations without the headache.</i></h5>

<p>Flow’s state-of-the-art curve editor offers you everything you need to<b> tweak the timing of your animations to perfection</b>.</p>

<p><b>Access more than 30 default easing curves that cover a wide range of motion styles</b>, including linear, ease in, and even bounces.</p>

<p>For more control, you can<b> create your own custom curves and apply them to any animation in your project</b>.</p>

<p>
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-3.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    </p>


<h5 style="text-align: center; "><i>Modify the speed and pace of your animation like a boss with Flow’s custom easing tool!</i></h5>

<p>With Flow, generating media exports is clean and simple, so you can hand them off to your devs without any issues.</p>

<p>Export single frames without a sweat. If you need an overlay, you can<b> export an animated PNG and drop it into your video or project</b>.</p>

<p>Making product mockups or standalone ad content? Flow lets you<b> upload optimized MOV or MP4 files to your favorite social media app or portfolio site</b>.</p>

<p>
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-4.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    </p>


<h5 style="text-align: center; "><i>Flow makes it easy to export movies, GIFs, and animated PNGs that are ready to use!</i></h5>

<p>Flow is built for production, allowing you to <b>convert all your animation code for a variety of formats</b>, including web, iOS, and Lottie.</p>

<p>For the web, Flow <b>combines CSS, SVG, and Javascript-based web animations code</b>—a cutting-edge approach to native animations in the browser.</p>

<p>For iOS, the tool <b>blends UIKit and Core Animation written in modern Swift </b>for clean animations that are fully compatible with any iOS device.</p>

<p>Check out the code preview window to<b> get a code sneak peak of any designs you’re working with</b>! (<i>“Just as I suspected… it’s beautiful.”</i>)</p>

<p>
        <img
          class="story-inline-image z-depth-2"
          src="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?optimizer=gif"
          alt=""
          srcset="https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?width=495&optimizer=gif 450w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?width=654&optimizer=gif 595w, https://appsumo2-cdn.appsumo.com/media/stories/images/flow-5.png?width=935&optimizer=gif 850w"
          sizes="(min-width: 950px) 1045px, 100vw"
          width="850" height="500"
          loading="lazy"
        />
    </p>

<h5 style="text-align: center; "><i>Easily export code for iOS (Swift), Web (HTML/CSS/JS) or SVG, and watch your designs come to life!</i></h5>

<p>If you’ve ever spent way too long on a site because of its mesmerizing animations, you’d know the power of great motion design. (<i>“The taco bounces when I hover over it!”</i>)</p>

<p>Beautiful launch, onboarding, and button animations? That’s just scratching the surface.</p>

<p>With Flow, you’ll get all of the above and more for stunning signature animations that take your product to the next level.</p>

<p><b>Get lifetime access to Flow today!</b></p>

<p><b>NEW: </b>No codes, no stacking—just choose the plan that’s right for you!</p>

Flow

Share Flow