Figma fans rejoice! When we released the rebuilt from scratch Stratos Tokens 2021, we promised to bring ”back” Figma support. Back because we had it in the pre-release version of our design token companion app.

The cool thing about this update is that we now, for the first time also offer Windows users the whole workflow going from Figma out to code.

Finally after much hard work the last couple of months we are very proud to announce the release of the brand new Sketch2React 2020 😺 🙌 That also marks the release of our own marketplace, something that we have only dreamt about in the past. Owning the whole chain of software 👉 customer gives us room to grow, try things, experiment and most importantly, have one channel for delivery of all our apps, templates and other goodies.

New in Sketch2React 2020 🎁

What better time of the year to learn something brand new than during vacation? When else would you actually have the calm in your mind to dig deep into things that may be challenging?

Where in the middle of our lovely Swedish summer right now so what better time for us in Team Sketch2React to take some well deserved time off? It has been an intensive first six months of 2021 for both of us but lets not bore you with petty details.

What you need to know is

  • Our marketplace will still be 100% open of course
  • You can purchase our software anytime you want
  • You can access your already bought software and files anytime you want
  • You can download all of our freebies anytime you want
  • We will not support during our vacation, you can use our very…

In this tutorial I’m going to explore the scenario where you have built something in Sketch with Sketch2React and used our Capacitor 3.0 export for creating iOS projects. In itself really amazing, but you feel you could do more. Always push for more as a designer, right? This is going to be fun!

Requirements ✅

This tutorial presumes a few things:

  1. That you know how to build in Sketch for Sketch2React
  2. That you have Sketch2React 2021
  3. That you have done the prequel tutorial and installed all the nice things you need in this one

Download the Sketch file 💎

One of the most rewarding aspects of running a small, independent software company together with a great friend is that you have so much trust in each other, that more than often things move forward without discussion. We read between the lines.

Take our latest update for Stratos Tokens 2021. We had a plan of course. Then that plan changed, got supercharged and out came this monster of an update without us even realizing it. We sat there in amazement. What have we done?

That is what great product development should always be about, an endless delight in doing better…

We in Team Sketch2React believe in empowering designers with choice, so you will always have the ability to choose for yourself. Basically, it comes down to answering these questions:

  • Do you design for cross-platform products? (iOS, Android, Web, macOS, Windows)
  • Do you use something like Material UI for React? (Web)
  • Do you just want to output raw design tokens (JSON) and let your awesome developers do all the implementation?
  • Do you want to use theming? (JSON)

Thing is, we support all these different scenarios, and they require a different amount of setup and understanding. Let’s take the analogy of game…

A hands-on practical guide on how to get started working with design tokens and Stratos Tokens — the designer’s perspective

In this tutorial we’re going to do something different, we’re going to divided this practical guide into two articles:

  • The designer’s perspective (this one)
  • The developer’s perspective (Fredriks upcoming tutorial)

I’ll be creating the design tokens needed to control the styling that we use in both Sketch2React and Stratos Tokens apps straight from within Sketch. Then later, in part two, Fredrik is going to use these design tokens (autogenerated SCSS from Stratos Tokens) and implement them in code. Fun!

Follow the project

If you’re interested in following our process of building a minimal design system make sure to follow our project on Github…

We have created many tutorials since the very beginning of Team Sketch2React, both written and recorded. Why? Because it’s fun to teach and after a while it becomes a nice giving habit.

I have changed the way I do them, though. The written ones take longer to create, but they have a great benefit, you set the pace, and you don’t need to press the pause button all the time to understand what’s going on 😺

The setup becomes

  • Step by step thorough written tutorials, often quite long
  • Short brief companion video tutorial that shows what’s been told

We think this formula is…

There’s a good reason we in Team Sketch2React love Sketch assistants. It has reduced our time doing really basic support for Sketch2React to a bare minimum. Which is wonderful, that way we can put that time instead on making our apps even better.

Don’t get us wrong, we love supporting our products, and we’ll keep doing that as long as people use our apps and ask us questions. We just don’t want our customers to get stuck on the basic steps for getting everything up and running.

Juan Maguid

Co-founder of Team Sketch2React. Designer that wants to make your maker lives easier😺👍

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store