7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Figma

Free Figma UI Kit: Personal Banking App

Scroll to top
Read Time: 3 mins

As part of a new series of resources on Tuts+ we’re giving away free UI Kits. This is our second free Figma UI Kit, so download it right now, use whichever UI components you need, save the others for another design, another day—and don’t forget to check back for more freebies coming soon!

free banking app ui kit from Tuts+free banking app ui kit from Tuts+free banking app ui kit from Tuts+

 

page layouts in Figmapage layouts in Figmapage layouts in Figma

What’s Included in This Free Figma UI Kit?

  • 15 page layouts
  • Dark and light mode variants
  • Custom icons
  • Design system

 

Onboard and Sign Up

Sign up or log in with clear onboarding screen options.

free ui kit onboarding screensfree ui kit onboarding screensfree ui kit onboarding screens

News Feed

News feed screen to show blog posts, current activity, and a plan upgrade option. Dark and light mode variants. 

free ui kit feed pagesfree ui kit feed pagesfree ui kit feed pages

Sending Money

Sending screens for making transfers, either to known contacts or to people nearby (check out the avatars on the radar graphic!)

free ui kit send money screensfree ui kit send money screensfree ui kit send money screens

Subscription Pages

What better way to keep track of all those monthly subscription products than this simple overview? In dark and light mode variants.

free ui kit subscription pagesfree ui kit subscription pagesfree ui kit subscription pages

Budget and Statistics

Clear, accessible layouts to help set your budgets and track your personal banking stats.

free ui kit budget and statistics feedsfree ui kit budget and statistics feedsfree ui kit budget and statistics feeds

Home Screen and Cards

Entry point into the app, and delightful frosted glass wallet to show off yours cards.

free ui kit home and card pagesfree ui kit home and card pagesfree ui kit home and card pages

Design System

Complete design system showing typography rules and all the components, for use in this and other UI designs.

design system for ui kitdesign system for ui kitdesign system for ui kit

How to Use This Figma UI Kit

Once you’ve downloaded the Personal Banking App UI Kit, what next?

Step 1

All our free UI Kits for Figma work the same (these screenshots show our Social Food App UI Kit). Locate the ZIP file wherever your downloads are saved. If you double-click the file Figma will open but the file won’t. Instead, you’ll need to import it.

downloaded figma filedownloaded figma filedownloaded figma file

Step 2

To import the Figma UI Kit either click on the Import File button (shown below) or drag and drop the file into the Figma app.

import figma fileimport figma fileimport figma file

You’ll see the file’s thumbnail appear in your Figma file browser, and a window will popup to show the import progress.

figma file import progressfigma file import progressfigma file import progress

Step 3

At this stage you might find it helpful to move your newly imported Figma UI Kit from Drafts, to a different project. Here you’ll see I have a “Free UI Kits” project where I’ll keep this and future kits.

figma ui kit projectfigma ui kit projectfigma ui kit project

Step 4

When you’re ready to use the UI Kit, double-click the thumbnail and it will open in the editor. You’ll see three pages you can choose from:

  • Cover
  • UI Design
  • Design System
figma pagesfigma pagesfigma pages

The Cover is simply the image used as the thumbnail. The UI Design comprises fully designed screens for you to use and edit as you wish.

The Design System contains all the components used in the UI Design. You can edit them here to see changes reflected on the actual design.

design system (components)design system (components)design system (components)

If you’re new to Figma and you want to learn what you can do with this Figma UI Kit, take a look at our free beginner’s course on Youtube (and don’t forget to subscribe for more courses like this!).

Download More Free UI Kits on Tuts+

This collection is small, but growing! Stay tuned for more free UI Kits which you can download and use for personal or commercial projects.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.