Quick Prototyping for React — Part 1


Hey guys! Finally got some time over to do a tutorial I’ve been thinking about for a while; how to cheat as much as humanly possible with Sketch2React and still get great things out to React.

So I call this Quick Prototyping for React but actually “quick” needs a bit of explanation, I really hate misunderstandings. Always have, always will ??

By quick I mean

  • You export lots of the content as plain old SVG’s
  • You use CSS tricks to do funky layout things
  • You use CSS for all animations
  • You’ll use a couple of our components but far from all of them

In part 1 you’ll learn about

  • How to plan a prototype in Sketch
  • How to add things to our export bundle by heavy use of SVG
  • How to use our most common layout elements {container}, {row} and {col}
  • How to add a custom made CSS & attach it to a group of SVG layers for creating a sticky footer.

Bonus!

As a nice bonus you’ll get a fine discount (click on the banner below) on the design system I use in this tutorial, the beautiful Cabana Design System by Marc Andrew. Thanks Andrew!?? ❤️

https://gumroad.com/l/cabana-three/cabana30

Leave a Reply