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