Figma / How to Create Input Fields With Auto Layout & Variants

There is a 2023 updated version of this video: • Figma / Creating Input...
How to create main input fields that control any number of variant instances for input field components.
Follow me on Twitter - / dannysapio

Пікірлер: 21

  • @migo33
    @migo332 жыл бұрын

    This is a great tutorial. Thanks. From what understand, you don't have to create hundreds of instances. You can create one (or a few) and toggle the states using the variant options such as Boolean, text etc.

  • @amurtigro366
    @amurtigro366 Жыл бұрын

    plain and simple, thanks for this brother

  • @ragnarfreyr
    @ragnarfreyr3 жыл бұрын

    I liked the step of putting an Auto-Layout frame around the base component before making a new variant component just to see if everything stretches right. Had to edit multiple variants today to get it right. I recommend putting a dot and underscore before the base component name. (.Input Main or _Input Main) That way it won't show up in your component library. Thanks for the video. 🙏

  • @AliRushSongs

    @AliRushSongs

    Жыл бұрын

    Took me 3 weeks to get it right and the i saw this. Ha ha haaaa. Done

  • @Mikaela_S

    @Mikaela_S

    Жыл бұрын

    @@AliRushSongs haha, same here... 😂 Should start read comments more closely from now on

  • @chloetam446
    @chloetam4462 жыл бұрын

    Thank you! I have watched multiple videos about input field variants. Your video is the ONLY ONE that answered all my questions. and it only takes me 15 minutes to learn it all. Bravo!!!!

  • @AliRushSongs
    @AliRushSongs Жыл бұрын

    Dude, youre the man

  • @sunjayarmstead
    @sunjayarmstead2 жыл бұрын

    Life saver! I was having trouble getting auto layout to cooperate on input fields in Figma. This video is super helpful.

  • @dm.designermohit
    @dm.designermohit2 жыл бұрын

    Really loved it Danny 🤩🤩

  • @wahabbabatunde8577
    @wahabbabatunde85772 жыл бұрын

    This is so helpful thank you so much.

  • @saqibux1058
    @saqibux1058 Жыл бұрын

    2:45 now we don't have this resizing feature in figma. is there any other way?

  • @megaroeny
    @megaroeny2 жыл бұрын

    This is how I've done it! But I kept my main variant/component in the set. I like this better. The one downfall of this is hidden layers. What did you use to record the video?

  • @charbelmedia3014
    @charbelmedia30142 жыл бұрын

    Honestly this was a very helpful video... I'm an elite Figma user but I struggle with input field, I really don't know why... But thank you for this amazing video 🚀🚀

  • @hasti061
    @hasti061 Жыл бұрын

    please update this video, cause figma hase changed. thanks

  • @dsapio

    @dsapio

    Жыл бұрын

    There is an updated video available on my channel

  • @marvokmarude
    @marvokmarude2 жыл бұрын

    someone please explain how he is able to add icons by just typing text

  • @dsapio

    @dsapio

    2 жыл бұрын

    fontawesome.com

  • @rajatsjulie

    @rajatsjulie

    Жыл бұрын

    @@dsapio Don't you need a plugin for that?

  • @paulamourad4699
    @paulamourad46992 жыл бұрын

    This is a very good video, but you go too fast.

  • @maksympl8474
    @maksympl84742 жыл бұрын

    почему ты не можешь сказать как ты сделал поле вводом. Вас тут миллион, которые рассматирвают одно и тоже, но нет никого, кто бы объяснил простую вещь - КАК ПОЛЕ СТАЛО ПОЛЕМ ВВОДА!!!!???

  • @dayofadunsin4357
    @dayofadunsin43572 жыл бұрын

    Way too fast! Rookies like me will lose interest halfway into it. Moreso, there are some vital steps that were not properly explained. Thank you all the same. It was worthwhile