Tutorial — Quick Prototyping for React — Part 2

 

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

Leave a Reply