How to export Sketch to HTML - Anima Blog
Design to code

How to export Sketch to HTML2 min read

Reading Time: 3 minutes Automatically generate HTML from a Sketch design

How to export Sketch to HTML

How to export Sketch to HTML2 min read

Reading Time: 3 minutes

Overview

Anima allows designers to create fully responsive prototypes that look and work exactly like the finished product using their own design tools (Sketch, Adobe XD, or Figma).

Developers can export these designs as HTML & CSS, or React code, in a matter of a few clicks. Anima gives you component-based, clean code that developers love to use.

This article takes you through how to do this, what it looks like, and just how easy it is.

How to export code

There are two ways in which you can do this, either by exporting the code directly from your design tool (Sketch, Adobe XD, or Figma) or directly from Anima’s web app.

Option 1— Export code directly from Sketch

This is a great option for designers who produce prototypes and create landing pages.

  1. On your Anima plugin in Sketch, click “Preview in browser”.
  2. Click Export Code in the top right corner.
  3. Select where the Code Package will be saved on your computer and click Save.

Image showing how to export code from a Sketch design

Click “Export Code” on the top right corner on your Anima plugin in Sketch

Option 2 — Export code via Anima’s Web App

This is an excellent option for developers and others who do not have access to these design tools. By selecting this option you can also get code for a specific design component rather than the full package.

  1. Sync your design from Sketch to your Anima project.
  2. Select the screen you want to get the code of.
  3. Switch to code mode, pick any element and get HTML code

GIF showing how to get HTML from a Sketch design

Pick any element, get HTML code

4. You can also get the full code package simply by clicking “Download Code” on the top right corner.

GIF showing how to download HTML from a Sketch design

Click “Download Code” to get the full code package

What you get in the Code Package

Once you have downloaded the code package, it will save as a zip file in your selected location. The zip file contains the HTML files, CSS files, images, and fonts.

Want to see what it looks like? Download a sample Code Package here.

Image showing the Anima code package for Sketch designs

Once the files are unzipped, they can be previewed locally in the browser with all its Smart Layers and interactions just like the final product!

GIF showing the code from Sketch

If you open the files in a text editor you’ll see a well-structured HTML and CSS.

  • Each screen design gets its own HTML and CSS file.
  • Screens with Breakpoints share the same HTML and CSS file.

Ready to Start?

Download Anima plugin for Sketch, Adobe XD or Figma
Visit Anima 101 page

button to get Anima now

|

Marketing Content Manager

An avid writer and a research machine. Passionate for telling the story behind every product. An extrovert and a people person. Loves nothing more than a good ol’ pamper day.

Leave a comment

Your email address will not be published.