After spending a month or so living in Webstudio I can see it's great potential. It's definitely the best Webflow alternative out there. Clean tokens instead of class chaos, Airtable CMS, lifetime version, better nested CMS, a fast responding and super competent community… I love it all.
Since I committed to Webstudio for the next years and projects, I started building a design system with all components needed to build websites:
1) faster
2) more consistent
3) changing and adopting over time - while being incredible consistent and on brand
The first thing I really missed from Webflow is it's
Variable Panel (see screenshot 01).
You can define easily all global variables; later they are available in the designer to attach them to classes.
It goes even beyond that. You can create different modes as columns:
- Base Mode
- For Type and Sizes: Breakpoints
- For Colors: Hover State and more
- For Colors: Dark Mode
Also it's possible to categorize them in groups and folders.
So I wanted to see all Open Props in one view. I built a little workaround tool in Google Sheet, so I could see all Open Props and more in one place, categorized (see screenshot 02). If you want, you can
duplicate it here.
If you want to link one variable to another like shown in the screenshot (e.g.
--foreground-primary to the color
--gray-3), then just get a checked checkbox in the colum
Var, so the formula in
CSS Property will automatically wrap
var(…) around it. This tells Webstudio to
link the variable for
use --foreground-primary to the
system color
--gray-3.
After you defined variable and value, the
CSS Property get's concatenated in the the formula. You can just copy/paste the full css property into Webstudio (as mentioned in
this video by @John Siciliano).
