Wow, it’s been a minute. Cut the crap Juan and get to it, no one cares what you have been up too until this very moment. Sure, sure, my young Padawan’s.

After what seems like forever, we finally have a working beta version of the next version of Sketch2React in the pipeline. This time, it’s a bit different. The version you are about to try out will only be available via Apple App Store, something we have dreamed about for a very long time. Sketch2React has been rebuilt from the ground up in Xcode and you are invited to give it a go. Lucky you, right?

What are you waiting for? Jump right in, guys. Wait, you want to know what’s new in this version?

Let’s go through all that is new, shall we?

• Our React export has been rewritten from scratch
• Our React export has built in Storybook
• We also export as SASS
• Our app is now macOS native, so we reduced the app file size about 10 times, huzzah!
• Full support for our awesome free Sketch plugins

All you have to do is press this link, and you are in. So easy makes me cry happy tears of joy.

Try out the next version of Sketch2React was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

We, at Team Sketch2React, have created a design API that share the same design token engine, The Tropos Engine, as our popular Stratos Tokens App.

The design token engine is the core part of Stratos Tokens App that handles the extraction of design token data from your design documents.

Patience… the examples are further down in this article. You will not leave empty-handed ✨

We have been thinking for a long time about how we could somehow make the Tropos Engine stand-alone. Then it dawned on us! Let’s wrap the engine in a design API.

Because if we could make the design token engine stand-alone we could use it to add design token management to our automated workflows.

And if we could, then we guessed others would like to as well, given the opportunity.

This API is what we call the Design Tokens Extractor for Figma!

It became a design API that is universally compatible with all design token setups — Wether it’s your own structure or “standards” like MaterialUI theming, CSS-in-JS (like styled-components), Style Dictionary or Theo.

The Pros

Documentation

Since our design API is based on the same core functionality as the Stratos Tokens App every document, demo and tutorial made for Stratos Tokens App is applicable to our design api(!).

A great place to start is here:

The basics 🔤

No transformation, only extraction

Since our API “only” acts as a middle-man, extracting and returning what’s already setup in your design document, you get a 1:1 representation between you design document structure and the json data response from the tokens extractor api.

Then it’s up to you how you use that data. Maybe as input to Style Dictionary or as a theme for Material UI. Or if styled-components is more of your style. Go nuts! The sky and your imagination are the limits.

Build your own design token UI(!)

You could even go as far as to use our design API to build your own design tokens visualization.

It is freemium

You can try it out for free!

The Cons

Two step process

Since you only add Figma access token and document id to the API request, the request to retrieve your Figma document data is done by the design token extractor API before the design tokens can be extracted. This give additional latency since it’s actually a two-step process behind the scenes.

Great news!

We’ve actually solved that problem for you by adding the possibility to pass design data as an extra request parameter. This makes it possible for you to call Figma’s API and then, as a second step, use that data as payload for the request to the tokens extractor API.

Enough talking, show me the examples already!

Basic example

Advanced example

In this example we’re calling the Figma API locally and, as a second step, we call the design API. (I don’t know why I use both axios and fetch… I was probably very tired).

YouTube example

Listen to Juan from Team Sketch2React as he gives you an introduction to our API.

Implementing the design API in your own project

There are multiple ways you could implement our design API in your project.

You could for example add design token synchronization to your package.json by doing these two steps:

1. Create a file such as the one shown in the previous section and give it a nice name e.g. design-token-sync.js. (This file calls The Design Tokens Extractor for Figma API and processes the response design token data)
2. Add a new script to your package.json

“sync-design-tokens”: “node sync-design-tokens.js”

And there you go!

Integrate The Design Tokens Extractor for Figma API into an Azure pipeline

Since Azure pipelines has support for running npm commands you could add design token management as a task in your Azure pipeline. More documentation about how to add npm commands in Azure pipelines can be found here.

Demo files to get you started

Basic Design Token demo

Stratos Quick Start Guide which you can Download for free here.

MaterialUI Theming

Material UI Design Tokens Demo which you can Download for free here.

Style Dictionary input format

Styling React Demo which you can Download for free here.

All downloadable documents are in Sketch-format, but you can easily import them into Figma.

Further reading and watching

Written goodies about Stratos Tokens

• Welcome to Stratos Tokens 🏡
• Styling React Components Using Stratos Design Tokens
• How to combine Design Tokens, defined in your design tool, with Material-UI using Stratos Tokens…
• From Design tool to Design Tokens using Stratos App

YouTube playlist

A playlist containing all of our video tutorials about Stratos Tokens.

Summary

With The Design Tokens Extractor for Figma API you can extract design token data from your Figma design documents. The API is a wrapper for the Tropos engine. The Tropos Engine also powers our Stratos Tokens App.

