Consistency and speed of iteration—these are the main properties of a great design system. The full power of CSS variables is now available in Webstudio: colors, gradients, shadows, spacings, and even micro-interactions are now unlocked.
Hey Creators!
Webstudio is an advanced visual development platform that allows creators to build extremely fast and versatile websites, integrate them with a variety of headless backends, all while having full creative freedom.
Today we are launching CSS Variables—one of the most powerful features in CSS. As usual, we’ve aim to get you the full power of CSS Variables in a Visual Development platform:
1. Create a design system
Define global styles like colors, gradients, sizes, and box shadows.
2. Use your variables everywhere
You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more!
3. Start with libraries like Open Props
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.
4. Create complex micro-interactions
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!
5. Design and build simultaneously
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.
6. Change variables by breakpoint
CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way.
Watch CSS Variables 101 or learn how to create micro-interactions with CSS variables for a deep dive.
Happy building!
About Webstudio Variables on Product Hunt
“Build and reuse expertly crafted Design Systems”
Webstudio Variables launched on Product Hunt on October 15th, 2024 and earned 221 upvotes and 13 comments, placing #11 on the daily leaderboard. Consistency and speed of iteration—these are the main properties of a great design system. The full power of CSS variables is now available in Webstudio: colors, gradients, shadows, spacings, and even micro-interactions are now unlocked.
On the analytics side, Webstudio Variables competes within Design Tools, Website Builder and No-Code — topics that collectively have 274.5k followers on Product Hunt. The dashboard above tracks how Webstudio Variables performed against the three products that launched closest to it on the same day.
Who hunted Webstudio Variables?
Webstudio Variables was hunted by Oleg Isonen. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Oleg Isonen