https://link.medium.com/LAZPea6SLW
https://link.medium.com/LAZPea6SLW
Once you design with code you’ll never go back
As a designer, to understand code and start using it in your day to day work, is so empowering, that it’s hard to explain.
It’s a bit like waking up from a deep dream and seeing reality with new eyes. It’s incredibly exciting and a feeling we hope to inspire you all to taste.
Totally understand why Design+Code has become such a great success, kudos to Meng To and team for opening up the eyes of designers world wide.
That’s one of the reasons we created Sketch2React.
We want you to feel that great feeling of being in control of your own designs even in code.
Sketch2React is a tool and framework that lets you alter your Sketch design files with the super powers of Bootstrap and React.
You already spend humongous hours inside of Sketch tweaking your well-crafted designs. Spend just a bit more and you’ll have the future of hand-off inside the very tool that you love and know so well.
Thing is, master our framework and you can’t even use the term hand-off anymore. All the styling and layout is already done.
???Congrats you have become more of an engineer. UX/UI engineer, call it what you want.
Goodbye static mockups
Say goodbye to static mockups and the days when you needed to design both mobile and desktop views. We roll Bootstrap in the background which gives you one of the most popular responsive frameworks in the world. From inside Sketch. ??
Best thing, it’s done using the everyday objects you are used to; folders, text, images, blend modes, drop shadows etc.
There will be pain
As with all new things you learn, there will be some pain attached. How hard is it to learn Sketch2React? Let me ask you this: How many hours did it take for you to learn, really learn Sketch? How long did it take you to understand how nested symbols work with overrides, creating them to be useful?
Is it as hard as to learn to code by hand? Nope. Is it as hard to learn say a new advanced design app like Framer? Depends. Probably easier.
New ways of thinking for designers
I would recommend spending as much time as possible studying our simple demo documents. They are made simple for a very important reason — once you dive into the rabbit hole the hole is endless.
The Bootstrap Grid
The most essential skill to learn is to first understand the concept of {container} {row} and {col}.
Everything inside of Bootstrap builds upon these layout pillars.
Great thing is, since this is Bootstrap, a very popular front-end framework, a lot of your developers will understand this, and most importantly, will be there for you to ask them questions like:
“Hey, how would you solve this in code if you build this?”
Very big chance you will be able to take those grid settings and use them inside of Sketch.
We have a plugin, but the only thing that it does, is it works more like a wizard helping you create folders more automatically. You don’t even need it. But keep using it, it’s good for understanding how things need to be setup. ?
The brain that renders everything lives in our React powered, web based Preview app. This way we combine our favorite tools inside of Sketch with Bootstrap and React.
The workflow goes like this
- In Sketch — Design your magic
- In Sketch — Use our plugin to add the Bootstrap grid, folders and settings you need. Use our demo files to extract things like buttons, the famous Bootstrap nav etc. All those things can be styled to your liking. Save your file.
- Preview App — Drag and drop your .sketchfile to our Preview app on our website. Nothing is uploaded it’s all stored locally on your ?
- Go back to Sketch and iterate iterate repeat step 2 and 3 until you have what you need.
- Preview app — Download each artboard as HTML5 files. If you have setup everything correct inside of Sketch you’ll be able to just throw all those files onto your server and boom ? it all works. Best of all — it’s all in code!
ProTip!
Since Dropbox supports native rendering of .html files you can use it as the perfect feedback companion app for this, getting feedback where it matters.
We are currently in alpha and that means anyone with an interest in awesome web development thingies is welcome to try it out. Just sign up on our website. We have made it even more easy to try it out by publishing all of our demo files online. Go get them gadget.
Funny story
When we first introduced this back in May 2018 one of the coolest insights/comments was something like this: ”I’m just happy to have the Bootstrap grid inside of Sketch”. You get the beloved grid and so so so much more. ????
Happy makings!
