{"id":82,"date":"2018-09-20T08:51:17","date_gmt":"2018-09-20T06:51:17","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/09\/20\/sketch2react-10-super-tips-from-the-team%f0%9f%92%aa%f0%9f%91%a8%f0%9f%8f%bb%e2%80%8d%f0%9f%92%bb-%f0%9f%91%a8%f0%9f%8f%bb%e2%80%8d%f0%9f%92%bb\/"},"modified":"2020-06-18T07:39:42","modified_gmt":"2020-06-18T07:39:42","slug":"sketch2react-10-super-tips-from-the-team%f0%9f%92%aa%f0%9f%91%a8%f0%9f%8f%bb%e2%80%8d%f0%9f%92%bb-%f0%9f%91%a8%f0%9f%8f%bb%e2%80%8d%f0%9f%92%bb","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/sketch2react-10-super-tips-from-the-team%f0%9f%92%aa%f0%9f%91%a8%f0%9f%8f%bb%e2%80%8d%f0%9f%92%bb-%f0%9f%91%a8%f0%9f%8f%bb%e2%80%8d%f0%9f%92%bb\/","title":{"rendered":"Sketch2React \u2014 10 Super Tips from the Team???\u200d? ??\u200d?"},"content":{"rendered":"
\n


\n<\/figure>\n

https:\/\/link.medium.com\/J2ZvBOiK6W<\/a><\/p>\n

Sketch2React\u200a\u2014\u200a10 Super Tips from the Team???\u200d? ??\u200d?<\/h3>\n

Here\u2019s a couple of totally random great tips all things concerning Sketch2React<\/a>. It\u2019s 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\u2019ll need to do the zombie scroll.<\/p>\n

https:\/\/gph.is\/11wSUok<\/a><\/p>\n

\n

WTF is Sketch2React?<\/h3>\n

https:\/\/link.medium.com\/J2ZvBOiK6W<\/a><\/p>\n

Okay so now you know, let\u2019s get cooking shall we? <\/em>?<\/p>\n

Tip 1\u200a\u2014\u200aUse Automate Sketch for Reverse Layer\u00a0Ordering<\/h3>\n
\n

Automate Sketch plugin together with Sketch Runner<\/a> is an amazing time\u00a0saver<\/figcaption><\/figure>\n

For our framework to do it\u2019s black magic, layers and groups<\/strong> 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).<\/p>\n

It\u2019s just how Sketch organizes things internally. ? Guess they <\/em>(Bohemian Coding) never thought about the idea of two maniacs converting their core design file format to code this way. <\/em>Hmm wonder why? ?<\/p>\n

Anyway! We found out about an amazing\u00a0.sketchplugin called Automate Sketch<\/a> that does that and many many other things. It\u2019s a really quick way of experimenting with things inside of Sketch.<\/p>\n

\n

Tip 2\u200a\u2014\u200aThe fill bug and how to work around\u00a0it<\/h3>\n

Scenario:<\/strong> Sometimes when using for example a {BG}<\/strong> component with a Fill<\/strong> (color or gradient<\/em>) and you change the fill<\/em> to something else, a new color for example<\/em>, the old one comes out in code. WTF. Don\u2019t know why this happens but we found a workaround:<\/p>\n

Just deselect the fill, delete it and re-fill your rectangle with a new color\u200a\u2014\u200aworks! Boom ?<\/p><\/blockquote>\n

\n

Tip 3\u200a\u2014\u200aUse Web2Desk to create S2R desktop apps\u00a0?<\/h3>\n
\n

Aaaah Web2Desk\u200a\u2014\u200a\u2764\ufe0f this\u00a0app!<\/figcaption><\/figure>\n

We really enjoy Web2Desk<\/a>. It let\u2019s 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\u200a\u2014\u200alet\u2019s make it a native app shall we? Since we\u2019re 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:<\/p>\n

\n


\n<\/figure>\n

And if you\u2019re like Juan (totally bonkers about design and stuff?<\/em>) here\u2019s a couple of high res Sketch2React logos<\/a> to use with Web2Desk for that extra yummi deluxe feel.<\/p>\n

\n

Tip 4\u200a\u2014\u200aThe\u00a0.\/\u00a0command<\/h3>\n
\n

Find and replace! Then upload to your\u00a0server<\/figcaption><\/figure>\n
\n

Espresso App<\/a> is a very nice web editor for Mac that does this very well (among other\u00a0things)<\/figcaption><\/figure>\n

Woooooooew.<\/em> Stop now, the what command? Yup!<\/em> Since our framework requires you (yes you<\/em>) to think more like a developer we\u2019re going to give you a very nice tip here. The use of the awesome dot slash command.<\/em><\/p>\n

Let us explain.<\/p>\n

We use this naming convention when linking betweeen artboards in Sketch:<\/p>\n

artboard:Artboard Name<\/strong><\/p><\/blockquote>\n

But when you have done all of your work and you\u2019re ready to export your designs to HTML<\/strong> (and in a not so far future, React code<\/em>) you will need to change all of those instances to real hyperlinks.This is one way of doing it:<\/p>\n

    \n
  1. Go to your favorite code editor<\/li>\n
  2. Find artboard:Artboard Name<\/em> (in our example it\u2019s artboard:About me<\/em>) that we replace with<\/li>\n
  3. .\/aboutme.html<\/strong>\n<\/li>\n
  4. Re-do for all places that contain these links.<\/li>\n<\/ol>\n
    \n

    Tip 5\u200a\u2014\u200aUse responsive media\u00a0queries<\/h3>\n
    \n

    Look at how smart responsive classes are! You feel like a real developer yet? I do!\u00a0?<\/figcaption><\/figure>\n

    Our Atomic CSS also includes responsive margin- and padding classes. This means that you can have different margins and paddings for different screen sizes. ?\u200dReally powerful stuff! Not only that, we now support fluid fonts which gives you responsive type really reaaaally fast. Example below is:<\/p>\n

    ??\u200d{row} [mt32 mb100 mq-xs-pl16 pl50 pr50]<\/p><\/blockquote>\n

    \n

    Tip 6\u200a\u2014\u200aUse Fluid\u00a0Fonts!<\/h3>\n
    \n

    I can look @ this aaaaaaall day\u200a\u2014\u200ayup!<\/figcaption><\/figure>\n

    Speaking of responsive fonts, since the release of Alpha v.055<\/strong> we now support the super awesomeness that is Fluid Fonts<\/a>. ?<\/p>\n

    Example<\/h4>\n