{"id":42,"date":"2019-11-25T20:23:07","date_gmt":"2019-11-25T19:23:07","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/11\/25\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/"},"modified":"2020-06-18T07:42:34","modified_gmt":"2020-06-18T07:42:34","slug":"introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/","title":{"rendered":"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705"},"content":{"rendered":"<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3840\" data-height=\"2160\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png\"><figcaption class=\"wp-caption-text\">Hello World\u00a0??<\/figcaption><\/figure>\n<p>Hey guys, Juan from <strong>Team Sketch2React<\/strong> here ??<\/p>\n<p>We\u2019re super proud to announce the <strong>next version of Sketch2React called Stratos<\/strong> to the world with this very article. Doing it here, the very same place where we first introduced Sketch2React, feels amazing.\u2764\ufe0f<\/p>\n<hr>\n<h3>Important info ?\u00a0?<\/h3>\n<p>Many people have contacted us regarding Stratos and that is awesome. A bit of clarification on our part is needed:<\/p>\n<ul>\n<li>\n<em>Stratos Apps are <\/em>being distributed to all of our Patreons &amp; Gumroadians 100% free (<em>people who has bought or will buy our pre-releases via Gumroad that is<\/em>)<\/li>\n<li>\n<a href=\"https:\/\/gumroad.com\/l\/stratoswfh\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Stratos Beta Program is out now<\/strong><\/a><strong>\u200a\u2014\u200a<\/strong>it includes two apps, Stratos Components &amp; Stratos Tokens<\/li>\n<li>The Alpha &amp; Beta releases will all be time-stamped, meaning they will work for x time, then stop functioning<\/li>\n<li>When we release v1 of Stratos you will be required to purchase a license<\/li>\n<\/ul>\n<hr>\n<h3>A bit of\u00a0history<\/h3>\n<p>Almost two years ago me and Fredrik embarked on this journey with a very simple yet complex question: <em>why do we work like we do between design &amp; code?<\/em> We wanted to be able to do more and we were not satisfied with the way handoff tools worked.<strong> So we started creating something that ended up being <\/strong><a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Sketch2React<\/strong><\/a><strong>.<\/strong><\/p>\n<p>We released the very first public version of Sketch2React in May 2018. You couldn\u2019t do much with it then and the code generated frankly was a bit messy. But it gain us some attention (thanks guys ??\u2764\ufe0f).<\/p>\n<p><em>Fast forward to the present.<\/em> Stratos is not just a big evolutionary step for us as a team, but also for all designers &amp; developers out there that want to do more, work smarter and get more stuff done faster and more efficient. Isn\u2019t that like everyone? Should be.<\/p>\n<h3>How is this different from v1 of Sketch2React?<\/h3>\n<p><em>Good question. <\/em>Don\u2019t get us wrong, we think v1 in it\u2019s current iteration (v1.6.7) is awesome, we\u2019ve added tons and tons of great features over the last 20 months.<\/p>\n<p>But in V1+ you\u2019re limited to exporting as either a <strong>React website project <\/strong>(Vanilla React, Create React App) or as a <strong>HTML5 web project<\/strong>.<\/p>\n<p>Fine things but why stop there? We have taken this core philosophy of <em>more<\/em> to the next level with Stratos. If you\u2019re wondering why we have changed the name you can read more about it <a href=\"https:\/\/medium.com\/sketch2react\/lets-look-into-version-2-of-sketch2react-%EF%B8%8F-%EF%B8%8F-cc7730f6f0a8\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<h3>The why<\/h3>\n<p>First a little history for understanding all the new things we added.<\/p>\n<h4>Not made up\u00a0scenario<\/h4>\n<ul>\n<li>Do your already <strong>overworked developers <\/strong>keep on prioritising down your \u201d<em>petty design fixes<\/em>\u201d ??<\/li>\n<li>Do you feel that you could do more for your team with the proper tooling?<\/li>\n<li>Do you keep hearing things like \u201cWe\u2019ll do this later\u201d?<\/li>\n<\/ul>\n<p>We totally understand all of these situations because this is how real design and development sometimes works in our day to day jobs.<\/p>\n<p>We want to <strong>erase later<\/strong> from existence with Stratos. That\u2019s no small task but hey what we do is insanely challenging already as it is, so why stop?<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3840\" data-height=\"2160\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*L5EyI0nruv9k_6BMdqXGSg@2x.png\"><figcaption class=\"wp-caption-text\">Here\u2019s us trying to explain how Stratos works (click on it to enlarge)\u00a0?<\/figcaption><\/figure>\n<h3>What can I do in Stratos that\u2019s so awesome\u00a0then?<\/h3>\n<p>First and foremost the biggest difference is that we have <strong>re-written our rendering engine from scratch<\/strong> so it now renders <a href=\"https:\/\/www.styled-components.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Styled Components<\/strong><\/a>. ? ?<\/p>\n<p>We also gave our core engine a fine name, <strong>Tropos Engine<\/strong>. See a <a href=\"https:\/\/www.google.com\/imgres?imgurl=https:\/\/i.pinimg.com\/originals\/8f\/0c\/36\/8f0c3606617eb0cd07c09dd22f46d58f.jpg&amp;imgrefurl=https:\/\/www.pinterest.com\/pin\/227431849918714585\/&amp;docid=QvqFuOjqhuGoSM&amp;tbnid=UY4Ew_Jwo1QFaM:&amp;vet=1&amp;w=740&amp;h=605&amp;source=sh\/x\/im\" target=\"_blank\" rel=\"noopener noreferrer\">pattern here<\/a> in the naming of things? ?<\/p>\n<h3>Styled Components?<\/h3>\n<p>What the heck is a <strong>Styled Component<\/strong> you may be thinking right now. We\u2019ll let the great <a href=\"https:\/\/flaviocopes.com\/styled-components\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flavio Copes<\/a> explain:<\/p>\n<blockquote><p>Styled Components allow you to write plain CSS in your components without worrying about class name collisions.<\/p><\/blockquote>\n<p>Styled Components aren\u2019t even exclusive for React, the same team that built and maintains the library also created one for <a href=\"https:\/\/github.com\/styled-components\/vue-styled-components?source=post_page-----8d0fdd8e605a----------------------\" target=\"_blank\" rel=\"noopener noreferrer\">Vue.js<\/a>! How awesome is that!? ?<\/p>\n<p>In other words, it kicks *ss.<\/p>\n<p>Very useful for designers that already are used to thinking in terms of <strong>reusable components<\/strong> (symbols in Sketch for example). You also want your code components to be reusable right? That\u2019s the brilliant thing about React, everything is a component. Yup.<\/p>\n<p>Let\u2019s dissect how easy it is to create one of the most used Styled Components straight from Sketch, the good old <strong>H1<\/strong>.<\/p>\n<h3>How do I create a Styled Component then?<\/h3>\n<p>This is how you create a <strong>Styled Component in Sketch<\/strong> with Stratos.<\/p>\n<h4>In Sketch<\/h4>\n<ol>\n<li>Create a <strong>new blank Sketch file<\/strong> (\u2318N)<\/li>\n<li>Rename Page 1 \u2192 <strong>Start here<\/strong>\n<\/li>\n<li>Create a new blank artboard (A) and call it <strong>Start<\/strong> (any size works)<\/li>\n<li>Create a <strong>text node (T)<\/strong> and write something more creative than the default generated text ? ?<\/li>\n<li>Go to the <strong>Sidebar in Sketch<\/strong> (formerly known as Layer List) and add this markup to the text layer:<\/li>\n<\/ol>\n<pre><code>{h1}<\/code><\/pre>\n<ol>\n<li>Style it, make it big\u200a\u2014\u200aand your done \u2705 That wasn\u2019t hard!<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3584\" data-height=\"2182\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*0VSCLc6ZF7proPo2OUQYpg.png\"><figcaption class=\"wp-caption-text\">Your document will look something like\u00a0this\u2026<\/figcaption><\/figure>\n<p>Now let\u2019s fire up Stratos and get comfortable.<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"2824\" data-height=\"1904\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*YOByRtskC42MuD-eDVqE7A.png\"><figcaption class=\"wp-caption-text\">This is the new Stratos Start Screen ??\u200a\u2014\u200aAlpha\u00a0Footage<\/figcaption><\/figure>\n<h3>All the new things in\u00a0Stratos<\/h3>\n<ol>\n<li>A new <strong>Start Screen<\/strong> where you <strong>create new projects<\/strong> and load already created ones.<\/li>\n<li>We now have our own project file format, its called\u00a0<strong>.stratosproject<\/strong>. This is due to the fact that you no longer only create things inside of your design application but also inside our code app (custom components for example).<\/li>\n<li>You can either open up an already created project or create a new one from scratch. Let\u2019s do that ?<\/li>\n<\/ol>\n<h3>How to create a new project in\u00a0Stratos<\/h3>\n<ol>\n<li>First of all, give your <strong>Stratos project file a name<\/strong>, please don\u2019t use strange characters, stick to English and you\u2019ll be fine<\/li>\n<li>Click on <strong>Select Project Folder<\/strong>, create a new folder on your computer machine and select it. What happens in the background is that we auto-create all necessary start files once you come to the step where you hit the Create New Project button. But don\u2019t do that yet ? ?<\/li>\n<li>Next <strong>Select Design File<\/strong>. Now you have two choices, either you select an already created blank design file (Sketch at the moment, later also Figma) or you create one in Sketch and save it to the same newly created folder from step 2. We recommend having all your design file in the same place as your project, makes it much more easier organising your projects this way. Also, you could for example send the entire folder later to someone else thus making this a self-contained Stratos project folder. Very neat.<\/li>\n<li>You\u2019re now ready to hit that sweet looking <strong>Create New Project<\/strong> button. Doooo it \u2705<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"2258\" data-height=\"1502\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*0PTiAnQFB-dFAUEhO8nV4g.png\"><figcaption class=\"wp-caption-text\">All those auto created sweet thangs\u00a0yessss\u2026<\/figcaption><\/figure>\n<p>What happens now is that Stratos opens up your Sketch file and the first view you see is what we call the <strong>Design File View<\/strong>. This is how ours look:<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3584\" data-height=\"2182\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*wVPgSBtQAJXavwnMC2ZN_g.png\"><figcaption class=\"wp-caption-text\">Design File View in Stratos\u200a\u2014\u200aAlpha\u00a0Footage<\/figcaption><\/figure>\n<p>Let\u2019s press the <strong>Code View<\/strong> icon and see how the pure\u00a0.sketch file code looks like:<\/p>\n<p>Awesome ??<\/p>\n<p>So let\u2019s dive deeper into Stratos and look around a bit more, how this H1 looks and what we can do with it. Jumping down to the color palette icon you find something that we call the <strong>Component Inspector<\/strong>.<\/p>\n<p>Let\u2019s study the code from the H1:<\/p>\n<h4>Styled Component<\/h4>\n<pre>export default styled.h1`<br>&amp;&amp; {<br>  letter-spacing:normal;<br>  text-align:default;<br>  line-height:inherit;<br>  color:rgba(10,5,74,1);<br>  font-family:WorkSans-Bold, 'Work Sans', sans-serif;<br>  font-size:30px;<br>  font-weight:700;<br>  mix-blend-mode:normal<br>}`;<\/pre>\n<h4>CSS-Variable<\/h4>\n<pre>const H1Style = {<br>  \"letter-spacing\": \"normal\",<br>  \"text-align\": \"default\",<br>  \"line-height\": \"inherit\",<br>  \"color\": \"rgba(10,5,74,1)\",<br>  \"font-family\": \"WorkSans-Bold, 'Work Sans', sans-serif\",<br>  \"font-size\": \"30px\",<br>  \"font-weight\": 700,<br>  \"mix-blend-mode\": \"normal\"<br>}<\/pre>\n<h4>React-Snippet<\/h4>\n<pre>&lt;h1 style={H1Style} &gt;{props.children}&lt;\/h1&gt;<\/pre>\n<p>Without even being a developer you as a designer should by now realise the <strong>utter strength and revolution <\/strong>about what you\u2019re experiencing right now. This is a <strong>live Sketch file<\/strong>, it took you seconds and you are staring at a beautiful <strong>{h1}<\/strong> Styled Component ? \u2705<\/p>\n<h3>The Explorer<\/h3>\n<p>The <strong>Explorer is a mighty mighty beast<\/strong>. ? You get to it by clicking on that icon that resembles a paper-thingie. One very convenient feature is the <strong>Artboard navigator<\/strong>. Never more will you need to link artboards together to view them, just navigate to them here. Boom ?<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3584\" data-height=\"2182\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*WivHLOXOmft0mdR-j3tyMQ.png\"><figcaption class=\"wp-caption-text\">Oh we love you mighty Explorer\u200a\u2014\u200aAlpha\u00a0Footage<\/figcaption><\/figure>\n<p>Here\u2019s what you also what can do in the Explorer:<\/p>\n<ul>\n<li>Create <strong>Custom React Components<\/strong>\n<\/li>\n<li>View your Stratos Components (the ones that comes from Sketch)<\/li>\n<li>A tree view of your entire code structure<\/li>\n<\/ul>\n<p>Btw, this is how this very same project looks inside of Visual Studio Code (you can use whatever editor you want of course):<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1792\" data-height=\"1090\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*qoBop4TSJdjyaCmQaiUbQw.png\"><figcaption class=\"wp-caption-text\">You can live edit all the rendered code &amp; add your own custom components directly from your preferred code\u00a0editor<\/figcaption><\/figure>\n<p>Prefer adding your own custom code directly inside your prefered editor? Dooooo it. ? ?<\/p>\n<h3>Exporting to\u00a0code<\/h3>\n<p>So say that you\u2019re ready to share your awesome components with your developers, what\u2019s next?<\/p>\n<p>We now support exporting all of your Styled Components as a NPM project, how awesome is that? It means you can use for example <a href=\"https:\/\/www.npmjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">NPM.js<\/a> for uploading and sharing your code components with your team or the world.<\/p>\n<p>Or maybe you also want to use something like <a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Storybook<\/a> to manage &amp; maintain your components? Easy peasy, we\u2019ll do a proper tutorial on all these things in the coming months.<\/p>\n<p>So you see now why and how we just erased later.<\/p>\n<h3>Will this tool give you more responsibility?<\/h3>\n<p><em>Yes it will.<\/em> With great powers comes great responsibility Spiderman says. So true. <strong>We\u2019re creating a totally new layer between design and code that has not been possible before. <\/strong>Are we alone? Of course not. One thing though, we have some things that separates us from all other competitors:<\/p>\n<ul>\n<li>\n<strong>This is not a plugin for Sketch and it will not be a plugin for Figma either. <\/strong>We use the strength of these <strong>excellent design tools <\/strong>and add more. On the side. That keeps us from building over-complicated plugins that can break really easy when the design tools make huge changes in the backend of things.<\/li>\n<li>\n<strong>We do not import the design file, it\u2019s linked.<\/strong> It\u2019s a living breathing organism that you attach to Stratos. We see multiple benefits for this approach. You always have your design files intact, you can share them via Sketch Shared Libraries (and later Figmas Component Sharing).<\/li>\n<li>Need to update your linked design file? No worries, just update, save the document and it auto-reloads inside Stratos.<\/li>\n<li>\n<strong>We don\u2019t own anything, <\/strong>nothing is stored in a cloud service. Everything is safe in your local design and development environment, you decide were, when and what you share.<\/li>\n<\/ul>\n<hr>\n<h3>Will Stratos be\u00a0free?<\/h3>\n<p><em>Nope.<\/em> V1 of Stratos will require a paid license, how much and how it will work will be revealed upon release. Up until then we will share the Beta with the same fine folks that always support us economically (see above).<\/p>\n<p>Upon release of Stratos V1 all subscribers of our newsletter (plus all above supporters) will be given a great discount on the very first paid license.<\/p>\n<hr>\n<p>That\u2019s it hope you enjoyed this preview of Stratos and we hope your excited ? We know we are ? \u2705 ?<\/p>\n<h3>Our very first Stratos Tutorial is\u00a0out<\/h3>\n<p><a href=\"https:\/\/medium.com\/sketch2react\/how-to-create-custom-react-components-in-stratos-8d8f6d0fdf2b\">https:\/\/medium.com\/sketch2react\/how-to-create-custom-react-components-in-stratos-8d8f6d0fdf2b<\/a><\/p>\n<hr>\n<h3>How to do real-time component development with Sketch, Stratos &amp; Storybook<\/h3>\n<p><a href=\"https:\/\/medium.com\/sketch2react\/how-to-create-custom-react-components-in-stratos-8d8f6d0fdf2b\">https:\/\/medium.com\/sketch2react\/how-to-create-custom-react-components-in-stratos-8d8f6d0fdf2b<\/a><\/p>\n<hr>\n<p><em>All the best<br \/><\/em><strong>Fredrik &amp; Juan, <\/strong>Team Sketch2React<\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"256\" data-height=\"256\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*cE3xiQNDA3f4O-C51tyviQ.png\"><br \/>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Hello World\u00a0?? Hey guys, Juan from Team Sketch2React here ?? We\u2019re super proud to announce the next version of Sketch2React called Stratos to the world with this very article. Doing it here, the very same place where we first introduced Sketch2React, feels amazing.\u2764\ufe0f Important info ?\u00a0? Many people have contacted us regarding Stratos and that&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[168],"tags":[113,63,10,55,117],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-miscellaneous","tag-html5","tag-reactjs","tag-sketch","tag-sketch2react","tag-styled-components"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705 | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/introducing-stratos\u200a-\u200aproduction-ready-styled-components-directly-from-inside-sketch-\ud83d\udc8e-\ud83d\udcaa-\u2705\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705 - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"Hello World\u00a0?? Hey guys, Juan from Team Sketch2React here ?? We\u2019re super proud to announce the next version of Sketch2React called Stratos to the world with this very article. Doing it here, the very same place where we first introduced Sketch2React, feels amazing.\u2764\ufe0f Important info ?\u00a0? Many people have contacted us regarding Stratos and that&hellip;&nbsp;Read More &raquo;Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/introducing-stratos\u200a-\u200aproduction-ready-styled-components-directly-from-inside-sketch-\ud83d\udc8e-\ud83d\udcaa-\u2705\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-25T19:23:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:42:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705\",\"datePublished\":\"2019-11-25T19:23:07+00:00\",\"dateModified\":\"2020-06-18T07:42:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/\"},\"wordCount\":1857,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png\",\"keywords\":[\"Html5\",\"Reactjs\",\"Sketch\",\"Sketch2react\",\"Styled Components\"],\"articleSection\":[\"Miscellaneous\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/\",\"name\":\"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705 - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png\",\"datePublished\":\"2019-11-25T19:23:07+00:00\",\"dateModified\":\"2020-06-18T07:42:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705 | Sketch2React Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sketch2react.io\/blog\/introducing-stratos\u200a-\u200aproduction-ready-styled-components-directly-from-inside-sketch-\ud83d\udc8e-\ud83d\udcaa-\u2705\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705 - Sketch2React Blog","og_description":"Hello World\u00a0?? Hey guys, Juan from Team Sketch2React here ?? We\u2019re super proud to announce the next version of Sketch2React called Stratos to the world with this very article. Doing it here, the very same place where we first introduced Sketch2React, feels amazing.\u2764\ufe0f Important info ?\u00a0? Many people have contacted us regarding Stratos and that&hellip;&nbsp;Read More &raquo;Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705","og_url":"https:\/\/sketch2react.io\/blog\/introducing-stratos\u200a-\u200aproduction-ready-styled-components-directly-from-inside-sketch-\ud83d\udc8e-\ud83d\udcaa-\u2705\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-11-25T19:23:07+00:00","article_modified_time":"2020-06-18T07:42:34+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705","datePublished":"2019-11-25T19:23:07+00:00","dateModified":"2020-06-18T07:42:34+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/"},"wordCount":1857,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png","keywords":["Html5","Reactjs","Sketch","Sketch2react","Styled Components"],"articleSection":["Miscellaneous"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/","url":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/","name":"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705 - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png","datePublished":"2019-11-25T19:23:07+00:00","dateModified":"2020-06-18T07:42:34+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*MR_zADQ6uRzwkqSF7qbTYw@2x.png"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/introducing-stratos%e2%80%8a-%e2%80%8aproduction-ready-styled-components-directly-from-inside-sketch-%f0%9f%92%8e-%f0%9f%92%aa-%e2%9c%85\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducing Stratos\u200a\u2014\u200aproduction-ready Styled Components directly from inside Sketch ? ? \u2705"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":372,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions\/372"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}