3 ms·

Lately I've been working with designers through Sketch + Zeplin and its been pretty great. I like being able to pull CSS and SVG/PNG assets out of the tool and

Lately I've been working with designers through Sketch + Zeplin and its been pretty great. I like being able to pull CSS and SVG/PNG assets out of the tool and it speeds up mockup to built site quite a bit. What worries me about a tool that outputs html + css is then having to take that markup and integrate it with whatever client side framework or server side template engine so that its consistent with the rest of the code base, follows set code and style standards, is fully responsive and adheres to whatever arbitrary standards are set by the dev team. I just don't have a lot of faith that a tool can be flexible enough to output markup that can then be used effectively. I imagine a developer will need to massage it into place in order to get it to conform well and by that point it might have just been easier for a competent web developer to build it from scratch. For prototyping or building out functional mock ups, it could be quite useful, but if the end goal is to hand a developer some markup and stylesheets and then let them build out the business logic, then things could get messy pretty quickly. It's a good dream though and I hope that one day we can let designers do more of the view layer work but I'm cautiously optimistic.

seanmcdirmid 8y ago
Even when design tools can generate code, they don't generate the code you probably want. On the desktop side, there have been more aggressive attempts to allow for code ahead to co exist with the code behind (e.g. XAML), but even then if any kind of abstraction is involved, hand written code will win in the end. There has been more work in academia about round tripping between code, and direct manipulable output (e.g. see Ravi Chugh's work). Anyways, I'm a strong believer that design and prototyping should be firewalled off from production. Even when the assets are transferrable, the iteration speed demanded by the design process means they'll necessarily lack the polish of production assets.
lionpixel 8y ago
I second that! I’m working in a big digital agency and our process looks like this lately: Sketch -> Zeplin -> Storybook (React Component) Works like a charm! Developers are super happy and productivity increased by three.
andrewingram 8y ago
My main issue from working with Zeplin is that it can't "explain" the layout, it can only give you dimensions in a specific static scenario. For example, a layout might be based on a grid system that can only be derived from looking holistically at every design artefact (including written words), because any individual layout gives an incomplete piece of the puzzle. Ultimately I found that Zeplin doesn't replace the need to have conversations about most aspects of a design; and whilst it can provide value in some cases, that scope of that value tends to be vastly overstated. If you know that your design system uses a base unit of 8 pixels, you can eyeball most dimensions up to about 8 units, and guess pretty successfully above that.
davidjnelson 8y ago
Developers will need to customize with code for (finger in the air) 20 more years. Eventually we’ll solve this with AI, but talk about a hard problem. It will eventually happen. Until that point, we need tools that output real applications in ( to start with ) react that allow real time collaboration between design, engineering, qa, product, and project/execs/stakeholders.

seanmcdirmid 8y ago

Even when design tools can generate code, they don't generate the code you probably want. On the desktop side, there have been more aggressive attempts to allow for code ahead to co exist with the code behind (e.g. XAML), but even then if any kind of abstraction is involved, hand written code will win in the end. There has been more work in academia about round tripping between code, and direct manipulable output (e.g. see Ravi Chugh's work). Anyways, I'm a strong believer that design and prototyping should be firewalled off from production. Even when the assets are transferrable, the iteration speed demanded by the design process means they'll necessarily lack the polish of production assets.

lionpixel 8y ago

I second that! I’m working in a big digital agency and our process looks like this lately: Sketch -> Zeplin -> Storybook (React Component) Works like a charm! Developers are super happy and productivity increased by three.

andrewingram 8y ago

My main issue from working with Zeplin is that it can't "explain" the layout, it can only give you dimensions in a specific static scenario. For example, a layout might be based on a grid system that can only be derived from looking holistically at every design artefact (including written words), because any individual layout gives an incomplete piece of the puzzle. Ultimately I found that Zeplin doesn't replace the need to have conversations about most aspects of a design; and whilst it can provide value in some cases, that scope of that value tends to be vastly overstated. If you know that your design system uses a base unit of 8 pixels, you can eyeball most dimensions up to about 8 units, and guess pretty successfully above that.

davidjnelson 8y ago

Developers will need to customize with code for (finger in the air) 20 more years. Eventually we’ll solve this with AI, but talk about a hard problem. It will eventually happen. Until that point, we need tools that output real applications in ( to start with ) react that allow real time collaboration between design, engineering, qa, product, and project/execs/stakeholders.