Skip to content

Crash Course Stratos Alpha


This is a guide/crash course for anyone wanting to get started testing Stratos Alpha

First of all, welcome all Stratonauts! We’re about to embark onto the deep unknown — who knows what glorious things we’ll find? ???

What can I do with Stratos?

  • Create Styled Components directly inside your design application (Sketch now, Figma support later)
  • Export those components via our NPM export or export as a React web project/HTML5 web project
  • Install and work with external React libraries like Material Design UI or Framer Motion
  • Output Design Tokens straight from your design application

This “crash course” started out as a kind of migration article for users of Sketch2React 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’ve found this place, so you must be an awesome person ❤️

How do I get access to the Stratos Alpha?

All customers that have bought any of our Sketch2React DLC’s in the past or will buy it in the near future will receive the alpha for free.

The alpha is as the name suggest, a very early version of Stratos. Keep this in mind when using the app.

For how long will it last?

All of our alpha and beta releases going forward will be functional for x amount of time. We’re thinking about 90 days per release — 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. You have been informed. ✅ ?

System Requirements

  • Mac OS Mojave or Catalina. Actually the app runs a bit faster on Catalina
  • Sketch 60+
  • Admin rights to your computer machine (or nothing will work, trust us)
  • Node.js
  • An external code editor will be very handy, we ❤️ VSC

Overview Tutorial

What has changed since Sketch2React?

Actually about everything, but let’s do this in small steps or you will be, most likely, overwhelmed. ?

The most important changes are

  • The markup we use to do the magic has been updated
  • Our code app has been rebuilt from scratch, it’s a total different beast now
  • We have a new file format, .stratosproject
  • Everything is built around projects & your design file (the one from Sketch & later Figma) is just one part of the whole picture
  • We now output Styled Components. Export them to NPM projects for super fast team distribution, or why not visualise them with Storybook? Or do both ??
  • We now support custom React components & libraries

The New Markup will feel right at home since it’s based on Sketch2React

The New Stratos Markup

The first thing you will notice if you add a .sketch file with the old Sketch2React Markup is that very few of our own components will be translated automatically. Bummer yes. But it’s for a very good reason.

We now output Styled Components and that required a radical change in both the frontend and backend of things.

Some things will feel very familiar. Let’s look at our good old Container component shall we?

Sketch2React Markup: {container}

Stratos Markup: {Container}

Eeasy peasy!

We have something that you could call Backwards Compatibility for some of our components, specially our layout & grids. But the faster you start learning the new updated markup the better.

We have updated our own components to mimic how React components are built. Actually this is a great thing since we now also support totally custom made components.

Important to know ?

Since we still are in Alpha Mode we have not updated all of our own core components to output Styled Components yet. Remedy? Create you own custom components, which is actually a great thing.?

Aaaaaah look at you — you’re just beautiful ❤️

The New Code App — Design Systems are Go Go Go! ?

Stratos was built from the ground up with one single thing in mind — being a great tool for building up real code components straight from inside your design application. 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 ?

To be able to cater for this we did many things, but one of the most visually striking changes is our new beautiful code app.

We now output Styled Components and you can export these directly to NPM projects for super easy sharing & installing.

https://www.styled-components.com

You can also still export everything as HTML5 Web Projects & React Web Projects.

On the subject of design systems

Many teams use Storybook.js for developing, visualizing and documenting UI components. Here’s a tutorial on how to add Storybook.js to your Stratos projects?

Tutorial — How to add Storybook.js to Stratos projects

Stratos Projects & the New File Format

Your design file is a core component in this new structure but it’s not everything

In Stratos everything is based aROUND projects. Your design file is a core component in this new structure but it’s not everything.

We also needed a file format to keep all things neat and organised.

The difference between Custom Names & Custom Component Names

This one can be a little tricky to grasp. We now support the use of custom names in Stratos. You write them like this /*CustomName*/. Here’s some {Button} components I’m making inside the Stratos demo file:

With /*CustomNames*/ you can create 1000 different button styles if you have that ehm need ??

Since I want to have several different styles of buttons 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.

This is how Styled Components work inside of Stratos — if you don’t give them custom names they all will be overwritten by one of them. In a way this is brilliant since you’ll very quickly notice something is very wrong.

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 Custom Components. They can be called anything you want as long as it makes sense to you. Also you’re dealing with real code here, don’t use special characters, keep it simple, keep it in English and you’ll be fine as wine. ?

Let’s create a Custom React Component! ?

One of the hardest things with Stratos is trying to explain what you can do with it and what you can’t. There’s so many things you can do — where to start? Let’s do the basics first!

Very soon you will begin creating your own custom React components. These can be our own simple core components mixed together with something like Framer Motion, a fantastic open source animation library for React, by the great people behind Framer.

{Animate} this!

The component above, {Animate} is made of a couple of things, let’s break it down so that you can see actually how it’s made.

In Sketch

  1. Add some vector graphics and Make Exportable — Choose SVG
  2. Group that vector group/layer, in our case it’s called StratosIconSymbol, the name does not matter, just make sure not to use special characters, stick to English and you’ll be fine
  3. Name that group anything that makes sense, we called ours {Animate}
  4. We also added a {Background} component with a nice gradient, totally unnecessary but nicer to look at ?

This custom component {Animate} adds some sweet Framer Motion animation to the layers inside it

In Stratos

First of all since we’re going to be using Framer Motion make sure to have it installed inside your Stratos project folder. Here’s Fredrik showing you how:

Quick Install of Framer Motion in your Stratos project folder:

npm install framer-motion
  1. Go to the Explorer
  2. Navigate to react/src/components/custom
  3. Right-click just above the word custom and choose Create new file

1. Create new file

In our case we called our new component Animate.js

From Stratos Explorer you can:

  • Create files
  • Rename files

You can create new files straight inside our Explorer — This is Animate.js

Here’s a closer look at the animation code for Animate.js

What are those auto-generated test#.txt files anyway?

First of all, they will soon be removed in an update. 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’re just empty text files with nonsense text in them.

We promise — you will love this feature the more you use it — NPM projects rock ?

How to export to NPM projects

  1. Go to Download
  2. Open up NPM Project and hit that fine big button
  3. Save it somewhere, I created a folder called export inside my Stratos project folder

This is what gets exported in may case

4. Open up the package.json file in (for example) Visual Studio Code

5. You need to give your NPM upload a name or no one will be able to install it on the developer part of thingies in your life-work-team-stuffs

6. Upload to your desired source of NPM packages. We’re going to do a tutorial further down the road where we show you all the steps…

Give your exported NPM package a name so that your developers know what to look for

The file path bug

This may happen to you sometime down the road:

  1. You create a Stratos project on a shared server (iCloud, Dropbox etc)
  2. You switch computers and re-open the very same .stratosproject file
  3. Nothing happens, you just see our loading logo animation

Possible solution

  1. Open up the .stratosproject file in a text/code editor
  2. Change the file path to the new directory, you may not have moved anything inside your shared drive but you have switched computers ?
  3. You obtain the file path by dragging the entire project folder onto the Terminal app, as explained in our fine Sketch2React Pocket Guide

That’s it! We’ve created a specific #stratos channel on our public Slack, just join to talk all things Stratos with us ??‍???‍?…

All the best
Juan & Fredrik, Team Sketch2React


Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *