In this tutorial you will learn:

• What Style Dictionary is
• How to structure things in Sketch or Figma for it to work its magic of translation via Stratos Tokens and out to iOS, Android and SCSS
• How to install Style Dictionary into your Stratos Tokens project folder
• How to run and update your design tokens

If you’re just sitting there with a big❓read this article first 👇

Tutorial requirements

• Stratos Tokens 2021 for Mac or PC (download our free demo)
• A Sketch file, you can use this one
• Node.js
• Sketch app (only if you want to add/change design tokens)

Remember when version tracking was perplexing to us designers? Then came Abstract, Plant, and other great apps & services that solved that issue in a way that mere normal humans without engineering degrees would actually understand how it worked. Hang on to this reasoning.

Understanding how design tokens work, how you can create them and how they will transform and impact your teams workflow is the next big thing as we in Team Sketch2React see it.

Today we’re very proud to launch the brand new, totally reworked Stratos Tokens 2021 to the world. After more than one year in development…

I hadn’t actually planned to make a part two of my tutorial on how to go from Sketch, via Sketch2React to Xcode.

Then I got this really neat tip from our friendly Slack community short after publishing it:

Thanks Fransesco. I'm totally obsessed with doing things smarter, I think that's why I never stop thinking about new ways, new shortcuts to do more with the tools I have at my reach.

What if you could go from Sketch to iOS & Android without writing a single line of code? Actually, you can. 🥳 Just check out the video below first, seeing is believing my friends. 😺👇

From the very start of Sketch2React one question keeps popping up from time to time:

” Can I build apps for Android and iOS with Sketch2React? ”

The answer from us have always been nope or depends on how deep you want to dig friend, anything is possible, of course…

Until the other day when I discovered something called Apache Cordova.

Say that you suddenly need to make a loading animation for the app you’re making. Instead of spending hours and hours perfecting it I would do this instead:

• Browse around a while for inspiration on Lottiefiles.com
• Find something that works, then download the JSON file
• Side note 👉 🗒️ Make sure you download the Keyshape Lottie plugin, or you will not be able to import or export animations using the Lottie file format
• Jump into Keyshape, choose Open and if you’re lucky, the animation looks like the one on the website
• Use Paste Shape to replace the graphics with your…

Hey guys! In my experience it very often comes downs to really understanding the core concepts about any new software before you even consider start using it. In a world of distractions I can’t really say we’re the easiest one to grasp. 🤣

In the case of Sketch2React understanding how the grid works is essential knowledge. As soon as you create a {container} you are inside the default Bootstrap grid that we have built-in.

ProTip 🤖 💪 You can use any grid system of your liking using our {div} component. …

Hey guys! Before taking some well-deserved vacation we thought it would be nice to do one more update before the end of this very strange and particular year. So, here’s what’s new in Sketch2React 2020.1.5:

• Dark mode for all those late night Sketch2React sessions☀️🌛
• Simulators to quickly try out the different breakpoints in your design🤖 💪