PROTOSHIP DECODE

Home Blog

Decode was an experiment in finding the fastest way to go from vector designs to HTML & CSS that is as close to what a programmer would manually write. We wanted to take away the mundane parts of design to code, while giving maximum control to the programmer in how the code is laid out. We're happy to have found an optimal point within these constraints.

The tool is no longer online, but we welcome you to take a look at how we've solved this problem and extend it to build a compelling solution.

— Jacob & Jasim.

Shorten your design-to-code turnaround time

from multiple days to just a few minutes

Hand-code custom, high-quality HTML & CSS for your Figma designs. Do it faster with Decode's automatic code generation.

What is Decode

Protoship Decode is an HTML-writing tool. The front-end developer writes the HTML best suited for the design at hand. Decode makes the process faster by letting you pick and insert elements from the design directly into your HTML structure.

Thus the final code produced is very much your own. It does not have any confusing HTML or unnecessary CSS and you can modify and integrate it into your codebase with confidence.

How does it work

There are two main panes. On the left side is the HTML code editor where you write the HTML for the design. Oh the right side, the vector design mockup is shown.

You start by writing the HTML structure for the design. When you need to insert a design element - a text or an image - you can look at the mockup pane and find its number. Type in the number inside the HTML container and the element will be placed there automatically.

By the time you're done you'll have a full-width version of your design as HTML & CSS. You can then add the necessary width, max-width and other responsive Tailwind classes to the HTML to make the layout fluid and closer to the design.

Things you don't have to do:

  • Structure the design meticulously (like grouping or auto-layouts)
  • Inspect the design to find colors and fonts
  • Manually type values into a CSS file
  • Measure the gap between elements for paddings and margins
  • Export images, and link to them as <img src> or background-image

Things you have to do:

  • Write the HTML for your design in a familiar online code editor
  • Write Tailwind classes to make the HTML responsive

FAQ

Do you need to know HTML & CSS to use Decode?

Yes, Decode embraces HTML & CSS. To use it, you have to know about the box model, flexboxes, and media queries.

Why Tailwind?

Tailwind, beyond being a CSS library, is a concise notation for styles that you can embed in the HTML itself. This lets you add styles like max-width and responsive changes like shifting to a block layout from flex when in smaller device sizes, all without editing any separate CSS file. Tailwind also comes with a standard design scale and it is especially useful for spacing scales.

What about BEM or CSS-in-JS libraries?

There is nothing preventing from a tool like Decode supporting any kind of CSS approach. Tailwind was the closest to our ideal of how CSS should be laid out, and so we went with it. Tailwind also helps us avoid having to give semantic classnames for every HTML element, which is particularly useful for a code generation tool like Decode.

What happens when the design changes?

Just re-upload the design through the Protoship Figma/XD plugin. Any elements you've deleted will be gone from Decode. If the layout of the new design does not match with the HTML you've already written, then you'll be shown its details. You will have to fix it before you can save and proceed.

Is it pixel-perfect?

Pixel-perfection is not an ideal when using a design-scale based framework like Tailwind. With Decode, all the spacing values in your design (margins and paddings) are mapped to its closest equivalent in the standard Tailwind spacing scale. This means if one of your margins is 35px, it'll get mapped into 36px (m-9 in Tailwind). If the value is 33px, it'll get mapped into 32px (m-8 in Tailwind).

But this is not a hard and fast rule. You can insert custom CSS values using Tailwind's arbitrary value synatx, or when using BEM/CSS-in-JS we can avoid having a design-scale encoded in code completely.