Figma UI Design Tutorial | Sign Up Page

Figma Components Tutorial: • Figma Components Tutorial
Watch Part 2 here: • Sign Up Form | Figma t...
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
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise

[@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!

[@angeladesign737]

Thank you so much!

[@ajayji1009]

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)?

[@yapingacho77]

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

[@angeladesign737]

Thanks so much!

[@achdiathadit]

Nice tutorial! Love the simple and easy explanation.

[@angeladesign737]

Thank you!

[@irwansyah1979]

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

[@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

[@zahrarizkiannisa724]

love your content & explanation, keep going!

[@angeladesign737]

Thanks so much!

[@ForhadSattar]

Awesome. Learned a bunch of new stuff here!

[@gizelreyescazares7149]

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

[@kamanau1330]

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

[@_blacksunflowers_1384]

Thank you! This was so helpful ❤️

[@angeladesign737]

Glad it was helpful!

[@zihanwen9071]

Thank you so much! Very helpful :))

[@angeladesign737]

Thanks! Happy you liked it!

[@adelajaoluwaseyijeje9337]

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

[@akshaychauhan.5678]

How did you prototyped in the end.

[@gaiaklamaze4090]

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.

[@maormemolis872]

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.

[@jizan8344]

waiting for your next Origami Tutorial, Please upload soon

[@postnatalmotcoach1006]

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

[@stellaozemoya7263]

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

[@angeladesign737]

Thank you! Here is part 2: ua-cam.com/video/pW0t2hLvXWk/v-deo.html

[@arnoldoalvarez6057]

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?

[@keshavkeswani3656]

Did you find a way to do this?

[@astoncheguevara4034]

Hello Delise I really love your works.
I wanted to ask you if it is possible to create a input field in figma without adding plugins like anima.
If yes please make a video about creating text and number imputs.
Thank you again

[@angeladesign737]

I will look into that! Thanks!

[@daidsy]

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

[@veronica.eterna]

Thank you so much!

[@naturaverse]

Prototype??

[@mdshafayatul3995]

I am from Bangladesh. I love your UA-cam video very much

[@kinganna3261]

Great Information ❤️

[@gouveia305]

awesome!!

[@angeladesign737]

Thanks!

[@zahrarizkiannisa724]

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

[@angeladesign737]

Ah I attached the wrong link, just updated it!

[@jizan8344]

❤️❤️

[@user-zd5dy7sd3v]

Make video on e-wallet payment from figma.

[@lucutes2936]

you didn't show how to achieve the hovering effect.

[@omarkuriansky7091]

BRAVO

[@angeladesign737]

Thank you!

[@fonexuz2055]

Русский классный туториал

[@pelumiadelaja]

Tbh this tutorial is not for people with zero idea on how anything runs anywhere🤕🤕

[@pelumiadelaja]

Really not explanatory enough