Figma UI Design Tutorial | Sign Up Page

In this video I go over how to create this sign up page using Figma. I show you the full ui design tutorial, where I create the structure of the elements with wireframes and then I style all of the elements. In my next video I am going to show you how to create this design with HTML and CSS. If you enjoy these mini-series please give this video a thumbs up and subscribe to stay up to date with my latest content!

In this video I show you:
0:22 - Intro
0:54 - Starting Figma Project
1:34 - Wireframes
4:42 - UI Design

Let's Connect

[tohdoh]

Great content. I love how you explain all the steps and then rewind it. This was my first video and honestly i'm really excited to watch your other tutorials. Thanks!

[ForhadSattar]

Awesome. Learned a bunch of new stuff here!

[mdshafayatul]

I am from Bangladesh. I love your YouTube video very much

[yapingacho]

Thaaaanks Angela! Again a video that i needt so much! I send to my collegues too! 😻😻😻

[irwansyah]

Would you please make tutorial on how to build a color palette from an image?

[arnoldoalvarez]

How can you do in order to create the interaction with the text inputs? I mean, like a user were writing name and email? is there any posibility of creating that text input interactivity?

[achdiathadit]

Nice tutorial! Love the simple and easy explanation.

[gaiaklamaze]

I really liked your video. Very clear and not going too fast. But it miss the best part for me. How to set these different states for on hover and on focus event in Figma. And also how to animate the cursor to create the illusion of a real text field. i actually came to your video while i was searching for that. Anyway i ve just suscribed to your channel and will dig into it.

[zahrarizkiannisa]

love your content & explanation, keep going!

[gizelreyescazares]

When you duplicated the frame, how were you able to move things on both frames when you were only moving on one frame..

[postnatalmotcoach]

A client wants me to do this for her. But my limits are design so how can i add the links for end user

[ajayji]

can we have the real time form components in figma(i.e. - a text box where we can type or a dropdown where we can select)?

[jizan]

waiting for your next Origami Tutorial, Please upload soon

[daidsy]

My text fields dont let me enter text, what am I doing wrong?

[maormemolis]

Great tutorial, Thank you! I loved how you kept it simple and fit for beginners. and the explanations were excellent.
A little notice, keep in mind to leave a link in the next videos if you use photos in your tutorials. I had to look for a background on my own and as a result I used a little different background.

[pnksng]

Hey
I am wondering when you started editing the hover effect on the name component, the email duplicate component didn't get affected?
great video xx

[zahrarizkiannisa]

but why the link in the description box take me to css grid tutorial, not component figma tutorial..

[adelajaoluwaseyijeje]

I really liked your video and how you explain it. I want to ask how to get a keyboard to pop up like the user is typing. I don't know how to do that

[kamanau]

Good video here but can you also add the equivalent of cmd key for window user? I was trying to follow the part where holding down the cmd key but I didn't get it right

[stellaozemoya]

Thanks Angela for this great video, please I can't find the video where you code the sign up page you did with figma