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

Free Figma UI Kit: NFT Marketplace 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 third free Figma UI Kit: an NFT Marketplace where buyers and sellers meet, trade chimps (or whatever else is hot right now), and connect with one another.

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!

NFT marketplace app ui kit from Tuts+NFT marketplace app ui kit from Tuts+NFT marketplace app ui kit from Tuts+

 

What’s Included in This Free Figma UI Kit?

  • 16 page layouts
  • Custom icons
  • Design system
  • Native iOS UI elements

 

Splash Screens

Sign up or log in with clear splash screen options.

free ui kit splash screensfree ui kit splash screensfree ui kit splash screens

Home Screen and Top Sellers

Your entry point to the marketplace, and a summary of who’s selling the most NFTs at the moment! 

free ui kit home page and top sellersfree ui kit home page and top sellersfree ui kit home page and top sellers

Collection Detail

Zoom in on individual items, see stats (current price, volume traded), fluctuation of price over the last 30 days, all the good stuff.

free ui kit item detail pagesfree ui kit item detail pagesfree ui kit item detail pages

Make a Purchase Bid

See something you like? This screen lets you purchase your NFT immediately, or place a bid depending on how you feel the market’s moving.

free ui kit purchase NFT screen or make a bidfree ui kit purchase NFT screen or make a bidfree ui kit purchase NFT screen or make a bid

Connect Wallet

Where do you keep your crypto? Wherever your online wallet is, you’ll need to connect it to make a purchase!

Also, check out this browse screen.

free ui kit connect walletfree ui kit connect walletfree ui kit connect wallet

Search UI

Search screens for manual entry, easy access recent searches, and filter results depending on price, category, sale status and so on.

free ui kit search screensfree ui kit search screensfree ui kit search screens

Design System

Icons, buttons, components, UI elements, colors—we got you covered!

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 NFT Marketplace 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 22 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.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.