Creating a Design System - Awesome Textfields!

Подписаться 30 тыс.

Просмотров 19 тыс.

50% 1

Learn how to create an awesome textfield component!
Do subscribe, like and hit the notification icon:
/ @amdesignanddev .
Have a project? Send me a message on sales@thesmallsquare.com or contact me on LinkedIn.
/ asaadmahmood .
.
👉 Follow me on LinkedIn and Twitter for more content.
/ asaadmahmood
/ asaadmahmood5 .
Sign up for Figma: psxid.figma.com/821dltt72sqv .
Subscribe to my newsletter to keep up to date on latest design/tech trends, update, tools and information! 🔥
the-optimal-designer.beehiiv....

Опубликовано:

20 апр 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 47

@filip9951 Год назад

This tutorial is mind-blowing, thank you! I learned so much. And what a fantastic plugin for documentation purposes!

@monicadahiya252 Год назад

I learned how to expose the nested properties. Thank you so much.

@smilli6415 4 месяца назад

this is gold , things change in figma .. would love to see updated design system course or live webdesign in figma course series

@sayekatchakraborty2552 Год назад

I was waiting for this update ❤ Thank you 😊

@metinkucuk734 21 день назад

Thank you for underscore tip! Is there any other situations for using underscore (_) or dot (.) in layer names? Thanks!

@jasboora5184 3 месяца назад

Its simply awesome... I would love to implement that. Keep sharing the simple and effective knowledge.

@Godheals_always 10 месяцев назад

Fantastic! Well explained and easy to understand Thank you

@SohanuRahman97 3 месяца назад

Thanks a lot bro! This was the best one which may helps to learn a lot .

@Gab-qn1lf Год назад

Amazing dude ! Thanks for the Figma tricks

@P4PBoxingHighlights 9 месяцев назад

Bro that was epic!! I am exciting to try this one👌

@tomashudolin7197 2 месяца назад

Thank you for this video. Just a quesion. What if I would like to have the helper text bellow the text field (for error or success message)? Thanks.

@jswanson859 Год назад

This is brilliant! Thank you.

@anishhirlekar 8 месяцев назад

This is such a great tutorial, thank you for this @amdesignanddev . Could you also help me with one more thing, I want the text in the text field to vertically move to next line, but with the cursor interaction I am difficult to get that move to the next line. How can we do that ?

@teegees 6 месяцев назад

Neat trick with the blinking cursor! One thing I’d like to do when running a prototype is simulate the user typing something inside of a field. Is this how you’d do it or is there an easier way. I looked for plugins that essentially add real text input fields in the prototype but didn’t find any.

@calvinogood Год назад

Expose nested properties from Figma is the game changer.

@techtalks003 9 месяцев назад

Wow. I really need to learn components and variants well

@umerzafar 6 месяцев назад

what i really struggle with is to plan ahead which items to include in base when designing complex components. any help on how to hone that skill?

@user-go6pi7iw8c 10 месяцев назад

So cool! Thank you! ❤ Do you have a video on how to organize icons in design system? It would be very helpful!

@egedepeter6038 6 месяцев назад

that's a very good idea I have being wanting this

@arshadm10 Год назад

Nicely explained

@dipongkarroy1720 Год назад

It's awsome, Save Ton's of time.

@vikson2329 5 месяцев назад

But what with disabled button? When you change value to be gray, the icons are still dark gray/black

@mhafizfahrezi4433 7 месяцев назад

how to add title text above the texfields component?

@umerzafar 7 месяцев назад

you are a godsend. Busta rhymes of figma tutorials.

@AMDesignAndDev 7 месяцев назад

:D Thanks man!

@RimuruTempest-gy8is Год назад

Thank you very much! ❤🙌

@umerzafar 7 месяцев назад

Kindly post link of new video in comments if any update to current video technique happens. thanks.

@Valeriamarus 5 месяцев назад

This is awesome! Thank you

@proshenjit01 Год назад

Thank you AM

@smilli6415 4 месяца назад

when u are using those icons to make components , do u bring in just icon vectors are you bring icons with that bounding box (with padding )

@AMDesignAndDev 4 месяца назад

With the bounding box.

@ytrpaz 9 месяцев назад

thank you very much it help us alot

@arsenentibus229 9 месяцев назад

amazing,

@smilli6415 4 месяца назад

so we no onger use base icons after the launch of component properties right ?

@AMDesignAndDev 4 месяца назад

Yes

@exitmatrix7697 2 месяца назад

Coming from XD maybe not the best first tutorial i should do in figma :) - i think i will have to pause a lot :D

@AMDesignAndDev 2 месяца назад

This is definitely not the a basic tutorial. If you want to learn things from scratch, consume my Figma to Pro playlist from the start. And if you need more indepth help, I have my paid course as well: www.asaadmahmood.com/courses/figma-noob-to-pro Which you can get using a 50% off using the "AMSUBSCRIBER" voucher code.

@exitmatrix7697 2 месяца назад

@@AMDesignAndDev Thanks for your answer. But as a Senior UX/UI Designer in XD im just on the edge of switching to Figma and want to check out how to handle components (variables and variants) combined with Design / Style Tokens for maximum flexibility in large scale projects. But what i have seen your videos are a very good starting point for getting familiar with this in figma - i will check out your playlist anyway - thanks!

@AMDesignAndDev 2 месяца назад

Don't even think about it, switch asap. If Adobe themselves don't care about XD, why should we?

@exitmatrix7697 2 месяца назад

@@AMDesignAndDev Definitly i will do, what i have seen so far, Figma seems by far the more solid tool now, cant even wait to switch :) definitly in the next project, maybe already in my current project which is also in th first 10% of progress. BTW: This was a great Vid on the tokens and your recommened way to stick with semantic tokens is great too :) ( ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8RVLt1Y-6I8.html&ab_channel=AMDesign )

@umerzafar 6 месяцев назад

How did you reduce the cursors opacity to zero manually?

@Valeriamarus 5 месяцев назад

press 0 twice while the layer is selected

@tara730 10 месяцев назад

6:19 don't you think when we create stylesheet we have to show all the states for the sake of developers

@samuelerbo 5 месяцев назад

Thanks

@umerzafar 6 месяцев назад

Kindly show shortcut keys on videos when you press them for us beginners.

@AMDesignAndDev 6 месяцев назад

For sure, I do that usually but missed it here :(

@syedarslan2129 Год назад

Assalam o Alaikum brother loved your video about creating a perfect palette as I was trying to do it my own for my new blog but didn’t have a budget so appreciate your work brother. Seems like you are Muslim if yes?? Then reply me or leave your email would love to talk to you in person.