Figma Components:
https://www.youtube.com/watch?v=S3uQTNUtczY
In this video I go over how to create a web design using Figma. I show you the full ui design tutorial, where I create the wireframes first and then I add content and styling to the page. I already defined a color palette that I use throughout the design. Then I show you how I created this wizard by adding numbers to the top of each step in the process. In my next video I am going to show you how to create this figma design with HTML and CSS.
In this video I show you:
0:42 – Starting Figma Project
1:22 – Design Wireframes
2:16 – Navigation Bar Design
4:19 – Header Treatment
4:42 – Wizard Card Design
7:57 – Figma Component
9:36 – Final UI Design
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2…
#figmatutorial #figmadesign #webdesigntutorial
Let’s Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
source
thank you that was really clearly explained 🙂
new here , nice tutorial :3
Thanks this is great.
GREAT tutorial, thank you!
Are those color swatches just rectangles as well?
How about prototyping a long web page with many interactions
Just what I needed, Thank You Angela ^^
I'm a software engineering student developing a website atm 😀
Awesome …..
Devine Delice with an Angelic voice and a Heart like no other.
Figma seems a lot better than Sketch. I like the team collaboration, ease of sharing, and comment feature. The fact it also shows the CSS is also great.
you didnt attach figma design link !!!
I subscribed because you are awesome kWDM
Very good, simple and clear explanation, thanks for this video. Waiting for the next video on how to convert this in HTML and CSS.
Hi Dear Angela, Could you make a tutorial about how to design a dashboard for a blog admin. thank you 🙂
nice video
Nice video, thanks. Have you done a video on how to move around the design in Figma? I get frustrate trying to enlarge on a certain section or item and end up going very small or completely off the item. I end up using the scroll bars which is no very efficient. I did not see one in the Figma tutorials.