At Liip want to improve the relationship between designers and developers. There are already plenty of excellent platforms to share the work of the designers and plenty of ways to get the information needed to implement the designs. Cool and fancy tools, but extracting design decisions and making something coherent out of the designs is a repetitive task, and time-consuming for a frontender. What if these steps could be done in one click?

A shared vocabulary

Designers and developers have to speak the same language. Bringing a bit of frontend logic and naming conventions into a design tool helps the designer to understand the developer's point of view, and helps to deliver the design assets in a structured way.

Build bridges

Sketch is a design tool widely used by the designers at Liip.
Tailwind is a CSS framework widely used by the frontenders at Liip.
Why not make a bridge between these two complementary worlds? Say welcome to Sketchwind!
(Or Tailtch if you prefer)

What is Tailwind?

Tailwind is a CSS framework for rapidly building custom designs. This framework doesn't offer you predesigned elements like most of the classical CSS frameworks (Bootstrap, Foundation, etc). Tailwind proposes a way more atomic approach and unopinionated classes and naming system. This naming system and all its related values can be customised in a single file, the Tailwind configuration file. This file regroups all the font definitions, colours, spacings, shadows, border radiuses, breakpoints and more. Said differently, it contains all the designs decisions, taken at an atomic scale. We decided to generate this file, directly from Sketch, through a Sketch plugin.

Sketchwind, the template

Sketchwind is an open source Sketch template, based on Tailwind philosophy. It contains the basics stones for building a design system, coherently and comprehensively: font definitions, colours, spacings, shadows, border radiuses, breakpoints and more...
Most of the elementary bricks of the design system are isolated and regrouped, and can be combined following the designer's needs.

The default values defined in the template are based on the default values of Tailwind. You can modify them or determine new ones, and export them as a Tailwind config at any time during your design process. Make an export when a new design decision has been made in your system, and it will be reflected in Tailwind. An in-context detailed documentation will help you to step-in and bootstrap your future design system.
Download Sketchwind template and
Download Sketchwind exporter

Wireframes vs final designs: use the same assets

As Tailwind does, Sketchwind doesn't deliver predesigned assets or designs like buttons or input fields. For example, default styles are in black and white, but a complete colour system is available, easily adaptable, and ready to be exported.

In that direction, the template proposes «undesigned» smart symbols. You will be able to override and customise these symbols, as you wish and when you want. You could consider these global symbols like stem cells. They are not defined yet, but they can become anything, at any time.

That means you could start your designs and deliver wireframes first, and then reuse the same components and deliver the final designs. All design modifications done in your «stem cells» will be spread in your designs and components.

Global symbols, the stem cells of Sketchwind

Best practices and accessibility

The Sketchwind template contains a few components based on Sketch best practices, and invite the designer to think about accessibility at the very beginning of the project. The predefined colour palette has some basic hints regarding color contrasts, and a part of the global symbols are ready to use for designing the focused elements.

Default color palette, with accessibility hints

Additional assets

This colour palette comes from Tailwind UI, a component library based on Tailwind CSS. The library includes a complete open source icon family called heroicons. We integrated it in Sketchwind.
Every icon has a symbol, where you can override the colour, the type (filled or outlined) or the stroke width.
Of course, you are free to import your icons and assets, but having a perfectly executed icon library out of the box is very convenient for bootstrapping a project and build advanced prototypes quickly.

Naming conventions

The structured elements of the template and how the design assets are grouped and isolated helps the understanding of a frontender job. Additionally, the proposed naming convention for the components brings the default vocabulary of Tailwind in a Sketch template. As Tailwind does, this vocabulary is flexible and customisable. Designers and developers can adapt it to their needs and their common vision.

Sketchwind exporter, the plugin

If the frontend implementation of your project will be done with Tailwind CSS framework, you can use the Sketchwind exporter. This plugin parses the Sketch template and extracts the following design assets:

  • Colours
  • Border radiuses
  • Border widths
  • Box shadows
  • Opacities
  • Spacings
  • Breakpoints
  • Font Families
  • Font sizes and line heights
  • strokes for svg icons
Sketchwind exporter

A JSON file is generated, and you just need to copy-paste it in the 'tailwind.config.js' file of your project. Done!
Download Sketchwind template and
Download Sketchwind exporter

Sketch API

This plugin was a pleasure to develop with the help of the simple Sketch API. Written in JavaScript and based on a modern stack, every frontender can settle quickly in a Sketch plugin development. Thanks to this API, devs and designers can improve their own tools together and improve their collaboration.

Final words

Not only clients need the help of developers, internal employees have specific needs too. At Liip, we are continually thinking about how to improve our processes and methods. And sometimes we build our own tools to fulfil missing bricks of a proficient workflow. Shaping a tool for Liip designers and developers, sharing the work with the community is a rewarding experience we want to continue. Try out Sketchwind and Sketchwind exporter, and tell us how it influences your workflow and the collaboration between developers and designers. And contribute to the project on Github!

Downloads

Plugin development

Frameworks and icons