Here’s a couple of totally made up (but oddly logical) use cases for when to use our free framework. Also this is a very good way to get started if you haven’t already.
Case 1 — You’re the only developer in your company
We think this scenario is one of the most common ones. We also strongly believe that our framework is perfect for you since quite a few design studios have many designers but few developers (if any). So convert your designers to semi-devs! ???? This may first seem like an equally great idea as say, global warming, but just bare with us for a moment. Open your mind and listen maaaan. Yes there will be some pain but after pain comes joy!
Your designers will learn
- The basics of the Bootstrap grid
- How they can use that awesome grid directly from inside of Sketch
- How they themselves can try out advanced responsive layouts that are real
- How to style components (the ones we currently support) directly from inside Sketch
You will then
- Be able to save tons of time (once you all have learned our framework)
- Be able to take your designers work even further with your code expertise
Case 2 — The Jack of All Trades Freelancer/Employee
We think you understand a whole lot about everything from design processes, UX/UI design to development. You also get bored very easy. But that’s something to work on elsewhere, take that up with your therapist.
But we have happy news for you! If you already use Sketch, and have this background, this is Xmas old friend.
You can now
- Design AND develop a lot of web projects directly from inside of Sketch
- Iterate until you bleed using our Previewer App, where most of the magic stuff becomes reality.
- Export all of your code directly from our Previewer App and copy+paste into whatever you use for development. All of our output is sweet HTML5 Bootstrap powered awesomeness. And soon you will also be able to export to React code + components. See miracles do happen.
Case 3 — You work at a big company with many designers
Since Sketch is still (fall of 2018) a pretty big player in the field of design and development, big chance is that you’re still using it. Or at least, you have A LOT of painfully detailed design files that you desperately need in your day to day job.
Sure you can copy + paste those into any other major player in the field (XD, InVision Studio, Framer, Figma etc) but wait just a few moments.
Hook Sketch2React into your workflow by
- Learning just the basics of container, row, col by studying our demo files. Start with the one called Wireframe Demo.
- To speed up your learning process focus on these few components:
- {text} — converts all of your text styles into styled HTML5 text
- {image} or {image-fixed} — for all of your vector assets inside of Sketch that are not an icon font
- Study one interactive element, for example, {button-primary} and re-style it to your liking. Remember to not rename the folder containing all the crucial button elements. But! You can rename the Symbol itself ???
Case 4 — We are unique
As of today (25th of October of 2018) there is no single tool or framework that lets you design things inside of Sketch and output responsive Bootstrap code for free.
There’s a reason for that — it’s a monumental task but one we have cracked.
There’s also no one that lets you access that code for further editing elsewhere.
So right now, we’re totally unique. Of course, that can change. Say that Bohemain Coding goes and does something similar to what the people behind Framer are doing with Framer X.
Or the Vogons decide to erase Earth. Anything can happen but let’s not worry about that right now. Focus on the now. Also we have an escape plan. More on that further down the road. Let’s just say we are not putting all of our eggs in the same basket. Or more accurately, these eggs fit nicely into other eggs by other manufacturers. Wow is this how politicians must feel all the time?
Ideas for learning
I have talked about this earlier, but I say it again. Many companies understand that happy people stay longer on the job. And when are you happy? Probably when you are learning new skills. But not under the pressure of deadlines. A great way of learning is doing it together with others, your co-workers for example. Set up some common goals, appoint a day, say Fridays between 13–16.00 for this. Be sure to have someone who co-ordinates things, usually this comes natural, workplaces are full of leaders and followers. One great tip is to make everyone do some homework until the next occasion, that way things get done.
Good luck and happy makings!
Download this article as .epub
Words and illustrations by Juan Maguid, one half of Team Sketch2React