正在加载视频...

视频加载失败

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 次观看 • 1 年前 •via X (Twitter)

10 条评论

Fabian Albert 的头像
Fabian Albert1 年前

@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 的头像
Harshil Acharya1 年前

@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 的头像
Rajnish Sharma1 年前

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

Harshil Acharya 的头像
Harshil Acharya1 年前

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

Daniel Alfred 🖥 的头像
Daniel Alfred 🖥1 年前

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

Prashant Bajgire 的头像
Prashant Bajgire1 年前

@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 的头像
Harshil Acharya1 年前

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

Asem H. 的头像
Asem H.1 年前

@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 的头像
Nicholas Asher1 年前

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

黄佳豪 的头像
黄佳豪1 年前

@figma It's like mixing crypto cocktails 😎🍹

相关视频

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 次观看 • 1 年前