Protoship Decode

Decode is an HTML editor that lets you insert Figma design elements straight into your HTML code.

You don't have to manually pick colors, find fonts, or measure spacings. All you have to do is tell Decode which design element goes where, and it will figure out everything else for you.

Tailwind CSS

The editor generates a Tailwind config just for your design, and uses Tailwind classes for all styling.

A novel approach to Design to Code

Protoship Decode is a novel design-to-code tool that lets you generate HTML & Tailwind CSS from Figma designs.

It is novel because it is a specialized HTML editor rather than a fully automated solution. That is a significant departure from all existing design-to-code tools, including our own previous attempts.

Design Goals

We had the following sometimes conflicting goals while designing it:

  1. Generate code indistinguishable from hand-coded output by an expert programmer.
  2. Get the developer to be intimately familiar with the generated code, so they can modify and integrate it as their own.
  3. Eliminate the slow, painstaking work of inspecting the design, measuring paddings and margins, and manually writing CSS by hand.
  4. Accept any design file with zero to little modifications. Do not depend on the design's layer organization.

This is how Decode solves it: Decode offers the front-end developer an HTML editor along with the mockup of the design side-by-side. In the editor, you can write the most minimal amount of markup needed for the design. The design mockup view will show all the design elements with a two letter shortcode. You can use this shortcode to insert these design elements into the HTML you're writing. Decode will then do the rest - it will figure out all the CSS properties of the element, layout it using paddings and margins, and insert it into the markup with appropriate Tailwind classes.

With this, the developer can quickly hammer out a design by just writing its markup, and everything else is done for them by Decode. It speeds up the design-to-code flow substantially, while producing hand-coded output that the user themselves had a hand in writing.

There are however two downsides with this approach:

  1. It is not fully automated. There is no magic button to go from a design to high-quality production-ready code.
  2. To use the tool, one should know enough HTML & CSS to be able to implement their design by themselves. Decode just eliminates a lot of manual effort, but the decision-making on how to structure the markup is left with the developer.

Getting started

The tool is in its unpolished alpha. A few features are missing before you will be able to use it for production work. Sorry for the wait, and thanks for your patience!

If you're still interested in trying it out and are fine with an early alpha of a product, then you can get started by downloading the Figma Plugin for Decode from here.

We have no documentation and few tutorials at the moment. Please write to us at hello@protoship.io and we'll be happy to help you get the most out of Decode.