Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

10 Kommentare

Profilbild von Fabian Albert
Fabian Albertvor 1 Jahr

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

Profilbild von Harshil Acharya
Harshil Acharyavor 1 Jahr

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

Profilbild von Rajnish Sharma
Rajnish Sharmavor 1 Jahr

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

Profilbild von Harshil Acharya
Harshil Acharyavor 1 Jahr

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

Profilbild von Daniel Alfred 🖥
Daniel Alfred 🖥vor 1 Jahr

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

Profilbild von Prashant Bajgire
Prashant Bajgirevor 1 Jahr

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

Profilbild von Harshil Acharya
Harshil Acharyavor 1 Jahr

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

Profilbild von Asem H.
Asem H.vor 1 Jahr

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

Profilbild von Nicholas Asher
Nicholas Ashervor 1 Jahr

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

Profilbild von 黄佳豪
黄佳豪vor 1 Jahr

@figma It's like mixing crypto cocktails 😎🍹

Ähnliche Videos

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 Aufrufe • vor 1 Jahr