{"id":40,"date":"2019-12-07T17:08:36","date_gmt":"2019-12-07T16:08:36","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/12\/07\/how-to-do-real-time-component-development-with-sketch-stratos-storybook\/"},"modified":"2021-11-08T17:14:59","modified_gmt":"2021-11-08T16:14:59","slug":"how-to-do-real-time-component-development-with-sketch-stratos-storybook","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/how-to-do-real-time-component-development-with-sketch-stratos-storybook\/","title":{"rendered":"How to do real-time component development with Sketch, Stratos & Storybook"},"content":{"rendered":"
\n

<\/p>\n<\/figure>\n

\n
\n
\n
\n

Update November 2021: <\/strong>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.<\/p>\n

Let\u2019s get the big picture<\/h3>\n

First of all we have Sketch<\/a>. An excellent tool for designing and crafting user interfaces that\u2019s used by over 1 million designers worldwide. That soon will add Figma-like functions like real-time design collaboration<\/strong> among many great things.<\/p>\n

Then you have Storybook<\/a>, 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 ?<\/p>\n

Add in the middle of this Stratos<\/strong>, the \u201cnext version\u201d of Sketch2React<\/a> and you have yourself an explosive visual real-time, design to code component development enviroment.<\/strong> Our words and we can back up every single character in that sentence.<\/em><\/p>\n

Below tutorial is for what we now call Stratos Components<\/strong>. You can get it plus Stratos Tokens by going here<\/a>.<\/p>\n

Tutorial time folks<\/h3>\n

So how do you use Stratos, Sketch and Storybook together?<\/strong> In this tutorial I\u2019ll show you how to setup everything, get things running and show you the strengths of a design to code world that\u2019s happening right now.<\/p>\n