Sketch2React — 10 Super Tips from the Team💪👨🏻💻 👨🏻💻
Here’s a couple of totally random great tips all things concerning Sketch2React. It’s the things that you normally tweet about but we thought we would gather them here in this article. And actually the best ones comes further down so you’ll need to do the zombie scroll.
WTF is Sketch2React?
Okay so now you know, let’s get cooking shall we? 🍽
Tip 1 — Use Automate Sketch for Reverse Layer Ordering
For our framework to do it’s black magic, layers and groups inside the layer panel in Sketch need to be in the reverse order for them to show up correctly in code (aka our renderer app).
It’s just how Sketch organizes things internally. 💎 Guess they (Bohemian Coding) never thought about the idea of two maniacs converting their core design file format to code this way. Hmm wonder why? 😆
Anyway! We found out about an amazing .sketchplugin called Automate Sketch that does that and many many other things. It’s a really quick way of experimenting with things inside of Sketch.
Tip 2 — The fill bug and how to work around it
Scenario: Sometimes when using for example a {BG} component with a Fill (color or gradient) and you change the fill to something else, a new color for example, the old one comes out in code. WTF. Don’t know why this happens but we found a workaround:
Just deselect the fill, delete it and re-fill your rectangle with a new color — works! Boom 💥
Tip 3 — Use Web2Desk to create S2R desktop apps 🖥
We really enjoy Web2Desk. It let’s you create native desktop apps of your favourite web based-only services or websites. So since our renderer app only exist in the cloud, voila — let’s make it a native app shall we? Since we’re at it, let us also make a desktop app of our fine-as-wine doc portal. 🤯 Boom. Look at how beautiful all of this is:
And if you’re like Juan (totally bonkers about design and stuff👆) here’s a couple of high res Sketch2React logos to use with Web2Desk for that extra yummi deluxe feel.
Tip 4 — The ./ command
Woooooooew. Stop now, the what command? Yup! Since our framework requires you (yes you) to think more like a developer we’re going to give you a very nice tip here. The use of the awesome dot slash command.
Let us explain.
We use this naming convention when linking betweeen artboards in Sketch:
artboard:Artboard Name
But when you have done all of your work and you’re ready to export your designs to HTML (and in a not so far future, React code) you will need to change all of those instances to real hyperlinks.This is one way of doing it:
- Go to your favorite code editor
- Find artboard:Artboard Name (in our example it’s artboard:About me) that we replace with
- ./aboutme.html
- Re-do for all places that contain these links.
Tip 5 — Use responsive media queries
Our Atomic CSS also includes responsive margin- and padding classes. This means that you can have different margins and paddings for different screen sizes. 🧙Really powerful stuff! Not only that, we now support fluid fonts which gives you responsive type really reaaaally fast. Example below is:
🚣🏽{row} [mt32 mb100 mq-xs-pl16 pl50 pr50]
Tip 6 — Use Fluid Fonts!
Speaking of responsive fonts, since the release of Alpha v.055 we now support the super awesomeness that is Fluid Fonts. 👆
Example
- You have a mobile-size artboard (576px wide).
- You have a {text} with font-size 18px.
- You have a {text} with the class js-font-fluid-10 ( {text} [js-font-fluid-10])
The font-size will then flow between 18px at the smallest screen-size and 28px at the largest screen-size.
Tip 7— Use a Markdown editor for text links
Since we right now don’t support the styling of text links directly inside of Sketch (coming of course in a future update) we’ve found a very easy way of doing them that is not in a code editor. By using a markdown editor like Focused! (Juan wants to be able to see what the heck he’s doing, he’s a designer after all, please forgive him 😬).
This way you can quickly and very easy edit your texts and then just copy+paste into the code and the links are all there. Sweeeeeeet as candy 🍩🍪
Tip 8 — Overriding the Bootstrap CSS
You can actually override a lot of things and keep building outside of our framework and Sketch.
Juan uses things like RapidWeaver when building websites (he’s a designer after all, don’t be too hard on him😬). In the above example he used a great RapidWeaver Bootstrap theme called Blank that has some very nice built in thingies like fade in page, nice animations for the nav and the ability to custom design the look of certain things, like links.
Whatever you are using (Webflow, Wordpress, Weebly, Squarespace etc) make sure to cut out this link from the top of each exported HTML page/artboard:
<link href=”https://www.sketch2react.io/css/s2r.min.css?version=0.0.55" rel=”stylesheet”>
Edit: This link will of course change between versions — this one is for our latest version
… and then paste this in the Head area of each page you want to override with your own custom “out-of-our-framwork” settings.
Note: Espresso App also has a very nice clean Bootstrap boiler plate template that has the nice mobile Nav animation built in from scratch.
Tip 9 — Check your naming of components 🕳
Juan: This has happened to me I don’t know how many times. When using an icon font plugin like Icon Font the name (of selected icon) changes to the new one. Great. But for one tiny thing. It also removes the {text} component. Baaaaaad. So if your icon is not turning up in code — check the layer name again.
Tip 10 —👩🏻🔬👨🏽🔬 Try out more Bootstrap components
There’s actually a whole bunch of Bootstrap components which can work even if you right now can’t style them direcly inside of Sketch (and have them like that in code). Experiment and let us know what works!
One that works!
- {hr} — creates a thin dark grey line, good for dividing up stuff in your page
Btw we tried our framework with the new (and very sexy) Sketch Beta 52. So far everything seems to be working great (fingers 🤞). Also works like candy in Mojave.
Bonus Tip — Embedd anywhere!
By now you may have (or not) understood that you actually can export the code generated with our framework and embedd it anywhere where HTML5 is supported.
Steps are:
- a) You design your awesome things inside of Sketch using our framework
- b) You drop the .sketchfile in our renderer app
- c) You export/download each page as a separate .html file
- d) You embedd this code anywhere you need it to be. Every single web editor or CMS that supports embedding of HTML5 will work
🧜♂️ Have a great day!
Juan & Fredrik, Team Sketch2React
