Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. UI Kits

Free Figma UI Kit: Social Food App

Read Time: 2 mins

As part of a new series of resources on Tuts+ we’re giving away free UI Kits. This is our first 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 food app ui kit from Tuts+free food app ui kit from Tuts+free food app ui kit from Tuts+

 

What’s Included in This Free Figma UI Kit?

  • 22 page layouts
  • Custom icons
  • Design system
  • Native iOS UI elements
  • Figma component variants

 

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

User Recipe Feeds

4 feed screens to show follows, explore posts, view descriptions, and add comments. 

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

Search UI

Search screens for manual entry, easy access recent searches, and foods from across the world.

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

Profile Pages

User profile pages to show off delicious food and recipe feeds.

free ui kit profile pagesfree ui kit profile pagesfree ui kit profile pages

Activity Feeds

Activity feed pages for likes and comments, with open and closed chart components.

free ui kit activity feedsfree ui kit activity feedsfree ui kit activity feeds

Video & Media

Video and photo upload pages, showing file selection from roll, and in-app video editing tools.

free ui kit video editing pagesfree ui kit video editing pagesfree ui kit video editing pages

Custom Artwork

Custom illustrations and icon components, for use in this and other UI designs.

custom icons for ui kitcustom icons for ui kitcustom icons for ui kit

Figma Components

All UI components created with variants where possible (learn more about how Figma variants help you switch out UI elements). 

ui components with variantsui components with variantsui components with variants

How to Use This Figma UI Kit

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

Step 1

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!).

Did you find this post useful?
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.