Chapter 10

InVision Studio UI Kits & Animation Examples

~ Daniel Schwarz

Author avatar (Daniel Schwarz)

What’s Being #MadeWithStudio?

It’s amazing what UI designers have been making with a tool that’s still in the early access stage. Parallax scrolling animations, UI kits, app concepts, icon sets…even an interactive Street Fighter game. Insane. Here’s the best of the best of InVision Studio.

UI Kits & App Concepts

Curious about Studio? Crack open these freebies and see what’s what! 🎉

4x UI Kits by InVision

Considering that at least three of these four UI kits (designed by the InVision team) were originally made for Sketch and Photoshop (way back when), they should offer some insight into the compatibility of Sketch files being imported into InVision Studio.

  • Now is a minimal but scalable UI kit
  • Chat is a mobile UI kit for chat apps
  • DO is better suited for productivity apps
  • Deck is a responsive card-based UI kit

Desktop VPN Concept

A desktop VPN concept (direct download) by Joshua Oluwagbemiga, UX Designer @ InVision. An excellent resource for deconstructing how sequenced animations work.

Check out Joshua’s music app concept as well (below), which is even more impressive!

InVision Studio music app concept

Travel App Concept

Flick through stunning images of Greece in this travel app concept (direct download) by Digital Designer Coraline Colasse. An excellent starter kit for swiping interactions.

Space App Concept

Interactive space animations (with .studio freebie) by Jardson Almeida.

Interactive space animations

Clock App Concept

A clock app concept (direct download) by Freelance Designer Dann Petty that turns day into night as the user changes the time by dragging. Dig in and see how it works!

News App Concept

A .studio resource by Daniel Korpai containing 3 animation examples.

InVision Studio animation examples

Restaurant Booking App Concept

Pretend to book a restaurant with this reservation app concept (direct download) by Senior Product Designer Jon Ezell. Ideal for kickstarting a reservation booking app.

Dashboard App Concept

A very interesting dashboard app concept with animated data visualizations (direct download) by UX/UI Designer Ryan Sael. In case you were wondering how on earth.

I quite like his day and night animation as well (below).

Day and night animation

Pricing Screen App Concept

An app concept (with .studio freebie) by Yeon UX. Loving the depth and shadows! 🙌

Animation Examples

Warning: very awesome animations. Please try to control yourselves 😝.

3x Animation Examples

3x .studio resources by Pablo Stanley, InVision Designer.

Parallax Scroll Animation

Parallax — an ultra-trendy immersive UI animation trick. Learn how to replicate the effect in InVision Studio with this tutorial by InVision Designer Charles Patterson.

Here’s another by Charles, this time covering timed transitions (image below).

Timed transitions

Weekly UI Animation Challenge

Martha Bergmann shares InVision Studio animation examples and micro-interactions every week, right here. We’re currently on week 11 of 15, so there’s a fair bit to see!

FIFA World Cup Animation

Relive the 2018 FIFA World Cup with this animated app concept by Nicky Lock.

FIFA World Cup app animations

Various Advanced Animations

Charles wows us time and time again!

Infinity loading animation

Drag n’ Drop Interactions

A mobile concept by Karol Piwowarczyk that shows off some drag n’ drop mastery.

Create-Your-Own-Burger Animations

Burger House by Clark. Looks tasty!

Create-your-own-burger animations

Form Submit Animation

Monster Eats by Jon Vargas. Literally, the monster eats your form input!

Form submit animation

Rating Animation

A 5-star rating system with animated facial expressions, by Marina.

Rating system animation

Product Page Interactions

Well, these animated micro-interactions by designNeat are literally beautiful.

Animated micro-interactions

Conceptual Animation Examples

A quick demo by Malan Alankara exploring movement with Studio animations.

Conceptual animation examples

Miscellaneous Animation Examples

More #MadeWithStudio

Studio’s first icon set — Studicons.

Pretty cool: a dynamic slider by Steven Fabre, Senior Product Designer @ InVision.

Destroy an old car in this Street Fighter concept by Michal Ondycz made entirely in InVision Studio — the .studio file that’s included comes with a whopping 90 artboards!

Impressed? Feeling inspired? Get the ebook (free) to learn how to use Studio.

Feedback? We love feedback. Send us feedback.

UX Design Advanced UX Product Design InVision Studio Burning Questions Quick Tricks