• Design
  • Technology

G” and Flinto for Mac

Testing new apps and trying different things, not only office related, is a tradition for every Grapefruit team member. In order to keep this tradition alive, we designed a simple app and used Flinto to prototype the idea. Below you can see our full process.

Flinto + Grapefruit Quotes

The idea

Back in the days, we used famous inspirational quotes on the back of our business cards. As the time passed, we remained only with a selection of those quotes, and a few business cards laid down on our dusty office corners. Blame us, but business cards… in our days? We wanted to keep the quotes alive so we created an app with random inspirational quotes. You can read them and have the option to share them on your social networks.

Quotes Grapefruit Prototype

Designing the app

Because the app is not so complicated, we quickly drew some sketches and then we added style in Photoshop with typography in mind.

Sketch Grapefruit App Prototype
Screen Grapefruit Quote Prototype

What is Flinto?

Flinto is the prototyping tool designers have been waiting for (quote of the Flinto developers). In our words, Flinto (only Mac for now) is an app that allows you to create simple to complex interactions without writing a single line of code. The main points of this app are:

  • Animated natural transitions based on users gestures;
  • Scrolling effects;
  • Direct integrations with Sketch;
  • Live preview on your Apple devices (including Mac);
  • Posibility to share your prototypes with friends, clients and so on.

Prototyping session

From the first time we started the app, it took us around 2-3h (including tutorials) to get familiar with the interface and the options inside of it. Then we dropped the visual elements designed in Photoshop and started playing around. With a minimal mindset, we chose a flip left/right transition for swipe gestures and for tap (sharing button) we chose an overlaid content transition. Flinto’s interface is pretty simple, after you get used to it. Everything is based on layers, aka assets from Photoshop or Sketch files, links, gestures, where you can create transitions or edit them and layer properties. We recommend you give it a try and explore as much as you can in the 14 days trial period. Then if you like it, just simply buy it.

Flinto Screenshot Grapefruit Prototype App

Final result

Overall Flinto is an amazing app where you can create smooth and natural transitions. Since you don’t need to write a single line of code, you can impress your friends, clients very quickly.


Like every app in the web ocean, there is plenty of space for improvements. We had problems creating an icon (for iPhone), where we wanted to put our prototype. There’s a lack of tutorials ,only 11, and we don’t know anything about the community that uses Flinto to prototype ideas. However we’re pretty impressed by the final result and definitely will try it on future projects.

If you like our work and have an interesting digital project send us a message and let’s get in touch.

  • Tags:
  • (OPEN) Front-End Developer

    We are on a quest for our next Front-End Web Developer at Grapefruit, a User Experience & Digital Consulting agency. Do you work well with JS based frameworks (React, Vue, etc.)? Then your Front-End skills belong with Grapefruit. Let’s meet!

  • (OPEN) Back-End Developer

    Do you work well with PHP based frameworks, OOP, PHP 5 & 7? Then your B/E skills belong with Grapefruit. Let’s meet!

  • (OPEN) Business Analyst

    We are looking for a Business Analyst collaborator to help us outline problems, opportunities, and solutions for businesses and report them back to the stakeholders.

  • (CLOSED) UI/Graphic Designer

    We are looking for a UI/Graphic Designer who can help us deliver outstanding digital solutions and campaigns.

  • (CLOSED) Senior UX/UI Designer

    We are searching for a Senior UX/UI Designer who can help us deliver outstanding digital solutions and campaigns.