https://link.medium.com/LAZPea6SLW
https://link.medium.com/LAZPea6SLW
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.
Thanks for watching this very interesting #sketch2react #protip instead of that boring #PowerPoint you’re forced to watch by your #boss ????☠️ pic.twitter.com/G1qf6zpcz3
— Team Sketch2React (@Sketch2R) April 11, 2019
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.
Once you have done all of that hard work setting everything up, save your #code #components as #sketchapp #symbols and shed many many happy tears ? #Sketch2React pic.twitter.com/6stpoiHjei
— Team Sketch2React (@Sketch2R) April 10, 2019
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. ? ?
#protip Here’s a smart way of using #flaticons together with #Sketch2React and @sketch #css #fonts #reactjs pic.twitter.com/fs8SPBplUr
— Team Sketch2React (@Sketch2R) April 9, 2019
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 ??✅
Jump over to our #website and #download our latest #sketch2react #freebie Just Add Water Animations – A Sketchfile filled with awesome #animatecss ready-to-use #animations Your welcome ??????#designtocode #framework for @sketchapp pic.twitter.com/RTwCFVnzfX
— Team Sketch2React (@Sketch2R) April 5, 2019
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.
Best thing about #sideprojects is being able to write silly headlines and no one even bothers hahaha ?✅#designtocode #component #framework for @sketch @AnimaApp #devsigner pic.twitter.com/9VNWQEJ7Wi
— Team Sketch2React (@Sketch2R) April 5, 2019
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.
This was a nice surprise! #imageoverrides now works again as of @sketch v54 Beta 4 ???Don't forget to relink your #sketchfile for the image to load into our #codeapp #reactjs #bootstrap4 #devsigner pic.twitter.com/NIvYC94qnj
— Team Sketch2React (@Sketch2R) April 8, 2019
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 ??
After export remember to #compress your #Sketch2React #image #assets with something like @tinypng ???@sketch pic.twitter.com/vQ4KIDbW9d
— Team Sketch2React (@Sketch2R) April 12, 2019
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?
ProTip! By having the #image semi transparent you can really quickly achive interesting #design variations #sketch2react #cardcomponent #designtocode @sketch pic.twitter.com/D2idMlK4Yz
— Team Sketch2React (@Sketch2R) April 4, 2019
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.
??ProTip! Keep things neat and tidy inside @sketch with @AnimaApp As long as you rename the Stacked Group accordingly it still works in #code #sketch2react pic.twitter.com/3Qj6JeOkZV
— Team Sketch2React (@Sketch2R) April 4, 2019
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).
??ProTip! It takes seconds to #customize your #bootstrap4 #powered #navigation with some clever uses of #classes #sketch2react https://t.co/BC0AeMhP1a @getbootstrap @sketch pic.twitter.com/reD7su83Vl
— Team Sketch2React (@Sketch2R) March 29, 2019
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 ? ?
It literally takes seconds to connect @Typekit #fonts to #Sketch2React
1️⃣Copy the url from Typekit
2️⃣Paste into {externalasset.css}
3️⃣Done! ✅To be sure ?Check in code @ChromeDevTools???????????@sketch pic.twitter.com/awUEZo2RWE
— Team Sketch2React (@Sketch2R) April 23, 2019
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