Loading video...

Video Failed to Load

Go Home

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 views • 1 year ago •via X (Twitter)

10 Comments

Fabian Albert's profile picture
Fabian Albert1 year ago

@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's profile picture
Harshil Acharya1 year ago

@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's profile picture
Rajnish Sharma1 year ago

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

Harshil Acharya's profile picture
Harshil Acharya1 year ago

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

Daniel Alfred 🖥's profile picture
Daniel Alfred 🖥1 year ago

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

Prashant Bajgire's profile picture
Prashant Bajgire1 year ago

@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's profile picture
Harshil Acharya1 year ago

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

Asem H.'s profile picture
Asem H.1 year ago

@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's profile picture
Nicholas Asher1 year ago

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

黄佳豪's profile picture
黄佳豪1 year ago

@figma It's like mixing crypto cocktails 😎🍹

Related 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,497 views • 1 year ago