For most product designers today, interaction design has become an indispensable skill. Everything is interactive. Designs with interaction, motion design, and microinteractions are some of the more challenging design aspects to convey to stakeholders, and designers need to have many tools at their disposal in order to demonstrate their vision.

Every design tool available to designers takes a slightly different approach; none of them are perfect. Designers have to choose between infinite design freedom requiring advanced design and coding skills and somewhat limited software with which design concepts can be presented very quickly.

In this article, we will walk through one of these tools: Flinto, a design and prototyping tool that enables designers to quickly create microinteractions with motion between UI elements.

microinteraction prototype made in flinto for mac

The final dashboard prototype made in Flinto

The Flinto prototype file presented in this tutorial can be downloaded at the end of the article.

Interaction design is a very important component of the design process, and being able to demonstrate microinteractions during the product throughout—whether it’s to the team or clients—takes on critical importance. It has been discussed in several articles on the Toptal Design Blog:

A brief intro to the Flinto interface

Step 1: Design the App

Most digital products are designed with a “mobile first” approach, so we’re going to prototype a mobile app. Flinto creates cool UI animations quickly and easily, and mobile dashboards are a good example in order to understand how Flinto works.

We will design a simple, one-screen application prototype displaying the status of a cryptocurrency portfolio from scratch. This app will have two types of graphs: a linear graph and a bar graph, one simple screen and one modal window.

Let’s start by designing the home screen. The design process in Flinto does not differ from well-known applications such as Sketch or Adobe XD; however, it is a lot more limited. You can use Flinto’s Sketch integration to import your Sketch files—if you change something in Sketch, you can import the file again and update your existing design.

Flinto’s Workspace and Its Tools

new mobile prototype in flinto for mac

The Flinto workspace

At first glance, the Flinto interface seems to be very similar to other applications. This is the screen that appears first after creating a new document. All document settings are in the right sidebar. It is worth enlarging the working screen by extending its window. In this article, we will use the default file settings for the iPhone 8.

flinto for mac design tools

Something else to pay attention to are the tools. Rectangle, oval, text, vector, and image are all that are available. However, do not underestimate their strength—most modern interfaces can be designed by using them.

App Design in Flinto

Now we have a basic overview, we can start designing. Most of the interface will be designed using only the Rectangle tool. The exception here is a line chart that we will create with the Vector tool.

mobile dashboard wireframe made in flinto

Note that all points of the graph can be distributed evenly using the Distribute Horizontally tool by selecting them all:

mobile dashboard linear chart in flinto for mac

All data points are distributed evenly, horizontally.

The main screen of our application contains one line graph with the axis of the weekdays and the axis of values as well as five smaller bar charts. Note that the entire design is larger than the iPhone 8 screen area—this will be used later.

After creating the project’s general wireframe, it’s time to begin styling the individual elements. All the tools needed to control the style parameters of any element are in the right sidebar:

mobile dashboard prototype made in flinto for mac

The styled dashboard

Step 2: Creating Mobile Dashboard Interactions

Once the design process is done we can start creating interactions. The design created so far is larger than an iPhone screen. This means the content needs to be made scrollable. In order to do that, all layers except the background and add button layers have to be grouped using the Scroll Group tool available in the top toolbar.

mobile dashboard design

Right now, the content is scrollable in all directions. To make content scroll only vertically, use the right sidebar and check Vertical scroll only. The prototype can be previewed using the Preview button available in the top toolbar.

animated microinteraction prototype made in flinto

Scrolling is locked to only scroll vertically.

Now let’s create a simple tap interaction for the action button in the bottom right corner. Select all layers that make up the button, then use the Behavior tool available in the top toolbar.

mobile dashboard microinteraction in Flinto

The behavior designer in Flinto

This tool allows you to create different states for any element and animate between them—as many states as needed can be added. However, to provide feedback to a tap with a slight pressing down motion on the button, only two of them are required. The first (initial) state cannot be changed, and appears as it was designed previously. To add another state, use the Add button available in the behavior designer next to the initial state. After adding the next (new) state, you can change the appearance of any element.

mobile dashboard microinteraction in Flinto

To simulate the tap feedback on the button, only the size has to be changed, so the button in the new state is slightly smaller. If desired, any parameter such as corner radius, border, or color can also be changed. To preview the animation between these states, select the cards. To trigger the animation by a user’s tap on the button, draw a link (using the Draw Link tool) between the initial and new states:

mobile dashboard microinteraction in Flinto

The interaction can be previewed by using the Preview button. At this point, we don’t have a return action back from the new state to the initial one. To fix it, select the new state card and check the Timer Link (right sidebar), as in the example below. It will automatically switch back to the initial state (you can also control the timeout and the target).

mobile dashboard microinteraction in Flinto

This is what the interaction looks like in the Preview:

animated mobile dashboard design

Action button interaction

The final interaction to be designed is the chart interaction. It requires the same techniques that were used previously in this tutorial, but it’s a little more complex. First, group all layers that are part of the chart: both axes (values and days), line chart, title, and the portfolio value in the top right corner. Then use the Behavior tool on the group:

mobile dashboard microinteractions

Each state represents a different value for a different day on the chart. For each state, the chart line, the dot indicator and the day change their positions. All states are linked to each other with the Draw Link tool:

creating microinteractions for dashboard UI

In order to change the displayed value of the portfolio while navigating through the days, a small design trick is needed. In design mode, duplicate the value text layer five times (one for each state) and use different numbers for each layer. Then in the behavior designer, change the layer opacity to show only one of them per state. Et, voila! The prototype is now ready:

beautiful mobile dashboard UI animated in Flinto

The final mobile dashboard UI prototype showing button interaction and scrolling through days

Next Steps and Prototyping in Flinto

Flinto is very intuitive and doesn’t require advanced skills in order to create a simple interactive prototype. Though it has its limitations (you can’t work on real data or create really complex prototypes easily), its main advantage is the ability to prototype and present ideas quickly.

If you would like to learn more about Flinto, here are some online courses:

Flinto Course from Learn.ux
Flinto Crash Course by Pablo Stanley

Flinto also lets you share your work easily by uploading it to Dribbble—it’s very useful if you are looking for feedback from other designers. If you appreciate this tutorial, please share your work on Dribbble with the Toptal Design Blog hashtag: #ToptalDesignBlog

dribbble export in flinto

Sharing your work to Dribbble directly from Flinto

Download the Flinto prototype file used in this article here.

Understanding the Basics

What is mobile design?

Mobile design refers to the design of user interfaces adapted strictly to various types of mobile devices. It also requires the design of user interactions and experiences other than those on desktop devices.

About the author

Wojciech Dobry, Poland
member since November 1, 2016
Wojciech is a product designer with 6 years of professional experience in the design field. He's educated as an architect-engineer. Wojciech is responsible and has worked on web product design through information architecture to the user interface all the while keeping mindful of business goals. [click to continue...]
Hiring? Meet the Top 10 Freelance Interactive Prototyping Experts for Hire in February 2018

Comments

Pax Webb
Im looking to either prototype in Flinto or Principle. Rather than learn both, which one of the two do most people recommend to prototype an entire app? Which one has better gesture and animation support? Any thoughts on XD or InVision Studio?
comments powered by Disqus
Subscribe
Free email updates
Get the latest content first.
No spam. Just great design posts.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Wojciech Dobry
Designer
Wojciech is a product designer with 6 years of professional experience in the design field. He's educated as an architect-engineer. Wojciech is responsible and has worked on web product design through information architecture to the user interface all the while keeping mindful of business goals.