How to use Sketch2React for Quick Responsive Prototyping
A great way to get started learning our framework is to use it for what we call Quick Responsive Prototyping. You could also call it Lofi HTML5 (and soon Lofi React😬🌅).
What we mean by lofi is that you cut corners, do it really quick and focus on just the essentials. You still get the Bootstrap grid in all its responsive glory. You’ll actually learn extremely important skills that you’ll never loose.
Ask these questions
What is the purpose of your prototype?
If any of these facts are true, give it a go building it with our framework:
- You need to try out/show your devs real code responsive flows
- You want to build and set up the grid yourself — hey we are designers aka control freaks for a reason hell yeah! ✌️👻
- You want to use your own servers and connect to a service like Hotjar or/and Google Analytics. Important note: Remember, even if most things are just text and images (while Quick Prototyping) you still can connect to these services and get real user data feedback — how awesome is that?
- You want to build one prototype that works on all screen sizes, one that is responsive
The essentials are
- Learning and understanding how the Bootstrap grid works from inside of Sketch
- You need to switch your brain to developer mode
- How to place content inside whatever grid setup you need for your design
- We just released 9 Free Grids. Use them to mix and match and create endless combos of responsive mobile friendly layouts
What the heck does ”developer mode” mean?
It means that you need to scan your artboards in Sketch with that super excellent brains of yours. That same brain needs to divide what you have designed into rows, columns and containers. At first this feel really odd. But once you get the hold of understanding this, you will never ever forget it. It’s way easier than learning how to ride a bike. Remember how you struggled with that when you where a kid? 🧒I do!
Start like this
- What needs to be interactive and what can be static?
- To begin, focus on these two components only
{text}
{image} or/and {image-fixed}
- Learn how the grid needs to be setup by studying our 9 Free Grids .sketchfile
Images as buttons 🤯💎
One really neat trick: convert each {image} that you need linking to other artboard/pages to a {button-primary}. Since you can have an infinite number of styled buttons feel free to make one for each required image.
You can also have image hover effects since this technically is a button — how cool is that?
Sketch2React — Images as Links Tutorial
Here’s the tutorial I promised in this very article a couple days ago. 😅 👍
If you prefer written tutorials
🎉Our Desktop Code App is here (and it’s free!)
Our free desktop app does many amazing things that you will enjoy while developing from within Sketch with our framework. Treat Sketch as your developing platform and our app as your default code previewer. It’s here that all the magic you setup inside of Sketch gets transformed into workable code.
Read more here
Works with Sketch’s built in Prototype Tool
Another awesome thing is that our framework works perfectly fine with the built in prototype tool inside of Sketch. If you use our buttons or our nav elements all the links will work in code and in your prototype. Pretty neat and you can use the fine Sketch Cloud to gather client feedback plus exporting each Artboard to HTML5 — a pretty damn fine combo right there. 🦄😬
More learning resources
Pluralsight has an amazing course called Bootstrap 4 for the developer by Mario Macari. I highly recommend it if your a designer that wants to learn Bootstrap. Lot of things in our framework will make sense after this course if you have zero code background. Focus on the parts where he explains the grid, containers, columns and rows.
Important Note
You actually need zero code knowledge to use our framework. But that’s is not because this is Design with no code, a paraphrase that you hear a lot in relation to software that claims to do magic with zero effort.
We force you to learn a few very good lessons that will elevate you as a designer and that is a very good thing. You will thank us later, we promise 😋💪❤️
