Juan Maguid
Nov 15, 2018 · 4 min read

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:

Our desktop app is finally out! Read more here…

The essentials are

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!

Your journey begins now friend!

Start like this

{text}

{image} or/and {image-fixed}

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 😋💪❤️

Not onboard yet? Sign up to our free Beta Program cadet! 🛰 👩‍🚀

Tutorials and news about our framework

Design + Sketch

The best collection of articles, tips, tutorials, and…

Juan Maguid

Written by

Co-founder of Sketch2React/Stratos apps. Designer that wants to make your maker lives easier😺👍

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Juan Maguid

Written by

Co-founder of Sketch2React/Stratos apps. Designer that wants to make your maker lives easier😺👍

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store