The easiest way to test the Design Token Extractor API is at RadpidAPI. There you can test the API from within your browser.

And best of all — It’s freemium! So get started today!

Thanks for reading!

Fredrik

Team Sketch2React

Managing Design Tokens with The Design Tokens Extractor for Figma API was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

This is part 4 in my series on How to use React in your Sketch plugin.

In this article we will take a closer look at the initial data load problem. It’s the problem that ad-hoc causes the React UI to render without Sketch data the first time you open your plug-in window.

I will also give you a solution to this problem.

Before we start

I’ll be using my plug-in project from my previous tutorial as a boilerplate.

If you haven’t read my previous articles in this series I strongly suggest that you do. This article will make a lot more sense if you read those first.

TLDR; There’s a complete demo repository at the end of this article.

Please note that the plug-in only responds to layers not pages. If you start the plug-in with a page selected, it will render without Sketch data. (It’s a good exercise for you to change this in your own version of this plug-in 😎👍)

The three parts of a plug-in with a React UI

A Sketch plug-in using a React UI can be divided into three parts:

The front-end

This is basically a web browser (including DevTools). It’s a WebView and its API is mimicking Electron’s BrowserWindow API.

The WebView floats, in a separate window, on top of the Sketch UI.

The WebView exchanges information with the back-end using a combination of window.postMessage (sending data) and event listeners (retrieving data)

The React UI

It’s in the WebView we load and show our React UI much like we would run a normal React app in a regular web browser.

The back-end

This is the part of the plug-in that has the connection to the data in your Sketch document. The back-end uses the Sketch developer API.

The back-end exchanges information with the front-end by event listers on the webContents object.

The problem with initial data load

Initial data load is the data that is sent from the back-end to the React UI once the WebView (front-end) has finished loading.

The problem with sending data to early

During my plug-in development I realized that, from time to time, when I started my plug-in the React UI didn’t receive any Sketch data?

I tried to figure out what was going wrong and I ended up explained to my self, step-by-step, what is happening when the plug-in starts.

What happens when the plug-in starts?

1. The back-end opens a WebView (front-end) and awaits the event did-finish-load to be emitted from the WebView
2. The front-end encounters JavaScript code that loads the React UI
3. The React UI listens to the event send-data
4. The front-end emits the event did-finish-load telling the back-end that everything has finished loading.
5. The back-end recognizes the event (did-finish-load) and sends data using the event send-data
6. The React UI recognizes the event (send-data) and populates the UI with the event’s data.

The problem

I thought that this happened synchronously, but it turned out that was not always the case. Sometimes step 4 happens before step 3 which leads to a scenario where the back-end sends data before the React UI is ready.

This leads to the React UI not being populated with any Sketch data.

The solution

We reverse the data exchange.

Instead of the back-end listening and responding to the event did-finish-load we tell the React UI to request data once it is ready.

This requires some modifications to our code:

my-command.js

In contrast to the event did-finish-load the get-data event is not triggered automatically by the WebView. The get-data event only triggers once called upon.

useSketchData.js

We add a refreshSketchData function to our React hook that triggers the back-end get-data event listener. This makes the plug-in back-end reply with Sketch data using the send-data event.

App.jsx

We add a useEffect that triggers once when the React UI is ready to handle Sketch data. In the useEffect we call our newly created function — refreshSketchData.

That’s it! 🎉 Now we have reversed the initial data load and by doing so we have prevented our React UI to render without Sketch data.

You can find a complete demo repository here.

For a more complex example of what you can build with my tutorials, please check out Sketch2React’s App Builder plug-in. It’s build on top of one of my tutorial repositories(!)

Thanks for reading!

/Fredrik

Team Sketch2React/Marcode/Stratos Tokens

How to use React in your Sketch plugin — The Problem with Initial Data Load was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

Since the release of our new Sketch plugin for Marcode, App Builder, it has never ever been easier to build real code prototypes, or simple apps, straight from inside Sketch app.

Let me show you how easy it is to add a custom CSS animation using our CSS Writer plugin for Sketch combined with App Builder.

Let’s go!

1. Find a nice animation library, we’re going to use this one today.
2. Find a enjoyable animation, I’m really fond of the Blur animations.

1. Try out the animations by pressing the Play button on each one. You can also change the duration. When you found one you like, just copy the code to clipboard.

1. Open Sketch and our CSS Writer plugin.
2. Select the artboard you want to add your animation, we choose Start.
3. Paste the animation into CSS Writer and make sure to Save inside the plugin, that big blue button needs to be pressed or nothing will get added.

1. Select the component you would like to add your CSS animation into. Open App Builder plugin and add blur-in to the CSS Classnames field.

