Greetings internet! Today I’m continuing with Part 2 of my Sketch2React tutorial series that could be named “get stuff out to code asap without knowing crap about code yo”…
But instead I named it Quick Prototyping for React. Lame I know, I apologize.
Anyway the whole thinking behind these tutorials is that you cheat as much as possible and still get a working, coded prototype out to React & HTML. So you can brag and show the world that even if you normally just draw rectangles and circles all day you also can do “cooooooode” if necessary. Yes sir!
Your PM will love you if that’s what you’re after. Aren’t we all very concerned about what people around us think about us? I am! So I feel you and that’s why I spend time doing these. You can thank me later.
Part 1 is here ?
https://medium.com/sketch2react/quick-prototyping-for-react-part-1-428e3af1cb15
Part 2 taaaa-daaa ?
You will learn all these awesome things in just over 12 minutes. Godamn we’re efficient here, even your boss will love you now.
- How to create and use the amazing {link} component
- How to link between artboards and why the naming is crucial
- How to add awesome and simple CSS animations to your prototype via Animate.css
- Understand that when prototyping with code you of course can reuse things in production, like the type of CSS animation you use
Tutorial Assets
Sketch file I’m working on
https://medium.com/sketch2react/quick-prototyping-for-react-part-1-428e3af1cb15
Fonts I’m using — Work Sans
https://medium.com/sketch2react/quick-prototyping-for-react-part-1-428e3af1cb15
Finally, the tutorial it self
Totally related tutorials
How to add CSS animations
How to work with layering in code
Have fun!
Juan Maguid, Team Sketch2React