Lets dive deep into Sketch2React 1.6+ ? ?

Lets celebrate by giving you a deep dive into all the new things that we have right now, in version 1.6.7 (early access). And a nice discount code on the bottom of this article.

We now have support for Sketch v59 ?

First time I wrote this article we still had a small issue with version 58 of Sketch. We smashed that ?and nice surprise to us — it also works great with the brand new, v59! ??✅

This update makes it even easier to have 1:1 between Sketch and code with the new amazing feature Smart Layout that works really well together with our framework. Since our components have been responsive from the very beginning you now (if you create S2R code components with Smart Layout enabled) get an even faster workflow. Joooooy ?

Check out our S2RShared Library Demo Docs 58 with a few Smart Layout enabled components:

https://sketch.cloud/s/gEvOd

And as always, a release this big deserves a new trailer ?

You know, it can be really hard keeping track of things. There are so much awesome things being released each and every day (damn you Product Hunt), no wonder you can feel a bit out of the loop. I love this article about how Basecamp has grown to a very big business over time, like an eternity in internet years. I specially love this quote:

”Grow slowly or not at all.”

https://tenor.com/T0XK.gif

From the very beginning we have shipped, small small updates, sometimes huge ones. But we have continued. Slowly.

From the very start Sketch2React looked and behaved very different from where we are today. Heck it took us almost 1 year to get React support. Yet we continued. Slooooooowly.

We opened up the door and said ”hey guys, we’re doing something a bit odd here, what do you think about it?”.

Over 50% of what our framework and code app is today are features that we’ve added after getting feedback. We have showed this on meet-ups, closed big company board rooms but mostly over the internet, specially Sketch App Sources has been a great place ?. All of you who have contributed are heroes in our eyes. ?‍♀ ??‍♂️

https://tenor.com/EYSc.gif

The Big Four

Enough chitchat, here’s the biggest four new features in v1.6+ ?

Nr 1 — Support for Sketch Shared Libraries ?

This one alone is so huge I can’t even describe it in accurate wording. We are ahead of our time and people have not yet fully understood the implication of this feature.

Let’s try. ? ☮️

You now can today right from inside Sketch, without any plugins build, maintain and distribute a full fledged Design System (with real code components)…

https://tenor.com/3p2e.gif

Real code.

Distributed via Sketch Cloud or whatever other cloud service you may use. You get 1:1 design to code. Will it take you time to build? Of course it will. But you’re a designer, you’re used to building stuff and rebuilding over and over again. ❤️ ?

Thing is, once you have built and designed your component (inside of Sketch) you convert it into a Sketch Symbol and share it everywhere you need.

Your own documents, with your team, or why not build up a real design to code design system for a client of yours?

You change your Sketch Shared Library in one place and all others using the very same library will get notified and just re-update. ?It even auto-updates inside our code app if you happen to have a code Sketch document open at the same time.

We know this way of working is really cutting edge and new, but in a few years (maybe less) with think everyone will be doing this. You can quote me on that one. ? ?

Try it out right now ?

Do you already have version 1.6+ because you are an awesome person who already have bought our latest payed DLC? Then here you go, feel free to add our public (still growing and adding thingies) Shared Lib right now.

We will keep adding components ?- our goal is to add all of the ones, slightly rebranded, that we have in most of our free demo documents.

Nr 2 — Support for Sketch Cloud Documents

Sketch Cloud Documents is still in beta but we have already built-in support for it. ?Both these features opens up amazing new super powers for all Sketch users. Bohemian Coding have been very generous with what is included in the single license, you get things like

How to get Sketch Cloud Docs this working on your Mac ?

Sketch Cloud Docs are hidden inside the (by default hidden) Library folder on your Mac. ? You need to do this first of all.

After that, make sure you go to Library/Application Support/com.bohemiancoding.sketch3/CloudDocuments and save this shortcut to your Favorites (like I have done below).

You’ll find your Sketch Cloud files inside those folders with jibbrish-names on them, lot of numbers and characters. ??Just open up our Code App (version 1.6 pre-release) and you’re good to go, now every time you make changes inside this document (which is a cloud doc) they will upload to Sketch Cloud. Understand that this feature is still in beta and it sometimes can take a while for the docs to upload to Sketch Cloud.

The files are in the folder named CloudDocuments ??

Nr 3 — Three new amazing components ?

You might be thinking ”okey this is all cool and well and stuff but I need more components dude, where are does drop-downs bro?” or ”Man I think Bootstrap feels really old, I want to use Material Design UI & Grids instead”. Yes we here you.?

? Enter the mind-blowing {div} component

Feel like overriding Bootstraps grid? Just use Material Design UI ?

Instead of {container} you do this:
{div} [mui-container]

Instead of {row} you do this:
{div} [mui-row]

Instead of {col} you do this:
{div} [mui-col]

Easy peasy! ??

Example structure for setting up the Material Design Grid

Download above demo document to try it our right now.

Here’s Fredrik explaining this a bit more

Build your own components

Just drag your developer in front of your computer screen and scream ”wtf man I can create anything I want with this new {div} component!” With just a bit of code knowledge, using your own CSS plugins you can build anything.

Important side

We support styling all of our own components directly from within Sketch. With the {div} component you will need to add the styling outside of Sketch in your CSS files. Or use something like the above mentioned Material Design UI.

Nr 4 — CSS Modules & much cleaner code export ?

We live and die with our code export so we care very much about it. Here’s some loving coming our way.

? ? CSS-modules

Our React export now utilizes CSS-modules. This means the dependency on Sketch2React’s package (@sketch2react/react-components) is gone! No dependency on us once your React code is exported! ?

? ? Updated React export’s dependencies

We’ve updated the React export’s dependencies to remove package vulnerabilities.

? ? Clean-up in the React export

You no longer get warnings about “unused variables” in the console because, guess what, there are none! ?

We ? Sketch App Sources

Since the very beginning of Sketch2React, this very place you’re reading this very article has been very very good to us. We want to give something back to all readers of this amazing publication. So here you go dear reader, here’s a 35% discount code. It’s nice to give back. ?