1. Open up Marcode and link to the very same Sketch file you are building with. A rapid way of reloading the animations is to switch between the Design and HTML view icons up in the top-right corner of Marcode.
2. Voilà, you are done!

Marcode for Mac bundle

Now that you have learned how easy it is to use our new plugins for Marcode and Sketch, we have a very nice bundle where you get CSS Writer 100% for free.

Neato.

How to add CSS animations with CSS Writer was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

We get it. You don’t have so much time sweating your day-to-day job as a hardworking designer, with whatever suffix or prefix you prefer. Let’s play pretend here and say that you actually, for once, have enough time on your hands to build something that is more than opening up another tab inside your design app.

Foremost, why do I need an HTML prototype?

Before doing anything, it’s always a great idea to ask ”why the frakk do I even need to do this?”… I always ask that question myself.

Top of mind, here are a few examples when I go down the code way:

Figma, Sketch, or anything else just don’t make the cut

All great design tools out there have prototyping functionality. Sometimes though, depending on what you are designing, they do not make the cut.

Online instability is a fact

Anyone who has done user testing with Figma know just how unstable they can be. Online services go down, and all of a sudden, you start thinking about things like stability and if it’s actually a great idea to have your entire design team be in the hands of the Internet Gods… 🤯

Don’t even get me started on security

If you work within banking, health, government, military or just a place that regards its company secrets, well, you are, again, in the hands of powers you just can’t control.

HTML is universal

If you work with teams that build websites, hybrid apps or just about anything else that actually uses HTML code, you will do yourself and your team a great favor.

Not only are you communicating to your developers that you care about code. You actually deliver code. Not everything of course, but just by showing them that you are interested in the very foundation of what your team is building, well, that can’t be bad, right?

Over the odd 15 years that I have been working solely with design and development, I have not once come upon one single developer who has said ”Juan, I really don’t like that you are so interested in code”…

Design with code constraints

Every single designer out there that has some kind of real-world experience will agree that if you know the limits of the materials you build with, you will excel once taking design decisions.

It’s like being a landscape architect without the proper knowledge of the limits the building blocks of whatever you are designing has. That’s why every single good architectural school has classes covering everything one might need when working in the real world.

Design schools should focus less on team building activities and more on giving the students at least an introduction to code. All that team building nonsense is something that you anyway get forced down your throat when you start working.

It’s so much fun!

Once you start building HTML prototypes, you realize a couple of things:

• HTML is very flexible, you can get away with anything really
• CSS is mighty fun and makes total sense for designers
• Javascript is that weird thing that makes more complex stuff, don’t even bother at first

Best thing, you don’t need to learn code actually

Here’s the best part. Marcode autogenerates all the relevant HTML, CSS and Javascript for you.

You already are a master of visual goodness, and the steps going out to real code are fewer than you might think. Best of all, you do everything inside either Sketch or Icons8 Lunacy. How about that?

Sketcher’s rejoice

If you are using Sketch as your main design tool, you are in for a ride. After 4+ years, we have finally a plugin that actually does all the marking up for you. See even if Marcode is just a few months old, it uses the same Atomic CSS Markup Language we have been using in Sketch2React from the very beginning, early 2018.

Our spanking new Sketch plugin App Builder is free, works like magic with Marcode, and we will make sure it does the same with future versions of Sketch2React.

It has never been easier.

Marcode is affordable

You don’t need to be Einstein to realize that we are, if not already, in economic recession. Worldwide inflation, prices going up, salaries not so much. Without naming the competition, since you probably already have a perfect clue, paying once for software is something not many companies of ”no code tools” offer.

That’s why I always, more than happily, push other tools, that do what we do. Keyshape app is one.

It has gotten to a point where you, in your designer role, will need to step up your game to be relevant and keep your job. It’s clear as a sunny day to me, if you offer more than your competition, you will get more work. On the other hand, this should always be your default mindset.

Go and learn something new now!

Why you should build HTML prototypes was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hey guys! This time we are going to show you how simple it is to:

1. Import SVG graphics into Keyshape app
2. Do a simple vector animation
3. Export from Keyshape as a SVG CSS animation
4. Add to to code, via Icons8 Lunacy, out to our app Marcode

Well, let’s go! 🚀

Video tutorial 📼

Tutorial — From Keyshape to Marcode via Icons8 Lunacy was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

No, this is not an article about that horrendous thing called S.A.F.E, don’t run, this is actually fun and useful 💪

Being a designer today is wonderful in, so many ways, compared with when I started out over 25 years ago. One thing that’s not that great is the ever-growing stress companies and organizations feel about safety regarding their intellectual property, you know, that ”stuff” you create day in and day out?

Utter the words ”cloud” and ”files” in the same sentence, and you will be invited to a crappy🕺 that will never, ever end ☠️

