Sketch to HTML – The Ultimate Conversion Process

Sketch Overview

Similar to Adobe Photoshop, Sketch is synonymous with graphic design tools and shares the same popularity amongst UI designers. Its flexibility makes it preferable for both designers and developers especially in the making of mobile websites. Its strengths for later Sketch to HTML conversion are undeniable and we’ll quickly review some of them. For starters, as we mentioned earlier, Sketch is a vector-based graphic software.

Therefore, you don’t have to worry about screen densities. This provides the facility to resize objects. No matter if you design for retina or small 360×640 screens, the assets won’t get pixelated. Another good tweak is the text field that changes size when you add text content. With Photoshop, for example, if that text exceeds the field, you’ll need to resize the whole paragraph.

On a similar note, the properties of the text boxes are extremely convenient for later HTML conversion. This is because the paddings for top and bottom depending on the line-height. With that being said, if your text is 20px in font size, the line height includes 5px padding on the top and bottom same as in the HTML conversion. This way the developer will simply copy the margins from the Sketch files and won’t have to figure them out themselves.

The software also allows you to build numerous artboards as well as to work on other tasks simultaneously.

Furthermore, with Sketch it’s far easier and more intuitive to assign properties and effects as it’s CSS based. This, of course, is really welcomed by the developer as you can also give them CSS snippets so the implementation will perfectly match the Sketch design.

And let us not forget the fact that Sketch files are really small in size, especially in comparison to PSDs.

And we can’t fail to mention the infinite number of plugins…

Sketch also allows you to make your workflow even easier as it can run with some really useful plugins. Depending on what you need, the community offers a huge variety of plugins to make your designing process as effective as possible. There are really good ones, starting with Runner that allows you to search and install Sketch plugins easier and also notifies you when a plugin gets a new update. There is also Auto Layout for reviewing your designs on all possible screen sizes for all artboards at once. Or how about the Feather Sketch Library with all icons, symbols, and color overrides? There is also the Measure plugin to share your specs with the developers as it autogenerates HTML and CSS files from Sketch.

Prototyping in Sketch

The Sketch prototyping tool gives you a good set of features that allows you to connect your artboards and apply basic transitions between elements right on the spot. You are able to review your designs and how they interact in Sketch and even share the prototypes with your teammates or clients via Sketch Cloud. This inevitably improves the workflow between all parties on the same project.

It’s very important to be able to prepare a prototype that will really translate to the final product and make your clients feel it. Such high-fidelity prototypes are incredibly handy in terms of testing the user experience before having to actually develop it.

In short, high-fidelity prototypes are best for delivering experience instead of just static screenshots, in order to convey your innovative design ideas to your clients. It’s a responsive and interactive prototype of the final product that communicates exactly how that product will feel and behave once the development process is done.

Such high-fidelity prototypes are possible in Sketch with the right tools of course, and we’ll jump right into reviewing the most effective ones.

Anima App

Anima is currently available for Sketch and XD, with Figma support in the making. The tool will help you go through the entire process of building the prototype, previewing it in your browser, sharing it with your stakeholders, and collaborating.

During the building phase, you will be able to make your design consistent by using stacks, padding, pins, and other layout features. The pins, for example, are a quick way to set every element’s position on the page no matter how the layout changes on the different screens and they work inside Sketch the same way when you preview them in your browser.

These features make it easy for everything in your prototype to become responsive and to adapt the design on every possible screen resolution.
Next in line are the links, breakpoints, and overlays that will allow users to navigate through the prototype.

In Anima, you can also set a Home artboard to let the plugin know that it represents your Homepage. This is especially great when you need to design multiple pages for a website.

The Smart Layers of Anima

The Smart Layers feature, on the other hand, can make elements such as text layer and a button become an actual input field with a real Submit button. In fact, users who will test the prototype will be able to type into the form in your design and experience it as a life form.

In addition, the Smart Layers also allow you to place a video if you set the layer as a Video and assign a link to it. This way, instead of placing an image of the video thumbnail to hint the element as a video player, you will have an actual video player in your prototype. For those with experience in coding, the Smart Layers allows them to even embed their own HTML/CSS/JS code.

Interaction Editor

Interactions are a big part of what makes a prototype good in terms of experience. By using the Interaction editor, you can show exactly how the toggle switch or hover effects will act in the final product. Once you add the first state in the editor, you can change the properties and timing of the layers you want to animate. Anima also allows you to create your interactions inside symbols so you could make an interactive library and reuse them.

In terms of previewing, you can access the Preview in Browser at any time during your prototype building. Every time you decide to click the Preview, the software will generate a Draft version of your design that only you can view. This means that even if you’ve already shared the prototype with the stakeholders, you can still make changes and drafts in private if needed. Those changes will be visible only to you until you sync them with the shared version of the prototype.

Sharing with other users is also quick and convenient as you only need to sync changes with the live version and then click Share. You can also use the public link which allows you to invite your team members and clients to view, comment, and collaborate.

InVision Craft

Another powerful tool that works as a continuation between Sketch and InVision bringing all together for a faster prototyping process and collaboration. If you add a hotspot to a layer in your project while working in Sketch and link it to an artboard with a gesture and create a transition, you will get a birds-eye view of how exactly your screen is connected.

