How to Turn Your Sketch Designs into Code

Jason Beres [Infragistics] / Monday, March 8, 2021

For a development team, getting clean code from an approved, well-constructed design seems like it should be easy. But most tools that aid in this process do not produce high-quality code, or code that can even be used in a real enterprise app.  In this article we will explore the options using Sketch, one of the most popular design tools in use today.

Let’s get started!

Sketch to Code

When Sketch was founded in 2011, one of its founders, Emanuel Sa, said that the purpose for creating Sketch was very simple: “we wanted to help people design better products.” Which it did spectacularly, as Sketch created a new standard in website or app design simplicity.

But over the years, with the need to turn designs into finished, coded applications as easily as Sketch designers created designs, it became clear that a breakdown was occurring in the designer-developer handoff, which was fraught with inefficiencies. Disparate platforms (such as Sketch and Visual Studio Code) and incompatible workflows created tons of issues in how design was translated into code. 

A strong design-to-code movement emerged in the last few years to pick up where Sketch left off – the goal being to create a seamless, consistent, easy-to-use process that ensures Sketch designs can be easily transformed into usable code.

This blog will look at the state of this process, identify what is working and what’s not, and look at what a complete design to code solution should offer.

What is Sketch?

Sketch is a digital design application that combines a powerful, native Mac app with collaboration features in the cloud. The Mac app provides all the tools a designer needs to create wireframes, mockups, prototypes, and even production-ready assets from their design ideas. On the Cloud side, Sketch has built a set of collaboration tools that make it easy for designers to share work with teammates, get feedback, test ideas with prototype previews, and hand off designs to developers.

What is Sketch to Code?

As briefly mentioned earlier, Sketch to code is the process of streamlining and speeding the process of turning Sketch designs into working code. It addresses the challenges that have been plaguing designers and developers for years: that even though designers go to great lengths to create digital solutions that are perfectly measured and consistently crafted, design systems do not fluently translate to development systems.

Part of the problem is that the more the designer does to an interface, the more they must communicate to a developer. So, it is not enough to hand over a Sketch design file and leave the developer to run with it. Designers must provide design specs that explain how all the moving pieces need to be laid out, spaced, styled, colored, engaged with and so on.

It has been the only way to ensure that an app ends up pixel-perfect in the end. Even then, it still requires a lot of implementation on the part of the developer once they are inside their IDE.

Developers are not typically in the habit of coding with HTML and CSS, which is tedious work and only represents the UI. There is a lot more code behind the scenes that makes a web app work and not all developers are adept at or interested in learning to write the UI markup. When they are forced into this position, the steep learning curve adds more time to projects and the resulting reworks and debugging sends costs spiraling out of control.

Turn Sketch to Code with Indigo.Design

The advantage of a Sketch to Code platform is that it lets you generate HTML, CSS, and Angular code right from your design. The best platforms include a design system and use real components to produce clean, high-quality code.

How to Turn Sketch Designs to HTML Code

The term ‘Sketch to HTML conversion’ refers to the process of transforming a Sketch design file into a fully functional HTML template using modern web technologies like HTML, CSS, and JavaScript. It is about converting Sketch artboards and layers into bundles of files that can be in the form of CSS, HTML, font files, and so on. 

Here are parts of a sketch code export:

  • All Sketch assets are imported from a project file
  • Not all designs have layers structured for HTML output, so it’s important to use a tool that analyzes and restructures the design elements as needed for high quality HTML output.
  • You can convert design elements to HTML elements like button, input, or select as needed, and visually edit elements, group and organize them manually.
  • You can publish your design and share with others, allowing everyone to download the HTML/CSS output.
  • It relies on HTML and CSS only, does not use or assume any Javascript in output. A developer can use the output HTML with Angular, React, VueJS or any other frontend library.

Many believe that the best way to convert Sketch files to HTML is by writing your own CSS/HTML for these reasons:

  • Conversion tools are known for creating bad code
  • Not great for SEO
  • Cannot provide the zing that appeals to the audience, unlike handwritten code
  • It does not really ensure quality

