Skip to content

10 More Great Sketch2React Tips from the Team????‍???‍?

Wooo-pi-do here we go again ?

10 More Great Sketch2React Tips from the Team????‍???‍?

This is Cold Spring 2019 Edition

Hey and welcome to another round of our very best Skech2React Tips from the team. Let’s go people!

The previous one was back in December and the one before that all the way back in time to September 2018.

Pro Tip #1 — Using Sketch Cloud together with Sketch2React

Sketch Cloud is great. It’s included in your Sketch license, it’s becoming better and better with each iteration, and it makes sharing Sketch2React code components really easy.

Limitations to consider

One very important thing to remember: once you have linked/downloaded the Sketch library file and inserted your shared components you will need to unlink them, or they will not work inside our code app. This limitation is due to that we need our components to be inside your Sketch file and not linked to a cloud service.

Pro Tip #2 — Convert your components to symbols

You know, if you use Sketch2React you have probably put in some considerable time crafting your components. We know we do. And it really sucks not using the amazing Symbols system inside of Sketch for saving you eons of time. It really is an amazing feeling to drop real code components (once designed) here and there inside your artboards and seeing them come alive in our code app. We never get tired of this. ? ?

Pro Tip #3 — How to work with icon fonts

Icon fonts are really clever to use together with our framework since it gives you a very fast and flexible way of working with vectors. In fact it’s the only way of working with vector illustrations without the need to convert them into image assets. So go ahead, dooooo it. Here’s a brief tutorial showing you how-to, with in example given Flaticon icons ??✅

Pro Tip #4 — Work with CSS plugins

Do not miss the spellbinding mix of Sketch layers and applying CSS plugins to them. ? Once you start you just can’t stop. We have a brand new freebie that will jumpstart you using the amazing Animate.css library of “just add water” animations.

Click here for direct download of our latest freebie

Pro Tip #5 — Use {group} and {group-fixed} for amazing responsive card making

Our most advanced layout component is without any doubt {group} and {group-fixed}. Needs to be seen in action to be believed. It makes creating superb responsive card elements a breeze.

Pro Tip #6 — Image Overrides in Sketch2React symbols now work again ? ?

Early in our alpha this worked fine. Then somehow it stopped working. Then it started working again. We are not sure when but I tested this in the very latest version of Sketch 54 and it works really well. It makes the whole process of creating reusable components that include images so much easier.

Well done Bohemian Coding, whatever you did, works ??

Pro Tip #7 — Compress your images

You know how it goes. You just design along not worrying about things like image compression, how large images are on your artboard etc. Actually you can do all of that worrying when your done ✅

Even if you’re just building a real code proto you want your prototype to feel snappy and fast, don’t you?

Pro Tip #8 – Use semi transparent images together with our {BG} component

A very effective way of getting really interesting imagery effects is to have a {image} on top of a {BG} component and use a bit of transparency on the image. Experiment also with blend modes to get really far out results.

Pro Tip #9 — Use Anima Stacks to keep things 1:1

Use Anima Stacks to keep things 1:1 between how things look inside of Sketch and how they actually look in code. Important: This is merely cosmetics for Sketch you still need to match your Stacks settings to those you write with real code (padding, margins, classes etc).

Pro Tip #10 — Experiment with Bootstrap Classes

Since we run Bootstrap 4 in the background we support way more things than the components that we support styling inside of Sketch. Need a vertical nav menu? Just add [flex-column] to the {nav} as a class. Do you need a tabbed interface? Just add [nav-tabs] to the {nav-item} and your done!

Bonus Beats!

Here’s an extra tip for you ? ?

Pro Tip #11 — How to add Adobe Typekit fonts

Adobe Typekit is a wonderful resource of fonts if you also have an Adobe CC license. You embed the fonts very similar to how you embed Google Fonts.

That’s it folks, have a great easter! Eat many eggs, hunt for easter candy eggs with your kids and have a great one ?

Juan, Team Sketch2React & Designforventures

Leave a Reply

Your email address will not be published. Required fields are marked *