Don’t get me wrong, I love the internet, and being able to upload anything from weird beats to apocalyptic 80s nostalgia GIFs makes me happy and peppy.

I’m not talking about myself right now, I’m talking about you.

Keep it simple, share locally

Let’s look at the current workflow of sharing an HTML prototype built with Marcode in Sketch 💎 or Icons8 Lunacy 🌜👇

1. You build everything inside above-mentioned graphical loveliness
2. You view, in near real-time, in the best companion app available on Planet Earth. What is available on other planets we do not know.
3. When you are happy, like on pay-day, you Export 👉 HTML
4. Your work is done amigo or amigas
5. Zip the HTML folder we so graciously autogenerated for you and share it on Slack, Teams, Trello, DropBox, OneCloud (company licenses of course) or whatever else service that took forever to get clearance for. Heck, you could smack the folder onto a USB stick if you work for really paranoid entities

Onboarding the consumers of your prototype

1. They need to know how to double-click on a zipped file
2. They need to know how to double-click on one file (index.html)
3. They must have a web browser installed
4. They are of course already disconnected from the evil web 🧿

Did I get through? Are there 👽’s among us? You can ask your B.O.S.S.

Who cares really. I’m having fun!

🎤 👋 Juan over and out

Keep it safe, share locally was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

When you have large background images, they usually take a little while loading into app memory. This is not only irritating, it also messes with the overall user experience of your prototype.

Luckily, there’s a straightforward fix. In this video tutorial, I show you:

• How to use Animate.css on background containers
• How to update the HTML in Capacitor, via Visual Studio Code
• How to update dependencies in Xcode after you have run the npx cap sync command
• A brief introduction on how to upload your prototypes to your Apple App Store Connect account for use with TestFlight app

Onwards designernauts, the future is bright!

Tutorial — Adding smooth page transitions was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

One of the main reasons we built in support for Ionic’s Capacitor.js build system is that the second we really tried it out, the whole flow going from our exported HTML out to Xcode and Android Studio, it blew our minds right open.

Personally, I had given up trying to learn Xcode a long time ago, since I didn’t have the need to actually build real apps. I have always loved building prototypes, though. Suddenly, I had all the right tools in front of me. Not only that, given to me at the perfect level of complexity.

I love designing in Sketch. I know our markup from the inside out. Furthermore, I have dabbled with CSS. Xcode was not a total mystery, either. I had opened it like once our twice. What a victory.

The only thing that felt a bit weird was actually installing the necessary tools that Capacitor uses to do its dark magic.

You’re in luck, my friend

I have done the hard work for you, failed miserably a couple of times (a must) to carve out the very best workflow for you.

Remember, these are one time installations only and the two most important things you need to have are:

• Admin rights to your computer machine
• A bit of patience

You will need

• Terminal app on Mac or the Prompt/Terminal app for Windows
• Node.js installed since many of the tools use node

We have a great guide with all the relevant links for getting started taking your designed prototypes to the next, codelicous level (lame, I know).

The tutorial

Til next time, have a good one

One time installations for getting out to Xcode and Android Studio was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.

Great news, we just released Marcode for Windows! You know, it’s not our first journey into offering our apps on both Mac and Windows, but it somehow feels like that. Stratos Tokens is also cross-platform, but with Marcode we are going to try out something new.

We think you either are designing on Windows or a Mac if Marcode is something that excites you. The only way of actually knowing, since we never ever track usage of our apps, is to separate them as different products, and just sit back and see what happens.

We’re also going to experiment with releasing Marcode on the Windows Store, which will be the first time ever we release any of our products on a mayor external marketplace. Exiting times ahead, folks.

The best companion app for Icons8 Lunacy on Windows. Period.

We can’t think of a better companion app for Icons8 Lunacy than Marcode. It expands what you can do with a design app so many times we lost count by now.

Wouldn’t it be really cool to start a cross-platform app project straight from the visual marvel that Icons8 Lunacy is, with a plethora of free design assets at your fingertips?

Now, one important thing about using Marcode for Windows is that since it’s not Sketch app, we handle some things differently. We just released a new guide on our doc’s website pointing on the differences and also how to solve them.

Let’s celebrate this release with a discount

We should celebrate things more in life, the small and the bigger wins. For Team Sketch2React to finally have shipped Marcode for Windows is an epic feat. Here’s a nice 24% discount (since we released it yesterday, the 24th of May) on Marcode for Windows:

HOLAWINDOWS

Just apply it upon checkout and do some happy dance moves.

That’s it for this time, have a great week

Hola Windows, hello cross-platform! was originally published in Sketch2React on Medium, where people are continuing the conversation by highlighting and responding to this story.