Food App Design - Figma Tutorial

Food App Design - Figma Tutorial

This tutorial will show you the basics of Figma to create beautiful mockups! Stay tuned to see this design turned into React Native.

Learn how to use Figma by building a simple Food App UI. This tutorial will show you the basics of Figma to create beautiful mockups! Stay tuned to see this design turned into React Native.

Link to Figma file - https://www.figma.com/file/gfIboy4J44lvD9CoDr62rH/Food-App?node-id=0%3A1 Converting this design to React Native: Part 1 - https://youtu.be/Z7UjnkbbIqk Part 2 - https://youtu.be/GPu1ax1Fga0 Part 3 - https://youtu.be/Z7UjnkbbIqk

❤️ Thanks for watching 👍 If you liked this video, be sure to give it a thumbs up 👊 Want to see more of this? Smash that subscribe button 📢 Let me know in the comments what you'd like to learn!

Follow me: Twitter - https://twitter.com/madewithmatt YouTube - https://www.youtube.com/channel/UCHgS0H3T3459H1e9QWK_Ezg?sub_confirmation=1

Design inspiration - https://dribbble.com/shots/11338017-Food-Delivery-Mobile-App

Intro: (0:00) Home frame: (0:32) Home header: (0:55) Home titles: (3:20) Home search bar: (4:43) Home categories: (6:34) Home popular: (11:03) Home page colors: (17:23) Details frame: (20:31) Details header: (21:03) Details titles and price: (22:56) Details pizza info: (22:45) Details ingredients: (25:26) Details order button: (27:39) Touch ups: (29:28) Almost done!: (29:42) Details pizza image: (30:01) Done!: (30:34)

figma

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Figma design kit built to integrate with Tailwind CSS

Figma Community file — Figma design kit built for integration with Tailwind CSS Tailwind Figma is a free and open-source set of UI components and pages designed to integrate with the utility classes from Tailwind CSS. Unlock the full version Get access to the full version of Tailwind Figma which includes 27 hand-cra...

Figma Tutorial - Prototyping in Figma

This tutorial covers how to create interactive Prototypes in Figma. As an example, we create a Prototype with Wireframes that I designed in the following tut...

Figma Tutorial for Beginners - Figma 101

In this Figma tutorial for beginners, you will learn the tools and UI design basics so you can start creating your first design in Figma. In the first lesson of a four-part series, we will do a basic intro to Figma to get everyone familiar with the interface within the application. We also share tips and our approach to designing as a team in Figma at Headway.

Introducing Figma to React.

Figma is awesome for creating reusable UI elements and iterating fast. Features like Auto-Layout also bring it closer to the constraints present in the developer’s world.

Free Figma Tutorial: Designing Wireframes with Figma

This tutorial covers the ins and outs of designing Wireframes in Figma. Not only will you learn how to use Figma, but you'll also get a comprehensive understanding of the Wireframing process.