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.
Here’s a couple of things that I use in this tutorial that can be handy.
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?
To get my typography into Storybook I wrote this code
To get my colors into Storybook I wrote this code
Stratos Alpha 1 will be available to all our Patreons & Gumroadians before end of this year.
All the best
Juan Maguid, Team Sketch2React