Should design tools code? Hell yeah!👍 😄
What started as the never ending discussion ”should designers code?” has now, in recent times, been transformed into something more like ”should design tools code?”. At least that is how I perceive it. Let me answer my own question again:
- Should design tools code? Of course they should, why not?
The whole idea behind Sketch2React (and in a near future Figma2React) is that we think design tools should be able to do more. It’s not enough how they work today were you get, in best case scenarios, basic CSS styling out of them. Not even other services, like for example Zeplin, goes much further beyond that.
I’m a designer and I want to see how my designed components and layout things actually look and behave in real code. Like how different browsers output colors for example. How can you possibly see that with a static image or clickable prototype? You can’t actually. Or how does my typography look on different devices, screen sizes and whatnots?
How much code?
I think one of the problems tool makers face today is to answer the question:
Okey cool, we could make our tools output code but how much? How far do we stretch it?
With Sketch2React you can build and style real code components in Sketch. That you can export to code and send to your developer. Or continue developing on your own but not in Sketch. To us this makes sense, design tools with the added dimension of code styling.
You should:
- be able to design your component in a design tool
- be able to export that component as real code
- be able to setup basic layout and grid rules for your project in your design tool
You should not
- be able to build complex functionality inside a design tool
If you want to take it further on your own you need to use a code editor and have some basic coding skills. Skills that you today can gain by just following one of several great totally free online based courses. For example, Gatsby.js has one of the best introductory step-by-step tutorials I have ever seen and gone through. I’m utterly impressed 🙏😄 🏩
Cultural problem
The problem is also a cultural one. Most designers are not used to output code. They are used to design nice thingies in nice safe design apps that do what designers think they should do. It’s a safe, nice cuddly environment.
What happens when things are cuddly? You get lazy. You stop evolving. You just stop actually. Maybe that’s okey with you.
But not with me, I want to evolve into a better, more empathic designer.
We want designers to help developers more. It creates empathy and makes teams work better because of a greater understanding. Vice versa developers should also jump into our design tools and design more. All possible with our framework. Actually you will learn lots and lots sitting together with a developer in front of Sketch2React, discussing how you should break up the layout into different containers, rows and columns.
Right now you might be thinking:
“- Code is unforgiving, code is unpredictable, code is hard! Some code even writes itself wtf!”
Fear not designer, I’m here to calm you and let you know you don’t have to fear anything. Actually code is very logical, and once you get the basics everything starts to make a lot of sense. It has gotten much easier than it used to be.
React is very designer-friendly
Take React as a shining example.
As designers using Sketch we are used to think about components in the form of symbols. You design something once and then you reuse it everywhere just changing its content, not the UI component itself. Or if you need to change the component it automagically updates itself everywhere you are using it. Exactly like React. And other component based frameworks like Vue, Flutter etc. You’ll feel right at home. And by doing all of the basic setting up inside of Sketch using rudemantary proven tech (Bootstrap4) and exporting, a lot of things starts to make sense really fast. I promise you that.
Let me define what I mean with code
This is a very important distinction. Many times when people talk about design tools that code they think that the tools should do everything. Automagically. I know this because one of the most common questions we get is related to this very topic. You can read more here in my article Myths about Sketch2React.
What do designers do really well?
We love and obsess over how things look, feel, breathes in whatever thing we are designing + building. We do that really really well. So why wouldn’t we also make sure our design thingies look amazing in real code?
Learn code constraints on-the-go
Without even knowing it, when using Sketch2React, you are also learning about code constraints.
To summarise
- Design tools should be able to style and layout real code components
- Components that you as a designer can hand over to your developer that takes it further
I’m almost 100% certain you will be able to do this natively in all of the major design apps within a year or two. If not keep using our framework 🍰😊🙌
For us, with Sketch2React, it has always been about making that bridge between designers and developers really really short.
From design to code in 2 minutes
Curious to see what version 2 of our framework and code app has to offer? Check out this quick look by co-founder Fredrik Ward were he shows how we today use our tool, in a real world design to code environment. Next version of Sketch2React will have Styled Components.
Have a great one!
Juan, Team Sketch2React & Designforventures.co
