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

So what happens when you combine more than one great thing together with other amazing things? Magic happens friends.

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. 😺💪

Update April 2020: We actually now have divided Stratos into two apps, it makes total sense to us and it’s actually easier to develop like this, separating the code bases.

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

…and this is how this looks inside of Storybook 👍🤖

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

All the best

Juan Maguid, Team Sketch2React