Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Working with variables in Figma is so much fun! 🤩 It’s becoming clear that variables and components are essential for building any website or app today. True? #figma #designsystem #components #variables

34,885 görüntüleme • 1 yıl önce •via X (Twitter)

10 Yorum

Fabian Albert profil fotoğrafı
Fabian Albert1 yıl önce

@figma how would this help you in building websites? i’m curious, seems like a complete waste of time to me ( yes I am building websites )

Harshil Acharya profil fotoğrafı
Harshil Acharya1 yıl önce

@figma If you get a chance to work on bigger projects (websites, ecommerce websites, webapp) like 40-50 pages, Variables help a lot. Learn it, try to use it and thank me later 🙃

Rajnish Sharma profil fotoğrafı
Rajnish Sharma1 yıl önce

@figma Nice, possible to get plug-in name?

Harshil Acharya profil fotoğrafı
Harshil Acharya1 yıl önce

@figma It’s Variable! Not any Plugin. :)

Daniel Alfred 🖥 profil fotoğrafı
Daniel Alfred 🖥1 yıl önce

@figma Please can I full tutorials on how you achieve this

Prashant Bajgire profil fotoğrafı
Prashant Bajgire1 yıl önce

@figma I recently started learning it, and it's really fascinating, though a bit complex. I feel it requires logical thinking and a bit of basic math as well.

Harshil Acharya profil fotoğrafı
Harshil Acharya1 yıl önce

@figma Yeah once you adopt the logic and used to with same, you can produce things in a great way. )

Asem H. profil fotoğrafı
Asem H.1 yıl önce

@figma What do you mean it is “becoming” clear components are essential? Components has been a way to build software since decades and they existed in Sketch (which predated Figma) as Symbols. Everyone has been using them in design since years.

Nicholas Asher profil fotoğrafı
Nicholas Asher1 yıl önce

@figma I think it’s fine to use styles if you don’t plan on using variables for referencing other variables and it’s a once off project. Spending loads of time on variables for the sake of it could be a waste of time and money.

黄佳豪 profil fotoğrafı
黄佳豪1 yıl önce

@figma It's like mixing crypto cocktails 😎🍹

Benzer Videolar

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,496 görüntüleme • 1 yıl önce