4

Figma + Zeroheight is amazing. Are there downsides?

3 years ago from , Product Designer

I've been in digital design for nearly 18 years. I feel like I've been waiting that entire time for a what Figma + Zeroheight can now accomplish. I'm almost in disbelief the day has finally come to sync vector assets with a web-based library that can be used by designers, developers, and marketing people alike. I just got done with a 2-month engagement for a company that badly needed a design audit and a great public-facing design system going forward. They are completely thrilled with what Figma + Zeroheight accomplished for them.

Based on that, I'd like to split half my future projects between mobile design and design systems consulting. I'm wondering if any of you guys have experienced anything similar and if you have come upon any limitations or frustrations with this.

I guess the main thing for me is having used Storybook in the past and being able to deploy code from there -> Github -> production, that's a pretty powerful thing. That doesn't seem to be part of Zeroheight's mission, but if it was, it would tie everything together.

Would love any insights into any of this.

4 comments

  • Jerome de Lafargue, 3 years ago

    Hey Derek, I'm one of the founders at zeroheight :) Super heart warming to read this!

    I guess the main thing for me is having used Storybook in the past and being able to deploy code from there -> Github -> production, that's a pretty powerful thing. That doesn't seem to be part of Zeroheight's mission, but if it was, it would tie everything together.

    I'm not sure exactly what you mean by this but we definitely have plans to improve the connection between the design system documentation and development environments - both for testing and prod. One example is our focus this year on making drastic improvements to our design tokens API so that eventually designers can make changes to design values and see those reflected in code seamlessly, giving design teams the power to essentially practice continuous integration without involving developers... watch this space!

    1 point
    • Jeff T, 3 years ago

      Gotcha, thanks! You guys have done an amazing job with this. It's a long time coming in this industry and as someone who's been in it a long time, it's a relief to see.

      Re: syncing with code, I think I meant: if I change an icon in Figma, I want the SVG code to be pushed to Zeroheight and then via Zeroheight a way to push to a Github repo which can then be merged with production code. Or, say, if I change the properties of a font in the type system, it will push that CSS live. Or is this currently possible and there's something I'm not understanding? Admittedly I'm a designer not a developer so certain intracacies of that stuff might be lost to me.

      0 points
      • Mattan IngramMattan Ingram, 3 years ago

        This is not going to happen anytime soon. Clean HTML and SVG for the web is usually quite different than what is automatically generated by tools like Figma/Sketch/etc.

        I can't edit my web ready UI icon SVGs in Figma or Illustrator because it ruins all my class names and carefully cleaned up code.

        Figma has no concept of real HTML or CSS, it is just absolutely positioned rectangles. You can't provide clean handoff to devs without essentially rewriting the code in Zeroheight to clarify what classnames or React components or what-have-you correlate with a component in Figma. There isn't even a good way to sync up color variables between Figma design tokens and a web design token JSON or SCSS variables.

        Zeroheight is a great tool, but until we switch from Figma/Sketch to tools actually built on HTML/CSS you won't see this magical two-way syncing ever work cleanly (and without infuriating developers).

        For example Figma has no single-direction borders. To translate a box-shadow or manually added horizontal line in Figma to the correct CSS for your code design system you have to write it manually because there is no way to know that is what was intended automatically if Figma isn't actually using border property CSS.

        2 points
  • Marina JukićMarina Jukić, 3 years ago

    I've made a design documentation demo for a mobile app project last year and I loved how smooth it imports the Figma file and enables you to sort out the components the way you want. I still haven't found major downsides except the hassle of constantly updating changes and upgrades. I wish Figma had an extended version of the library which could then serve as a design documentation.

    1 point