{"id":55,"date":"2019-12-19T17:29:43","date_gmt":"2019-12-19T16:29:43","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/12\/19\/crash-course-stratos-alpha\/"},"modified":"2020-11-29T17:40:08","modified_gmt":"2020-11-29T16:40:08","slug":"crash-course-stratos-alpha","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/","title":{"rendered":"Crash Course Stratos Alpha"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg\"><br \/>\n<\/figure>\n<h4>This is a guide\/crash course for anyone wanting to get started testing Stratos\u00a0Alpha<\/h4>\n<hr>\n<p><span>F<\/span>irst of all, <strong>welcome all Stratonauts<\/strong>! We\u2019re about to embark onto the deep unknown\u200a\u2014\u200awho knows what glorious things we\u2019ll find? ???<\/p>\n<h3>What can I do with\u00a0Stratos?<\/h3>\n<ul>\n<li>Create <strong>Styled Components<\/strong> directly inside your design application (Sketch now, Figma support later)<\/li>\n<li>Export those components via our <strong>NPM export<\/strong> or export as a React web project\/HTML5 web project<\/li>\n<li>\n<strong>Install and work with external React libraries<\/strong> like Material Design UI or Framer Motion<\/li>\n<li>\n<strong>Output Design Tokens<\/strong> straight from your design application<\/li>\n<\/ul>\n<hr>\n<p>This \u201ccrash course\u201d started out as a kind of migration article for users of <a href=\"https:\/\/sketch2react.io\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React<\/a> jumping head-first into Stratos. But the more I worked on it the more obvious it became this is for anyone starting their Stratos journey. So welcome anyone! You\u2019ve found this place, so you must be an awesome person \u2764\ufe0f<\/p>\n<h3>How do I get access to the Stratos\u00a0Alpha?<\/h3>\n<p>All customers that have bought any of our <a href=\"https:\/\/gumroad.com\/l\/stratosapps\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React DLC\u2019s<\/a> in the past or will <a href=\"https:\/\/gumroad.com\/l\/stratosapps\" target=\"_blank\" rel=\"noopener noreferrer\">buy it<\/a> in the near future will receive the <strong>alpha for free<\/strong>.<\/p>\n<blockquote><p>The alpha is as the name suggest, a very early version of Stratos. Keep this in mind when using the\u00a0app.<\/p><\/blockquote>\n<h3>For how long will it\u00a0last?<\/h3>\n<p>All of our alpha and beta releases going forward will be functional for x amount of time. We\u2019re thinking about <strong>90 days per release\u200a<\/strong>\u2014<strong>\u200a<\/strong>that should be about enough time for you guys to try it out. After that date the app will just stop working, no warnings what so ever. <em>You have been informed<\/em>. \u2705 ?<\/p>\n<h3>System Requirements<\/h3>\n<ul>\n<li>Mac OS Mojave or Catalina. Actually the app runs a bit faster on Catalina<\/li>\n<li>Sketch 60+<\/li>\n<li>Admin rights to your computer machine (or nothing will work, trust us)<\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node.js<\/a><\/li>\n<li>An external code editor will be very handy, we \u2764\ufe0f <a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noopener noreferrer\">VSC<\/a>\n<\/li>\n<\/ul>\n<h3>Overview Tutorial<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Stratos Overview\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/EkFDJlRBhUk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<hr>\n<h3>What has changed since Sketch2React?<\/h3>\n<p>Actually about <strong>everything<\/strong>, but let\u2019s do this in <em>small steps<\/em> or you will be, most likely, overwhelmed. ?<\/p>\n<h3>The most important changes\u00a0are<\/h3>\n<ul>\n<li>The <strong>markup<\/strong> we use to do the magic has been updated<\/li>\n<li>Our <strong>code app<\/strong> has been <em>rebuilt from scratch<\/em>, it\u2019s a total different beast now<\/li>\n<li>We have a <strong>new file format<\/strong>,\u00a0<strong>.stratosproject<\/strong>\n<\/li>\n<li>Everything is built around <strong>projects<\/strong> &amp; your design file (<em>the one from Sketch &amp; later Figma<\/em>) is<strong> just one part <\/strong>of the whole picture<\/li>\n<li>We now output <strong>Styled Components. <\/strong>Export them to <strong>NPM projects <\/strong>for super fast team distribution, or why not visualise them with Storybook? Or do both ??<\/li>\n<li>We now support <strong>custom React components &amp; libraries<\/strong>\n<\/li>\n<\/ul>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3584\" data-height=\"2180\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*wWZNGZ2L2CchQMIMNRY85Q.png\"><figcaption class=\"wp-caption-text\">The New Markup will feel right at home since it\u2019s based on Sketch2React<\/figcaption><\/figure>\n<h3>The New Stratos\u00a0Markup<\/h3>\n<p><span>T<\/span>he first thing you will notice if you add a\u00a0.sketch file with the old Sketch2React Markup is that <strong>very few of our own components will be translated automatically.<\/strong> Bummer yes. <em>But it\u2019s for a very good reason.<\/em><\/p>\n<p>We now output <strong>Styled Components<\/strong> and that required a radical change in both the frontend and backend of things.<\/p>\n<p>Some things will feel very familiar. Let\u2019s look at our good old Container component shall we?<\/p>\n<blockquote><p>Sketch2React Markup: <strong>{container}<\/strong>\n<\/p><\/blockquote>\n<blockquote><p>Stratos Markup: <strong>{Container}<\/strong>\n<\/p><\/blockquote>\n<p>Eeasy peasy!<\/p>\n<p>We have something that you could call <strong>Backwards Compatibility<\/strong> for some of our components, specially our layout &amp; grids. But the faster you start learning the new updated markup the better.<\/p>\n<p>We have updated our own components to mimic how <strong>React components are built<\/strong>. Actually this is a great thing since we now also support <strong>totally custom made components<\/strong>.<\/p>\n<h3>\n<strong>Important to know\u00a0<\/strong>?<\/h3>\n<p>Since we still are in <strong>Alpha Mode<\/strong> we have <strong>not <\/strong>updated all of our own core components to output Styled Components yet. Remedy? <strong>Create you own custom components, <\/strong>which is actually a great thing.?<\/p>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3456\" data-height=\"2054\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*pCglCZjlIlHKlML9YQYNAQ.png\"><figcaption class=\"wp-caption-text\">Aaaaaah look at you\u200a\u2014\u200ayou\u2019re just beautiful \u2764\ufe0f<\/figcaption><\/figure>\n<h3>The New Code App\u200a\u2014\u200aDesign Systems are Go Go Go!\u00a0?<\/h3>\n<p><span>S<\/span>tratos was built from the ground up with one<em> single thing in mind<\/em>\u200a\u2014\u200abeing a great tool for building up <strong>real code components<\/strong> straight from inside your <strong>design application<\/strong>. Components are an essential part of any modern design system, and we feel designers could contribute more. By giving designers far more advanced tools than before they can help their dev teams all over the ?<\/p>\n<p>To be able to cater for this we did many things, but one of the most visually striking changes is our <strong>new beautiful code app<\/strong>.<\/p>\n<p>We now output <strong>Styled Components<\/strong> and you can export these directly to <strong>NPM projects <\/strong>for super easy sharing &amp; installing.<\/p>\n<p><a href=\"https:\/\/www.styled-components.com\">https:\/\/www.styled-components.com<\/a><\/p>\n<p>You can also still export everything as HTML5 Web Projects &amp; React Web Projects.<\/p>\n<h3>On the subject of design\u00a0systems<\/h3>\n<p>Many teams use <a href=\"https:\/\/storybook.js.org\" target=\"_blank\" rel=\"noopener noreferrer\">Storybook.js<\/a> for developing, visualizing and documenting UI components. Here\u2019s a tutorial on how to add Storybook.js to your Stratos projects?<\/p>\n<h3>Tutorial\u200a\u2014\u200aHow to add Storybook.js to Stratos\u00a0projects<\/h3>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"How to add Storybook.js to Stratos projects\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/2WTSCNsO7Kw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<hr>\n<h3>Stratos Projects &amp; the New File\u00a0Format<\/h3>\n<blockquote><p>Your design file is a core component in this new structure but it\u2019s not everything<\/p><\/blockquote>\n<p>In Stratos everything is based aROUND <strong>projects<\/strong>. Your design file is a core component in this new structure but it\u2019s not everything.<\/p>\n<p>We also needed a file format to keep all things neat and organised.<\/p>\n<hr>\n<h3>The difference between Custom Names &amp; Custom Component Names<\/h3>\n<p><em>This one can be a little tricky to grasp.<\/em> We now support the use of custom names in Stratos. You write them like this <strong>\/*CustomName*\/. <\/strong>Here\u2019s some <strong>{Button}<\/strong> components I\u2019m making inside the Stratos demo file:<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3104\" data-height=\"1904\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*rCClB781IoSUC6VjPeb0-Q.png\"><figcaption class=\"wp-caption-text\">With <strong>\/*CustomNames*\/<\/strong> you can create 1000 different button styles if you have that ehm need\u00a0??<\/figcaption><\/figure>\n<p>Since I want to have<strong> several different styles of buttons<\/strong> I need to add different \/*CustomNames*\/ to each one of them. Or they will all be overwritten by the {Button} that comes first when reading the design file inside Stratos.<\/p>\n<p>This is <strong>how Styled Components work inside of Stratos<\/strong>\u200a\u2014\u200aif you don\u2019t give them custom names they all will be overwritten by one of them. In a way this is brilliant since you\u2019ll very quickly notice something is very wrong.<\/p>\n<p>Then you have all of those components that you create outside of your design application, directly in Stratos (or in Visual Studio Code). We call those<strong> Custom Components<\/strong>. They can be called anything you want as long as it makes sense to you. Also you\u2019re dealing with real code here, don\u2019t use special characters, keep it simple, keep it in English and you\u2019ll be fine as wine. ?<\/p>\n<h3>Let\u2019s create a Custom React Component! ?<\/h3>\n<p><span>O<\/span>ne of the hardest things with Stratos is trying to explain what you can do with it and what you can\u2019t. There\u2019s so many things you can do\u200a\u2014\u200awhere to start? Let\u2019s do the basics first!<\/p>\n<p>Very soon you will begin creating your <strong>own custom React components<\/strong>. These can be our own simple core components mixed together with something like <a href=\"https:\/\/www.framer.com\/motion\/\" target=\"_blank\" rel=\"noopener noreferrer\">Framer Motion<\/a>, a fantastic open source animation library for React, by the great people behind Framer.<\/p>\n<h3>{Animate} this!<\/h3>\n<p>The component above, <strong>{Animate}<\/strong> is made of a couple of things, let\u2019s break it down so that you can see actually how it\u2019s made.<\/p>\n<h3>In Sketch<\/h3>\n<ol>\n<li>Add some vector graphics and Make Exportable\u200a\u2014\u200aChoose <strong>SVG<\/strong>\n<\/li>\n<li>Group that vector group\/layer, in our case it\u2019s called StratosIconSymbol, the name does not matter, just make sure not to use special characters, stick to English and you\u2019ll be fine<\/li>\n<li>Name that group anything that makes sense, we called ours <strong>{Animate}<\/strong>\n<\/li>\n<li>We also added a {Background} component with a nice gradient, totally unnecessary but nicer to look at ?<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3104\" data-height=\"1904\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ozXwIcPAg6dxsHXRHn96Pw.png\"><figcaption class=\"wp-caption-text\">This custom component <strong>{Animate}<\/strong> adds some sweet Framer Motion animation to the layers inside\u00a0it<\/figcaption><\/figure>\n<h3>In Stratos<\/h3>\n<p>First of all since we\u2019re going to be using Framer Motion make sure to have it installed inside your Stratos project folder. Here\u2019s Fredrik showing you how:<\/p>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"How to add Custom Made React Components to Stratos\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/IiaMvvvsdJo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p>Quick Install of Framer Motion in your Stratos project folder:<\/p>\n<pre><code>npm install framer-motion<\/code><\/pre>\n<ol>\n<li>Go to the Explorer<\/li>\n<li>Navigate to <strong>react\/src\/components\/custom<\/strong>\n<\/li>\n<li>Right-click just above the word <strong>custom<\/strong> and choose <strong>Create new file<\/strong>\n<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3104\" data-height=\"1904\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*vj_Jr_Zo6dyRZSCZGwjZTw.png\"><figcaption class=\"wp-caption-text\">1. Create new\u00a0file<\/figcaption><\/figure>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"3104\" data-height=\"1904\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*B4ORMLjRlnU7Xt2Lg5M-xQ.png\"><figcaption class=\"wp-caption-text\">In our case we called our new component <strong>Animate.js<\/strong><\/figcaption><\/figure>\n<h3>From Stratos Explorer you\u00a0can:<\/h3>\n<ul>\n<li>Create files<\/li>\n<li>Rename files<\/li>\n<\/ul>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1968\" data-height=\"1176\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*Ng9vkOe07mFuBC0Arz97OQ.png\"><figcaption class=\"wp-caption-text\">You can create new files straight inside our Explorer\u200a\u2014\u200aThis is Animate.js<\/figcaption><\/figure>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"1294\" data-height=\"1098\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*1EExzve9fJ1HIh3_VKyBmw.png\"><figcaption class=\"wp-caption-text\">Here\u2019s a closer look at the animation code for<strong> Animate.js<\/strong><\/figcaption><\/figure>\n<hr>\n<h3>What are those auto-generated test#.txt files\u00a0anyway?<\/h3>\n<p><em>First of all, they will soon be removed in an update<\/em>. But right now, in this very first alpha they need to be there for us to auto-create some of our magic behind the scenes. They\u2019re just empty text files with nonsense text in them.<\/p>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"2400\" data-height=\"1472\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*wnGuns86LQpkdbqlXgDwhw.png\"><figcaption class=\"wp-caption-text\">We promise\u200a\u2014\u200ayou will love this feature the more you use it\u200a\u2014\u200aNPM projects rock\u00a0?<\/figcaption><\/figure>\n<h3>How to export to NPM\u00a0projects<\/h3>\n<ol>\n<li>Go to <strong>Download<\/strong>\n<\/li>\n<li>Open up<strong> NPM Project<\/strong> and hit that fine big button<\/li>\n<li>Save it somewhere, I created a folder called export inside my Stratos project folder<\/li>\n<\/ol>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"2122\" data-height=\"1306\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*BLggpAVmPEttpkdcG_V31g.png\"><figcaption class=\"wp-caption-text\">This is what gets exported in may\u00a0case<\/figcaption><\/figure>\n<p>4. Open up the<strong> package.json file<\/strong> in (for example) Visual Studio Code<\/p>\n<p>5. You need to give your <strong>NPM upload a name<\/strong> or no one will be able to install it on the developer part of thingies in your life-work-team-stuffs<\/p>\n<p>6. Upload to your desired source of <a href=\"https:\/\/www.npmjs.com\" target=\"_blank\" rel=\"noopener noreferrer\">NPM packages<\/a>. We\u2019re going to do a tutorial further down the road where we show you all the steps\u2026<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"2018\" data-height=\"1470\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*5egp7p8mKtHnpnVsNplkkA.gif\"><figcaption class=\"wp-caption-text\">Give your exported NPM package a name so that your developers know what to look\u00a0for<\/figcaption><\/figure>\n<hr>\n<h3>The file path\u00a0bug<\/h3>\n<p>This may happen to you sometime down the road:<\/p>\n<ol>\n<li>You create a Stratos project on a shared server (iCloud, Dropbox etc)<\/li>\n<li>You switch computers and re-open the very same\u00a0.stratosproject file<\/li>\n<li>Nothing happens, you just see our loading logo animation<\/li>\n<\/ol>\n<h4>Possible solution<\/h4>\n<ol>\n<li>Open up the\u00a0.stratosproject file in a text\/code editor<\/li>\n<li>Change the <strong>file path to the new directory<\/strong>, you may not have moved anything inside your shared drive but you have switched computers ?<\/li>\n<li>You obtain the file path by dragging the entire project folder onto the Terminal app, as explained in our fine <a href=\"https:\/\/sketch2react.io\/resources\/Sketch2ReactPocketGuide103.epub\" target=\"_blank\" rel=\"noopener noreferrer\">Sketch2React Pocket Guide<\/a>\n<\/li>\n<\/ol>\n<hr>\n<p>That\u2019s it! We\u2019ve created a specific #stratos channel on our public Slack, just join to talk all things Stratos with us ??\u200d???\u200d?\u2026<\/p>\n<p><em>All the best<br \/>Juan &amp; Fredrik, Team Sketch2React<\/em><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"512\" data-height=\"512\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*-_V7lpYbu8tmvyoZ5g4_1g.png\"><br \/>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This is a guide\/crash course for anyone wanting to get started testing Stratos\u00a0Alpha First of all, welcome all Stratonauts! We\u2019re about to embark onto the deep unknown\u200a\u2014\u200awho knows what glorious things we\u2019ll find? ??? What can I do with\u00a0Stratos? Create Styled Components directly inside your design application (Sketch now, Figma support later) Export those components&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Crash Course Stratos Alpha<\/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":[166],"tags":[18,55,116,117],"class_list":["post-55","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-sketch-app","tag-sketch2react","tag-stratosapp","tag-styled-components"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Crash Course Stratos Alpha | 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\/crash-course-stratos-alpha\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crash Course Stratos Alpha - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"This is a guide\/crash course for anyone wanting to get started testing Stratos\u00a0Alpha First of all, welcome all Stratonauts! We\u2019re about to embark onto the deep unknown\u200a\u2014\u200awho knows what glorious things we\u2019ll find? ??? What can I do with\u00a0Stratos? Create Styled Components directly inside your design application (Sketch now, Figma support later) Export those components&hellip;&nbsp;Read More &raquo;Crash Course Stratos Alpha\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-19T16:29:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-29T16:40:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg\" \/>\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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Crash Course Stratos Alpha\",\"datePublished\":\"2019-12-19T16:29:43+00:00\",\"dateModified\":\"2020-11-29T16:40:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\"},\"wordCount\":1751,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg\",\"keywords\":[\"Sketch App\",\"Sketch2react\",\"Stratosapp\",\"Styled Components\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\",\"name\":\"Crash Course Stratos Alpha - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg\",\"datePublished\":\"2019-12-19T16:29:43+00:00\",\"dateModified\":\"2020-11-29T16:40:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crash Course Stratos Alpha\"}]},{\"@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":"Crash Course Stratos Alpha | 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\/crash-course-stratos-alpha\/","og_locale":"en_US","og_type":"article","og_title":"Crash Course Stratos Alpha - Sketch2React Blog","og_description":"This is a guide\/crash course for anyone wanting to get started testing Stratos\u00a0Alpha First of all, welcome all Stratonauts! We\u2019re about to embark onto the deep unknown\u200a\u2014\u200awho knows what glorious things we\u2019ll find? ??? What can I do with\u00a0Stratos? Create Styled Components directly inside your design application (Sketch now, Figma support later) Export those components&hellip;&nbsp;Read More &raquo;Crash Course Stratos Alpha","og_url":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/","og_site_name":"Sketch2React Blog","article_published_time":"2019-12-19T16:29:43+00:00","article_modified_time":"2020-11-29T16:40:08+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Crash Course Stratos Alpha","datePublished":"2019-12-19T16:29:43+00:00","dateModified":"2020-11-29T16:40:08+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/"},"wordCount":1751,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg","keywords":["Sketch App","Sketch2react","Stratosapp","Styled Components"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/","url":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/","name":"Crash Course Stratos Alpha - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg","datePublished":"2019-12-19T16:29:43+00:00","dateModified":"2020-11-29T16:40:08+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*RGyyukNU7u732ZgY-EdNUg.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/crash-course-stratos-alpha\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Crash Course Stratos Alpha"}]},{"@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\/55","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=55"}],"version-history":[{"count":2,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions"}],"predecessor-version":[{"id":700,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/55\/revisions\/700"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}