Sitemap
Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

6 Free Must Have Prototype Templates For Figma

--

1. Splash Screen Animation

Splash Screen Animation Mockup Image
Find It Here

Every app should have a sleek splash screen to reel in the user. This template provides a simple and elegant splash animation that transitions straight into a login screen.

What it includes

  1. Logo component that can be swapped out for your own
  2. Customizable form icons, form fields, buttons, and text content
  3. Login variant that allows you to choose between social login, email login, or both

What it does

  1. Splash screen animation is triggered on load and will automatically transition to the login screen

2. Custom Animated Tab Bar

Custom Animated Tab Bar Mockup Image
Find It Here

Effortless root navigation is core to your apps experience. This iOS template uses logical transitions to communicate to the user where they are in the app and where they’re going.

What it includes

  • Two unique tab bar styles
  • Pre-set dimensions for ten different iPhones: iPhone SE, 8, 8 Plus, X, 11 Pro, 11 Pro Max, 13, 13 Mini, 13 Pro, and 13 Pro Max
  • Adjustable home indicator
  • Swappable tab icons
  • Elegantly animated transitions between icon states

What it does

  • Navigate between any of the four available tabs
  • Seamlessly jump between iPhones dimensions in prototype mode to see how your layout adapts to different sizes

3. Intermittent Loading Bar With Status States

Intermittent Loading Bar With Status States Mockup Image
Find It Here

Nobody likes to wait — especially if they don’t know why they’re waiting. This is animated template keeps the user informed and happy by displaying both loading progress and process status.

What it includes

  • Fully customizable content and styles (including the look and feel of the loading bar)
  • Option to use progress bar with or without status states

What it does

  • Insert loading bar into any screen and it will auto animate when that screen is loaded

4.Stylish Hamburger Menu

Stylish Hamburger Menu Mockup Image
Find It Here

Hamburger menus are controversial and, no doubt, not always the best solution to your navigational woes. With that said, you can’t always avoid them and, if you have to use one, you should use the best. This template provides you with a smooth, cross-platform hamburger menu for mobile applications. It is currently sized for an iPhone 11 Pro frame but is adaptable. Additional frame sizes will be coming in the future.

What it includes

  1. Customizable, atomic components
  2. Functional prototype

What it does

  1. Open and close hamburger menu on click or on drag

5. Animated Tutorial Carousel

Animated Tutorial Carousel Mockup Image
Find It Here

Sometimes you just need a smooth and seamless carousel to get the job done. This is template provides you with a cross-platform, mobile carousel ideally suited to tutorial experiences.

What it includes

  • Four, pre-built and customizable tutorial cards
  • Ellipses component for tracking progress
  • Customizable primary and secondary button components
  • Background UI component for inserting your own apps visuals
  • Post-tutorial screen for inserting your own application’s end state
  • Fully functioning prototype

What it does

  • Swipe left or right to smart animate between cards
  • Tap Next to smart animate to the following card
  • Tap Skip to smart animate to end screen

6. Terms of Use Prototype

Terms of Use Prototype Mockup Image
Find It Here

Legalese is one of those necessary evils that all app designers have to deal with. It’s never going to be your users favorite experience, but you can at very least make it tolerable. With a convenient “scroll to bottom” option, this template provides you with a clean and simple solution without your users getting too overwhelmed by the jargon.

What it includes

  • Fully customizable content and styles
  • Right-hand scroll bar
  • “Scroll to bottom” and “Scroll to top” functionality
  • Fully functioning prototype

What it does

  • Swipe up and down to navigate legal content
  • Tap “Scroll to bottom” to scroll directly to the “Accept & Continue” button
  • Tap “Scroll to top” to scroll back to the top of the legal language
  • Tap the “Accept & Continue” button to trigger a customizable success message
Image of Jeremy and his daughter, Coco

Jeremy Abrams is a senior full stack designer with a background in human centered design, research, and development. He also has a demonstrated history of managing local and remote cross-functional teams. In a prior life, Jeremy acquired a JD from the Chicago-Kent College of Law and was admitted to the Illinois state bar in 2014. In January of 2022, he had a daughter with his wife, Danielle.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Jeremy Abrams
Jeremy Abrams

Written by Jeremy Abrams

Fullstack designer with a background in HCD, research, and development. In a prior life, I acquired a JD and was admitted to the IL state bar in 2014.

Responses (1)