CSS exporting from Sketch — Marketch Plugin Review

By the way, I am open to new projects. Let’s work together 👉 alexkukharenko.com/contact/

Last few years we have seen few robust tools which have transformed our past workflow into something better: Zeplin, Invision Inspect, Simpli. Today I want to introduce you one more tool: Marketch.

Why it requires our attention:

• It’s free
• Works offline
• Extremely fast
• Supports web and mobile platforms (shows sizes in px, points, and dp)
• Generates css
• Exports all images in different sizes (1x, 2x, 3x)
• Developer doesn’t need to have Sketch App

Installing

Download repository as ZIP file and install marketch.sketch plugin by double click.

Export styles from Sketch

Select artboards, confirm the settings and choose a folder where generated files will be saved.

It creates a project’s folder with the assets inside.

Work in Marketch

Open index.html file. Interface consists of 3 columns:

1) Left navigation sidebar

It contains all the symbols and artboards that were exported.

2) Content section

Here you are able to work with your mockup and measure some dimensions:

• height and width of selected (clicked) object
• distance between objects

It works in the same way when you hold Alt key in Sketch and hover on other layers

3) Styling sidebar

This right sidebar contains CSS details of selected object.

In general it generates clean and simple css code which is able to handle a lot of annoying and routine work. But I can’t call Marketch complete solution and I will explain why.

Testing on a real example

Let’s examine how it will help us to write CSS for Password input field.

Let’s see what is missing and has to be added to CSS file:

• Need to mention margin values.
  margin: 12px 15px 12px 15px;
• Need to mention input’s type in HTML form. In this case all characters will be masked as asterisks *:
  <input type=”password”>
• Set a different font style for placeholder and text
  ::-webkit-input-placeholder {color: #ccc;}
  font-color: #5c5c5c;
• Add a focus state. We can generate a CSS code for it by Marketch also:
  border: 1px solid black;
• Unfortunately this basic styling will not look the same in different browsers.

This tool for you if:

• Your developer hates Sketch App
• You hate writing of annoying CSS ( that’s me!)
• You are a mobile developer and you hate of calculating sizes.
• You create living styleguide

In conclusion:

As the expected tool doesn’t allow to make HTML layout with 1 click but it can help a lot for designer-developer collaboration. Besides, it’s a great thing for creating living styleguides! Nowadays we are going to living styleguides only and all those sketch and PSD styleguides feel pretty old.