Sketch2React
Published in

Sketch2React

An ode to markup

Or why the heck do we use it anyway?

This article is many things. A love letter to markup. An insight into how it is to develop for apps you have zero control over. Also very strange fairytale.

If you have been using Sketch2React for a while you probably thought to yourself at least one time ”man I love this but the markup, the markup suuuuuucks” … 😆 👍

It’s only natural. I’ve been there. Can’t speak for the entire world of designers but before Sketch2React I mostly spent my time drawing things. Like shapes you know. The only time I used the text tool was when I added typography to accompany my sweet shapes. Every time I came upon a plugin or similar that required me to manually input text I was like ”Whaaaattttt? Really? Boooooring”. Oh how ignorant I was.

It was actually SVG’s that got me into code. You can read about my journey here if you’re into origin stories.

When writing this very same article, in my favourite writing app Ulysses, I use markup. When you get use to writing markup you become blazing fast. 🚀

🤖 ProTip! 👉 Use amazing apps like SnippetsLab or Rocket to auto-insert all those sweet S2R/Stratos markup rules and you become even faster.

The Super Power of the Text Tool

This ”constraint” is actually one of our super powers. We use markup to expand what can be done directly from within Sketch (and later Figma). Frankly none of these fine design apps where ever built to do what we are able to pull off with Stratos or Sketch2React.

Your Super Best Friend. Really.

So actually the Text Tool in Sketch is your very best friend. What else is done with text? Code of course. 💪 🤖

A great habit is born

What happens when you write a lot? You create a great habit, that then makes it much easier writing your own code. Copy+pasting from Google also works 👍🤖

In the beginning I was terrified of changing one single word or character in code. Because I didn’t understand it.

We fear what we don’t understand.

Now, since working with Sketch2React for almost 2 years I have:

  • Learned about code structure
  • Learned CSS & how to animate it
  • Learned much more HTML than ever before
  • A tiny amount of React, more now with Stratos
  • Understanding of node.js and how to install NPM packages

All of this while having huge amounts of fun straight from inside Sketch app. If someone had told me this 2 years ago I would have laughed that person right in the face. Honestly 😆

A great learning tool becoming even greater

So it turns out Sketch2React & Stratos is a great learning tool, nothing we set it out to be — it just happens accidentally. By studying the code that we output you learn a great amount actually.

A deliberate design decision

From the very beginning we made a design decision — we will not build an overcomplicated plugin that breaks with every update the Gods of Sketch do.

I was very tempted to push Fredrik onto the dark plugin zone. Oh yes I was. ”There’s a plugin for everything”, that kind of thinking. Very normal to a plugin-junkie like myself. Don’t get me wrong, I ❤️ plugins but it makes no sense building one as complex as ours.

By the way, I’m doing much better now, I have reduced my plugin addiction to just a few ones. Honestly 😄 🌵

But you have a plugin — ha!

Yes we have one, but it’s super simple and you don’t even need it. Markup Super Powers you know. Maybe we’ll update it to work with Stratos, maybe we wont. We rather put our time into things like working out how to also add support for things like React Native.

See, when you step outside the limitations of the app framework (Sketch & Figma) you can go totally bananas. 🍌

Fun fact

The old plugin has actually worked in its current version for a very long time now, it’s over 1 year old. In Sketch-years that’s like an eternity. Sketch has updated so many times the last 1 1/2 years we have stopped counting, we have better things to do in our lives actually. 😺 🌵

The Gods of Sketch

But do things never break, even without plugins? Of course they do. When the Gods of Sketch change things in the very DNA of how the app is built and organised, things can start look wonky and funky. We think that’s a small price to be payed for what we do. We read the design file in real-time, it’s linked to our app and it’s a matter of balancing the good with the bad.

Disclaimer Text: All similarities with reality are purely intentional

Once upon a time…

… a couple of versions ago, in a digital merry land called Sketch Land, the Gods themselves decided to spice things up.

— Let’s change how we organise things, we can do this better mu-ha-ha 🌋

In a very small but upcoming country called Team Sketch2React (really odd name for a country) the folks there trembled and panicked. 😫

Actually only two people lived there, Fredrik the Dark Magician and Juan the Master of Shapes, so lets downgrade it to a very small town instead. Done.

One early morning Juan the Master of Shapes opened up his Dark Materials Enabler and cried out in despair:

Whaaaaaat in the name of hairy wizards has happened to all the fills on all of my beautiful designs — my shapes look like crap in code 💩Oh my God oh my God ooooh my God!

– They all have magically been transformed into ugly swearing trolls! 👺

Fredrik the Dark Magician, the ever so patient one, was working on some new radical spells when he got disturbed in his deep work thinkings. As usual it was Juan.

– What do you want? I’m busy, said Fredrik in a very calm but slightly irritaded tone.

– Did you read the latest scroll newsletter? Juan was very agitated.

– The Gods themselves have started changing things. Again. As usual they come up with really great excuses, better workflow bla bla, enhancements bla bla bla. Why why? It was working so great, why change something that works?

– It must be that they feel pressure from those other Gods, the radical ones across The Great Sea, the ones from Figmatica. They also recently came upon a huge amount of gold that where donated from a very wealthy Witch of the North. Even Gods have pressure & ambitions you know, said Fredrik and went about his business.

– Crap… Yeah I guess, said Juan and gave up working for the day. He instead went to his favourite coffee taverna and ordered a way to expensive Messpresso CappuAncient from the smirky il Maestro il Baro.

☕️ 😧

Conclusion

So to wrap up this partially confusing article, that first started as a love letter to markup and ended up in a total mess, let’s just end this with one great quote:

Juan, Team Sketch2React

--

--

--

The best source of Sketch2React & Stratos Tokens related articles on Earth 🌎

Recommended from Medium

SumTypes.jl: Enum Type System In Julia

How To Use the FlatList Component in React Native

Taking A Step Back From JavaScript Hype To Understand Scope Resolution in ES6

Odd-data Ecosystem Update — And Still Big Plans

On-Demand Doctor App Development: Benefits, Features, Cost, and a Lot More

Remix — Traditional Web Standards For ClientSide Developers

Simulating Haskell’s do notation in Typescript

5 facts about Node JS #shorts

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
Juan Maguid

Juan Maguid

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

More from Medium

Dream Stealers

Curating UX London 2022

Celebrating Women’s History Month: Nhu, Maren & Maria

Supafast⚡ Book Review — Creative Confidence by Tom & David Kelley