InVision Craft outputs visual specifications. It allows you to copy and arrange objects and define elements like spacing, and text, image, and repeating element autofill. It can bring real text, JSON, and live-web content that will make your prototype feel like the real thing.

Similar to Anima, when ready to review your project, you can just click the Sync option and your prototype will be available for sharing and collaboration.

You could check out this InVision Craft Prototyping tutorial.

Principle

The third most preferable prototyping tool that works well within Sketch is Principle. Surely, the tool integrates perfectly with Sketch. It allows complete import of Sketch files alongside the layers and most of the properties, although there are limitations. Such limitations include paths, borders, fills, masks, blurs and etc.

The plugin is designed to make it easier for you to craft animated and interactive user interfaces. It will also help you create the flow of your multi-screen app. As a tool, it specializes in the interaction between multiple sketch screens and the conversion of the product.

It also enables you to export in different formats, including a video of your prototype and the interactions within

If Principle caught your interest, you could also check out this prototyping tutorial.

Before you proceed to the collaboration phase of the Sketch to HTML conversion, you might also like to check our review on other tools for prototyping in 2020.

Sketch for Collaboration

With team subscription Sketch allows you to bring along your team members and clients into your design process. They will be able to see everything you share and leave feedback. The software offers shared cloud libraries for a single source of truth, prototype reviews, developer handoff inside the browser. Other necessary features include two-factor authentification and SSO to keep the project secure, artboard level annotations and comments, advanced sharing options, and integrations with Cloud API.

Surely, the team subscription for Sketch isn’t necessary. There are additional collaboration tools that are fully integrated with the software and bring even more features to the table. Most importantly, they are perfect for Windows users who wish to work on your project as they can easily input the Sketch file there. The most recommended ones are Avocode and Zeplin.

Avocode

The most used collaborative tool for Sketch design files available for Mac OS, Windows, and Linux. Avocode allows you to keep track of changes made in the sketch design and adds the option to communicate updates with commit messages.

For Mac users who view the files in Sketch, there is the option in Avocode to edit the file in Sketch. It will automatically trigger the tool to download and open the file. When you apply your changes you’ll also have the option to describe those changes. There is a list of changed artboards and symbols: green circle for added artboards; yellow for edited and red for deleted. Additionally, there’s a text field in the top right corner for a description of what you’ve changed.

You can basically chat right on top of your designs as you annotate a specific area and comment on it. This includes starting a discussion about any element or area of interest and reply. You can even mention a specific colleague with the @ symbol which works as a tag and gets them notified.

For bigger teams especially

Avocode also integrates with Slack which will enable receiving notifications for design updates, comments, replies, and mentions in one channel or a couple of channels designated to specific projects.

In addition, you can also assign custom permissions to other members who take part in the project. This way you can keep your internal designs in private.

It’s important to add, that working simultaneously in Sketch and Avocode is safe and you will not lose any of your work. In case of unsaved changes, a message will appear to let you know and ask you if you’d like to continue editing or start over. The first will bring up the current version of your design in Sketch.  The latter will remove the changes made in Sketch and open the version from Avocode.

Zeplin

This is the second powerful collaboration tool within Sketch that you can use to invite other users to your project.  Your team members and clients could review the prototype, upload their own designs and add comments. Especially dor developers,  they will be able to view the specs and code snippets, and download assets. Like Avocode, Zeplin is available for Windows and Linux users. That makes it more convenient than using the collaboration features of Sketch itself.

There is the share button where you can add the email address or Zeplin user name of a particular user you wish to share your project with. Once invited, the stakeholder will have access to the content. You can add notes, mention team members, and organize notes by using colors. Since the notes are grouped into open, mentioned, and resolved, you could narrow them down even further. For example, you can assign green for improvements, red for bugs, orange for suggestions, and so on.

Sketch to HTML Conversion

Now, let’s proceed with the final part of the Sketch to HTML conversion process. We discussed some of the most efficient tools for high-fidelity prototyping and collaboration within Sketch. This will inevitably make the conversion of Sketch artboards and layers into bundles of code for the final product way easier. (and more convenient for your friendly neighborhood developers, which is a very nice thing to do)

The rest is pretty much straightforward from the moment you complete your final prototype to Sketch to HTML conversion. The process involves exporting the HTML code, choosing the file format (PNG or SVG) for your layers, and to take care of the cross-browser compatibility.

It’s necessary to add that once you complete the conversion, it’s essential to do quality testing for the final result. Surely, this is something that has to be done by a developer. The deep understanding and experience will make it easy for them to find the bugs and fix them. After all, the devil is in the details, and details such as all pages should be properly linked to the navigation menu, or image optimization, precisely formatted text, proper H1/H2/H3 tags must be in order.

Quality testing and getting rid of all bugs and errors will ensure a perfectly working final product of a website on all browsers and devices. This, needless to say, will keep the reputation of your brand high. So make sure professionals handle this last step. It’s always better to keep developers in your team. Or seek the help of developing agencies with experienced teams of code-savvy front-end developers. You know the type: ones who turn designs into websites for breakfast.