{"id":898,"date":"2020-12-21T16:20:20","date_gmt":"2020-12-21T15:20:20","guid":{"rendered":"https:\/\/sketch2react.io\/blog\/?p=898"},"modified":"2021-02-05T12:05:35","modified_gmt":"2021-02-05T11:05:35","slug":"why-designing-with-code-constraints-is-a-great-idea","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/why-designing-with-code-constraints-is-a-great-idea\/","title":{"rendered":"Why designing with code constraints is a great idea"},"content":{"rendered":"\r\n
\r\n
\r\n
\r\n
\r\n

If you found your way here, you probably agree with me on this topic. Or not<\/em>. That\u2019s totally fine, we can agree to disagree.<\/p>\r\n

I often write this kind of article after receiving feedback or questions about what you can do with our framework and code app. So let\u2019s begin!<\/p>\r\n

What is Sketch2React?<\/h2>\r\n

Sketch2React<\/a> is a markup-based design to code framework that lets you design and build real code prototypes and simple websites, straight from inside Sketch app. The exported autogenerated code are web projects for HTML<\/strong> and React<\/strong>. So if you\u2019re a designer that mostly design for the web you\u2019re in luck.<\/p>\r\n

Even if you design apps for iOS and Android you can still use Sketch2React to build React prototypes and simple React websites. Hybrid app’s anyone?<\/p>\r\n

Sketch2React app<\/a> is purchased via our brand-new marketplace. It\u2019s affordable, you get a lifetime license, you can install it on several computers, and we are not a subscription service like everyone else seem to be these days.<\/p>\r\n

What Sketch2React is not<\/h2>\r\n

Sketch2React will not replace your developer. <\/strong>Never ever<\/em>. Let that sink in for a while. Sorry to break it to you, but the sooner you realize this the less frustrated you will get.<\/p>\r\n

That doesn’t mean it’s not useful to your development team. You as a designer will use a tool that is 100% based on real code frameworks<\/strong>. That means that even if you just create a prototype for React you are still using React in the background. When you export you get real React code bundled into one of the most popular packages, Create React App<\/em><\/a>. <\/p>\r\n

I see our framework as a nice Lego set<\/strong>, with instructions for things you can build out of the box and a great collection<\/a> of already made constructions to inspire you.<\/p>\r\n

The rest is up to you. To use your gut, grits and curiosity to take this set of digital Lego pieces to the next level. The playground will get bigger and bigger the more you learn about all the possibilities.<\/p>\r\n

How do I learn Sketch2React?<\/h2>\r\n

First let’s be 100% clear about one essential thing \u2014 you actually don\u2019t need any code knowledge<\/strong> to start using our framework and code app. What you do need is patience and a will to experiment, fail and eventually get what you want.<\/p>\r\n

Our markup is based on something called Atomic CSS. Simply put, in Sketch you use our rules on Sketch layers<\/strong>. Follow our rules<\/a> and you will be greatly rewarded. They transform things into code. For you. Very little effort right?<\/p>\r\n

Not only that, you will instantly see inside our code app if you do it right. Our code app contains our rendering engine and a Chrome browser.<\/p>\r\n

We also have a great free Sketch assistant<\/a> for the very first basic things you need to learn. Sometimes you actually want to go against our friendly, yet a bit stupid, assistant. Sketch assistants are great but it’s not an AI. <\/p>\r\n

The rules are the right ones but they don’t always need to be applied. You will just need to learn more, study more, experiment more. We’re there’s pain there’s also gain.<\/p>\r\n

You actually do about everything directly inside Sketch. When you feel more comfortable you will probably start making your mini CSS plugins, adding external animation libraries etc.<\/p>\r\n

How to start<\/h2>\r\n

Based on the user feedback<\/strong> we have gathered from over 2 1\/2 years of existence, the number one mistake that people make is that they start learning our framework on overly complicated design projects. Do yourself a big favor, start simple<\/strong>.<\/p>\r\n

Take your time to watch a couple of our video tutorials<\/a>. Read our written ones<\/a>. Download our many free Sketch resources<\/a>, study them and start experimenting yourself.<\/p>\r\n

There are many ways of building prototypes. Since I actively work as a designer in my day-to-day job, I know that when taking the decision to actually build<\/em> you always need to balance these things before taking a decision on how:<\/p>\r\n