No matter the approach – it’s time consuming, cumbersome and error-prone.

Sketch Code Generators

The ultimate goal of creating an app or website design using Sketch is to convert it into a working application with real code. But as we’ve described above, there are many steps involved to get the Sketch design from the designer’s intricate designs to clean, working code. This is where Sketch code generation tools come in, and numerous companies have attacked the problem by focusing on different areas of the problem.

Microsoft Sketch2Code Is Exciting, But Doesn’t Address Real Design Process

One of the more interesting approaches is one from Microsoft called Sketch2Code (no relation to the aforementioned Sketch Mac app), which uses AI in the prototyping phase of design and lets designers turn their sketches or images quickly into HTML code by simply uploading it. Microsoft uses Computer Vision to detect HTML objects in the drawing and uses text recognition to extract texts from the design and combines the objects and text to quickly generate HTML code.

While Sketch2Code is an exciting use of new technology, I believe at best it is an experimental tool to prove out AI and is not a design tool that can help accelerate going from design to code.

Why do I say this?

Because Sketch2Code doesn’t deal with the actual reality of how companies use design to code today. In the real world, the process of going from design to code includes many stakeholders and is a highly iterative process. It includes creating art boards or visual mock-ups, collaborating with internal design teams, creating prototypes, performing usability testing to understand how easy it is for real users to use, then transferring the specs to a developer, who then reconstructs the prototypes and writes the UI code to make it look like what has been specified.

Only in very rare cases could you expect to go from a whiteboard drawing to runnable code. In reality, going from a design straight to code is rarely the goal, the goal is to take an idea, turn it into a prototype using Sketch or Figma or Adobe XD. In this respect, design teams and designers still want to use their vector-based design tool of choice, which today is Sketch, Figma, or Adobe XD, they don’t want to use an unfamiliar tool.

Sketch to Angular Code — Code that Developers Trust

A final consideration is the question of the quality of the code being created. “Design to code” means useful code, not just “code.” There have been many attempts at getting to 'code' in the past, but the problem is that the code is not useful — it cannot be modified, refined, or debugged. Therefore, there is so much pushback in the market today around "code generation" tools. I have spoken to hundreds of developers and they fear them because these tools have never delivered on the promise of accelerating product to market - they just bring a lot of headaches. They require developers to spend time refactoring bloated, non-compliant production-ready code. So, many developers prefer to continue to code from scratch.

The other issue is that some of our competitors say they offer design to code but what they actually output is still not usable because they don’t have a design system backed by real components that can make the code generation actually useful.

Sketch to Code Plugin

In Indigo.Design, developers control which components they want to generate code assets for. 

Indigo.Design from Infragistics is unique because it is a complete design-to-code solution, or what Gartner calls a “digital product design platform.”

“In the era of remote work and distributed teams, real-time visual collaboration and co-editing are critical to innovation. Digital product design platforms are acting as the new whiteboard for the entire digital product team.”

  • Gartner, Technology Insight for Digital Product Design Platforms

With Indigo.Design, everything you create in Sketch uses a design system, so all the specifications of styling and themes match real Angular components. With the click of a button, you can generate high-quality HTML, CSS, and Angular code, right from your design.

Indigo.Design stands out because of the quality of our code. Infragistics is not a Johnny-come-lately to the challenge of producing the best quality UI components; we have been at it for 30+ years. We have built components for Fortune 500 companies that rely on our grids and charts every day to handle real-time financial transactions, power conversion for large-scale infrastructure, or streaming IoT data.

We generate clean code that is usable, debuggable, and can stand the test of time. And you get the whole package, design tool compatibility, design systems, UI kits, prototyping, user testing and 100% usable code generation.

Indigo.Design

Find out more about how Indigo.Design works with Sketch and see videos of how to build artboards in Sketch, create prototypes and generate code In Visual Studio at the Indigo.Design website.