Hello World 😺👍

Introducing Stratos — production-ready Styled Components directly from inside Sketch 💎 💪 ✅

Juan Maguid
Nov 25 · 10 min read

Hey guys, Juan from Team Sketch2React here 🥳👍

We’re 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.❤️


Important info 🤖 👍

  • Stratos is not ready yet
  • Stratos Alpha 1 will be distributed to all of our Patreons & Gumroadians 100% free (people who has bought or will buy our pre-releases via Gumroad that is)
  • Alpha 1 will be released to above people before end of this year, maybe even before Christmas 🎅
  • The Alpha & Beta releases will all be time-stamped, meaning they will work for x time, then stop functioning
  • When we release v1 of Stratos you will be required to purchase a license

A bit of history

We released the very first public version of Sketch2React in May 2018. You couldn’t do much with it then and the code generated frankly was a bit messy. But it gain us some attention (thanks guys 😊👍❤️).

Fast forward to the present. Stratos is not just a big evolutionary step for us as a team, but also for all designers & developers out there that want to do more, work smarter and get more stuff done faster and more efficient. Isn’t that like everyone? Should be.

How is this different from v1 of Sketch2React?

But in V1+ you’re limited to exporting as either a React website project (Vanilla React, Create React App) or as a HTML5 web project.

Fine things but why stop there? We have taken this core philosophy of more to the next level with Stratos. If you’re wondering why we have changed the name you can read more about it here.

The why

Not made up scenario

  • Do you feel that you could do more for your team with the proper tooling?
  • Do you keep hearing things like “We’ll do this later”?

We totally understand all of these situations because this is how real design and development sometimes works in our day to day jobs.

We want to erase later from existence with Stratos. That’s no small task but hey what we do is insanely challenging already as it is, so why stop?

Here’s us trying to explain how Stratos works (click on it to enlarge) 🌵

What can I do in Stratos that’s so awesome then?

We also gave our core engine a fine name, Tropos Engine. See a pattern here in the naming of things? 😄

Styled Components?

Styled Components allow you to write plain CSS in your components without worrying about class name collisions.

Styled Components aren’t even exclusive for React, the same team that built and maintains the library also created one for Vue.js! How awesome is that!? 🚀

In other words, it kicks *ss.

Very useful for designers that already are used to thinking in terms of reusable components (symbols in Sketch for example). You also want your code components to be reusable right? That’s the brilliant thing about React, everything is a component. Yup.

Let’s dissect how easy it is to create one of the most used Styled Components straight from Sketch, the good old H1.

How do I create a Styled Component then?

In Sketch

  1. Rename Page 1 → Start here
  2. Create a new blank artboard (A) and call it Start (any size works)
  3. Create a text node (T) and write something more creative than the default generated text 😺 👍
  4. Go to the Sidebar in Sketch (formerly known as Layer List) and add this markup to the text layer:
{h1}
  1. Style it, make it big — and your done ✅ That wasn’t hard!
Your document will look something like this…

Now let’s fire up Stratos and get comfortable.

This is the new Stratos Start Screen 🤖👍 — Alpha Footage

All the new things in Stratos

  1. We now have our own project file format, its called .stratosproject. 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).
  2. You can either open up an already created project or create a new one from scratch. Let’s do that 👍

How to create a new project in Stratos

  1. Click on Select Project Folder, 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’t do that yet 😺 💪
  2. Next Select Design File. 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.
  3. You’re now ready to hit that sweet looking Create New Project button. Doooo it ✅
All those auto created sweet thangs yessss…

What happens now is that Stratos opens up your Sketch file and the first view you see is what we call the Design File View. This is how ours look:

Design File View in Stratos — Alpha Footage

Let’s press the Code View icon and see how the pure .sketch file code looks like:

Awesome 😎👏

So let’s 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 Component Inspector.

Let’s study the code from the H1:

Styled Component

export default styled.h1`
&& {
letter-spacing:normal;
text-align:default;
line-height:inherit;
color:rgba(10,5,74,1);
font-family:WorkSans-Bold, 'Work Sans', sans-serif;
font-size:30px;
font-weight:700;
mix-blend-mode:normal
}`;

CSS-Variable

const H1Style = {
"letter-spacing": "normal",
"text-align": "default",
"line-height": "inherit",
"color": "rgba(10,5,74,1)",
"font-family": "WorkSans-Bold, 'Work Sans', sans-serif",
"font-size": "30px",
"font-weight": 700,
"mix-blend-mode": "normal"
}

React-Snippet

<h1 style={H1Style} >{props.children}</h1>

Without even being a developer you as a designer should by now realise the utter strength and revolution about what you’re experiencing right now. This is a live Sketch file, it took you seconds and you are staring at a beautiful {h1} Styled Component 😆 ✅

The Explorer

Oh we love you mighty Explorer — Alpha Footage

Here’s what you also what can do in the Explorer:

  • Create Custom React Components
  • View your Stratos Components (the ones that comes from Sketch)
  • A tree view of your entire code structure

Btw, this is how this very same project looks inside of Visual Studio Code (you can use whatever editor you want of course):

You can live edit all the rendered code & add your own custom components directly from your preferred code editor

Prefer adding your own custom code directly inside your prefered editor? Dooooo it. 👍 🤖

Exporting to code

We now support exporting all of your Styled Components as a NPM project, how awesome is that? It means you can use for example NPM.js for uploading and sharing your code components with your team or the world.

Or maybe you also want to use something like Storybook to manage & maintain your components? Easy peasy, we’ll do a proper tutorial on all these things in the coming months.

So you see now why and how we just erased later.

Will this tool give you more responsibility?

  • This is not a plugin for Sketch and it will not be a plugin for Figma either. We use the strength of these excellent design tools 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.
  • We do not import the design file, it’s linked. It’s 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).
  • Need to update your linked design file? No worries, just update, save the document and it auto-reloads inside Stratos.
  • We don’t own anything, 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.
Big Warning ⚠️This is a very preliminary release plan, things might change 🤖

When is Stratos coming out?

That will help us iron out all bugs before a Beta release early 2020. The screenshot above is a very preliminary release plan, things will most probably change, often for the better.

What will happen to Sketch2React?

Stratos uses an updated markup language but if you learn V1 it will be a very small transition when/if you decide to hop on the future track.

Black Friday Yay!


Will Stratos be free?

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.


That’s it hope you enjoyed this preview of Stratos and we hope your excited 😆 We know we are 🥳 ✅ 🤖

Our very first Stratos Tutorial is out


All the best
Fredrik & Juan, Team Sketch2React

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Juan Maguid

Written by

Tools and tutorials for the people! Co-founder of Sketch2React.io

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade