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!
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.
News Feed
News feed screen to show blog posts, current activity, and a plan upgrade option. Dark and light mode variants.
Sending Money
Sending screens for making transfers, either to known contacts or to people nearby (check out the avatars on the radar graphic!)
Subscription Pages
What better way to keep track of all those monthly subscription products than this simple overview? In dark and light mode variants.
Budget and Statistics
Clear, accessible layouts to help set your budgets and track your personal banking stats.
Home Screen and Cards
Entry point into the app, and delightful frosted glass wallet to show off yours cards.
Design System
Complete design system showing typography rules and all the components, for use in this and other UI designs.
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.
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.
You’ll see the file’s thumbnail appear in your Figma file browser, and a window will popup to show the 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.
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
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.
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!).
No comments:
Post a Comment