Generating CSS (that makes sense) from designs
For the past few weeks, we’ve been brainstorming on how to generate CSS from the design data we have in Zeplin. There are apps/plugins for this out there, but most of them just don’t feel, or work right in real world scenarios.
Let’s face it: No one will just copy and paste the generated CSS and be done with it. Every developer cherishes their own way of implementing things. More importantly, there are subtle things that are impossible to figure out from the raw design data. So our aim should be to help ease the pain! 💪
Here’s a simple button. After exporting it to Zeplin, this is the CSS you’ll get:
Rules like width, height and border-radius are trivial but still listed, in case you need them. box-shadow though, has a lot of parameters and can be challenging. This where the generated CSS starts to shine.
Similarly, gradients are usually a pain in the butt to implement:
Weirdly enough, a large portion of tools out there generate gradient CSS incorrectly. Rightfully so, because design tools usually work on different coordinate systems and it’s not straightforward to translate them. We spend quite a bit of time to perfect this (There are still some edge cases!) as we feel like gradients are the most valuable piece of this feature.
Just grab the rules you need.
Zeplin projects have a color palette as well. Why not make use of it? 🎨 Developers can already export the colors in the palette as variables, now you’ll see these variables popping up in the CSS as well:
If you prefer not to use variables, just grab the first rule.
Note that most of the CSS Zeplin generates is for modern browsers. If you need to support older versions, feel free to use an autoprefixer.
We still have a long way to go! Next in line is Sass, Less and Stylus support. Feel free to ping us, we’d love to hear your feedback: support@zeplin.io
👋
