Designing Foodsnap app design in Figma

Name: Designing Foodsnap app design in Figma
Rating: 3.3 (30 reviews)

Learn how to make application design within an hour and add the project mockup and prototype in your portfolio

Created byIshank Popli

Last updated 4/2022

English

English [Auto],

What you'll learn

Design
UX/UI
Prototyping
Application Design

Course content

1 section • 9 lectures • 51m total length

Introduction1:02
Design the foodsnap app in Figma, featuring a scanner that converts food images into a name and nutrition values, with a flow from scanner to image to name.
Main page7:31
Begin the smart foodsnap app design in Figma by translating imagined food imagery into a user interface with food pictures, ingredients, calories, and item menus.
Starting with Wireframing4:09
Start with wireframing the foodsnap app in Figma, outlining a layout with three main icons, a scanning option, and clickable food images in a centered frame.
Prototyping is main14:19
Prototype the foodsnap app design in Figma by refining navigation, choosing green color schemes, and aligning centered icons on a consistent grid for clear, scalable interfaces.
Design Design and more Design6:17
Explore practical ui design for the Foodsnap app in Figma, experimenting with wireframes, forward images, navigation, and color themes from green to dark and light.
Adding more pages7:45
Add more pages to the Foodsnap app in Figma, expanding the home screen and scan-to-dish workflow, with centered, aligned UI elements for the prototype.
Polishing Designs3:35
Connect screens and refine spacing in the Foodsnap app design in Figma, collapsing groups and layering elements to enable a button click that reveals an additional panel, illustrating prototyping workflows.
Finalizing Design?2:25
Finalize the Foodsnap app design in Figma by ensuring centered layouts, clear text, and a food-related logo, and applying a linear background color for visibility.
Design for Promo4:17
Design a promo in Figma for Foodsnap by exploring strokes, dotted lines, and centered group layouts to build portfolio-ready visuals and earn a certificate.

Requirements

Figma

Description

In this course you will be making one project for your portfolio and that will help you in polishing your creativity and skills.

Real-time file collaboration helps mitigate “design drifting”—defined as either misinterpreting or straying from an agreed-upon design. Design drifting usually happens when an idea is conceived and quickly implemented while a project is in progress. Unfortunately, this often leads to deviating from the established design, causing friction and re-work.

Using Figma, a design lead can check in to see what the team is designing in real-time by simply opening a shared file. If a designer somehow misinterprets the brief or user story, this feature allows the design lead to intervene, correct course, and save countless hours that would have otherwise been wasted. (By comparison, teams using Sketch have no immediate way of telling if designers are going astray.)

Side note: Some designers don’t like to be “spied on” when they’re working, so it’s up to the design lead to explain the benefits. In general, most designers quickly see the value in such a feature and easily adapt to working in a shared environment.

Even though Figma is browser-based there are desktop version for both Windows and Mac OS. Presumably these are wrap applications which are running a browser inside them, but whether that’s the case or not, Figma is always running online within those apps.

Note: If you do lose connectivity you can still keep working on any document you already had open.

Who this course is for:

Creative people