Codegen converts Sketch designs to precise HTML and CSS. The generated code is clean and minimal. It is meant to be used by developers to extend and integrate into their codebase.
No absolutely positioned elements. Instead, the box model, flexbox, and CSS grids are used to place elements in the page.
Achieve full responsiveness. When exporting a design, Codegen expects the largest canvas size possible. Afterwards, in the Codegen UI, you can switch breakpoints and change responsive properties for elements.
Design Tokens with Tailwind CSS. The generated code uses Tailwind CSS, and comes with a tailwind.config.js file customized for your design. It contains design tokens like colors, typography, and spacings, all extracted from the input design. These tokens are exclusively used in the final HTML & CSS.
Framework agnostic. The code is plain HTML & CSS and can be used with no extra processing. This means it can be used with any back-end or front-end framework as well as with static site generators.
Installing CodegenDownload Codegen Sketch plugin
Once the plugin is downloaded, unzip and double-click on it to install.
Download Sketch file
Download codegen-tutorial.sketch — we will use it for the onboarding tutorial