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

Показать описание

How to create main input fields that control any number of variant instances for input field components.

Danny Sapio

Рекомендации по теме

Комментарии

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.

migo

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. 🙏

ragnarfreyr

plain and simple, thanks for this brother

amurtigro

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

chloetam

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

sunjayarmstead

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 🚀🚀

charbelmedia

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

saqibux

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?

megaroeny

please update this video, cause figma hase changed. thanks

hasti

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

marvokmarude

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

paulamourad

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

maksympl

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

dayofadunsin

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

Figma UI Design Tutorial: Get Started in Just 24 Minutes!

Introducing Figma: A Beginners Tutorial (2023 UI UX Design)

Design a simple UI from scratch for a Food App in Figma - For beginners

Figma tutorial for Beginners: Complete Website from Start to Finish

Figma For Beginners: Explore ideas (1/4)

Figma Tutorial: Prototyping

How To Create Figma Account (EASY!)

Design a Signup Page in Figma | UI/Web Design Tutorial

Create an Interactive Checkbox Component in Figma | Mobileapp | Easy Tutorial

Figma For Beginners: Create designs (2/4)

The CORRECT (and lazy) way to prototype | Figma Tutorial

MASTER Figma Components in 10 Minutes (Everything You Need To Know)

Figma UX tutorial for beginners - Prototype

Figma UX tutorial for beginners - Wireframe

Design This ON/OFF Toggle in Figma (Easy)

Menu Animation in Figma

Create Logo in 5 minutes in Figma

How To Create Toggle Switch Button On Figma

Create a Figma Design System - Fundamentals (Part 1)

Figma in 55 Seconds: Tables with auto layout and variants

Figma tutorial: Animated Landing Page with Login and Register figma

Designing an App in Figma - A Step-by-Step Guide for Beginners (2024)

How To Create Simple Table On Figma

Your First Design System in Figma (Beginner Tutorial)