https://link.medium.com/LAZPea6SLW
Learn Sketch2React – From scratch
We are all children in the beginning when learning new things. Take myself as an example. I have been learning how to drive a car for about a year now. At first I was terrified. ”What if I kill someone?” You’re actually sitting in a moving death machine if handled wrong, and without respect and alertness things can go really really wrong. ”I will never ever learn how to drive a frakking car! — Where are those self-driving cars anyway?”. Yup.
Thing is, the only approach I have ever known to work for me is just to jump straight in and learn as you go. In small steps. One thing at a time. And realize you will never ever learn anything completely, this is a life long journey my friends.
Thankfully learning Sketch2React is waaaaaay easier than learning how to drive.
This is a guide on how to get started. These video tutorials are short and concise and you’ll have a very good understanding in just over 20 minutes on the very basics of our design to code framework. We will continue to release a couple of more beginner tutorials in the months to come.
Anyway, big chances are, you already have a great grasp of Sketch since you found us in the first place and bothered even reading this far down in this article. ?✊
Step 1 — Sign up
If you are 100% new to this, first of all you need to sign up on our website to get all of our relevant files, apps etc. Once you sign up you’ll get an automated email with a big fat download button. Press it. Dooooo it now. Yes.
To make sure you get our automated email please whitelist feedback at sketch2react dot io in your preferred email application.
Step 2 — Watch these tutorials
We have created a very basic tutorial series for people that are totally new to this.
Tutorial System Requirements
- Sketch App v52–
- Sketch2React Code App v0.7.2
- Fonts: Poppins & Ion Icons (installed via free plugin Icon Font)
- Sketch2React know-how: 0% ?
Part 1 — Create your very first code component in Sketch
In part 1 of our Start from Zero with Sketch2React you’ll learn how to things need to be setup inside of Sketch for this to even begin to work. You’ll also create your very first code component from scratch! ? ?
Part 2 — Learn how to create a container and use margins to add padding
In part 2 you’ll learn how to create a {container} and see how that affects your components. Also we show you how to use margins, an excellent way of getting spacing between component objects in your layouts.
?✅ Download Tutorial file here…
Clarification
This tutorial contains two button components, we just copied them from one of our free demo files, and restyled them. Do the same. How to create a button component from scratch is irrelevant at this moment, you need first to learn the basics.
Part 3 — Columns and rows, essential to web design
In part 3 you’ll learn how to create columns and rows, this is great for layout and creating more complex components.
?✅ Download Tutorial file here…
Part 4 — How to add images
In part 4 you’ll learn about the difference between {image} and {image-fixed}. Also, every time you add a new image, you need to relink the .sketchfile to our code app for it to show up in code.
?✅ Download Tutorial file here…
Part 5 — How to convert our components to symbols
In part 5 you’ll learn the extremely valuable lesson of converting your Sketch2React components into Sketch symbols. We all know that symbols is the best things since cupcakes but when they also are real code components I run out of positive adjectives to use. ??
?✅ Download Tutorial file here…
Summary
Yes! After you have done all of the above tutorials you will have a very good grasp of what you can do with our free design to code component framework. Please feel free to download any of our free resources and study them for learning how to create more advanced web design thingies directly from inside of Sketch.
You been good, go celebrate your new learnings now ????
And actually this might just happen:
One of the best things about #designing with real #code is that no one can ever tell you "that's not possible" Well dude, I just solved it for you ??#sketch2react #html #react
— Juan Maguid (@juand4v) May 6, 2019
?
//Juan from Team Sketch2React/Designforventures