How to do real-time component development with Sketch, Stratos & Storybook

Update November 2021: Stratos Components is not longer available. We’re are a very small team with spare time to develop apps and something had to go, sad to say. We are now focusing on Sketch2React and Stratos Tokens. Still this tutorial is nice to keep around, as a kind of time machine for our projects.

Let’s get the big picture

First of all we have Sketch. An excellent tool for designing and crafting user interfaces that’s used by over 1 million designers worldwide. That soon will add Figma-like functions like real-time design collaboration among many great things.

Then you have Storybook, an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient. Their words not ours, but we totally agree ?

Add in the middle of this Stratos, the “next version” of Sketch2React and you have yourself an explosive visual real-time, design to code component development enviroment. Our words and we can back up every single character in that sentence.

Below tutorial is for what we now call Stratos Components. You can get it plus Stratos Tokens by going here.

Tutorial time folks

So how do you use Stratos, Sketch and Storybook together? In this tutorial I’ll show you how to setup everything, get things running and show you the strengths of a design to code world that’s happening right now.

Tutorial Resources

Here’s a couple of things that I use in this tutorial that can be handy.

Automatic setup for Storybook React
Article I mention in the beginning

Code Screenshots & a bit of explaining

What gets auto-generated from Stratos?

The styled components themselves. We use markup to expand what can be done directly from within Sketch (and later Figma). Frankly none of these fine design apps where ever built to do what we are able to pull off with Stratos (or Sketch2React).

So by using our own markup we bypass all the constraints and the text tool is your best friend here.

What do I need to do inside my code editor?

For this very simple example, only the code I used down below. Basically what you do is you import the styled components into your Storybook .stories by using very basic javascript and React code. Thanks Fredrik Ward

To get my typography into Storybook I wrote this code

The code for the Typography section in my demo Storybook

…and this is how this looks inside of Storybook

To get my colors into Storybook I wrote this code

The code for the Colors section in my demo Storybook

Stratos Alpha 1 will be available to all our Patreons & Gumroadians before end of this year.

All the best

Juan Maguid, Team Sketch2React