Sketch2React - the free design to code framework for Sketch app
-
Hey guys, this is a very brief introduction to Sketch2React.io, a side project between me and my friend Fredrik Ward. Let's copy and paste somethings shall we?
About Sketch2React
Sketch2React is a tool and framework that lets you alter your Sketch design files with the super powers of Bootstrap and React.That gives you high fidelity HTML5 code right from scratch
- Design with code snippets that're easy to learn! It's more like Markdown
- Fully responsive
- Zero plugins
- Visual way of learning Bootstrap 4
- No export required
- Treat the layers view in Sketch as a very simple code editor
- Use the popular Bootstrap grid
- Build entire static websites directly from inside of Sketch
And in a very near future it will also spit out React code and components.
I have written so many articles about this since we first introduced this beginning of May 2018. Here's a good one to start with.
And here's a very recent one.
And here's some great free grids to get you started.
All the best
Juan, Team Sketch2React, love from Stockholm, Sweden
-
@juand4v said in Sketch2React - the free design to code framework for Sketch app:
Welcome
Combining Sketch and React sounds funny and scary at the same time
-
@mihael I totally agree! I'm as new to this as anyone else, I will learn as we go further into the abyss my friends hehehehe
-
@mihael said in Sketch2React - the free design to code framework for Sketch app:
@juand4v said in Sketch2React - the free design to code framework for Sketch app:
Welcome
Combining Sketch and React sounds funny and scary at the same time Also, very important, what you will be able to setup to React is basic stuff like designing your own elements (those we support styling today), setting up layout grids etc. You will always need a developer for more advanced stuff like dynamic content etc.
-
@juand4v yeah, for now it still looks like there's always going to be a need for some sort of handoff between design and engineering.
-
@Graeme said in Sketch2React - the free design to code framework for Sketch app:
@juand4v yeah, for now it still looks like there's always going to be a need for some sort of handoff between design and engineering.
Totally agree. I can understand the thrill of "doing it all by yourself" but as all people that have been involved in big projects we know that it's really nice to team up with great devs. We hope that our tool enhances co-operation not eliminates it.
-
Hey guys! Today we released a big step forward true React export. Our first ever native Mac App is here. Read more here: https://medium.com/sketch2react/welcome-to-our-sketch2react-code-app-9fb10463396d
-
@juand4v really
awesome man! total fan! 
-
@juand4v
wow congrats Juan! I'm just finishing up an article to be published for next week, then will have a play with it and provide some feedback!
-
That sounds sweet! @juand4v Is there any case when code generated was used in production?
-
@Kingi said in Sketch2React - the free design to code framework for Sketch app:
@juand4v really
awesome man! total fan! Thanks happy to hear
-
@Graeme said in Sketch2React - the free design to code framework for Sketch app:
@juand4v
wow congrats Juan! I'm just finishing up an article to be published for next week, then will have a play with it and provide some feedback!Awesome news, really looking forward to your article!
-
@AlexDeardream said in Sketch2React - the free design to code framework for Sketch app:
That sounds sweet! @juand4v Is there any case when code generated was used in production?
Thanks! I know people use it but it's really hard to get feedback, I guess it's really new, people are just starting to learn it, learning curve is a bit steep etc etc. But we'll try to gather real world examples when people start sending them.
-
Hey guys, just want to share something really epic and cool. It's like having the intention based tools from Framer inside of Sketch. I read about a new plugin yesterday called Felipe. Totally mind blowing and it got me curious about getting this to work with our code components. And it does!!
Check out this GIF.
Here's my folder with a Sketch demo file where I have inserted some of our code components into Felipes.
-
@juand4v Oh, Felipe looks really cool, very clever concept! Just checked out the gif, that's amazing that it works with Sketch2React
I should be finished with my voice prototyping stuff soon, and just need to send some resources out to the 30-day program, then I'll finally have the chance to check this out!
Going to post Felipe in the tools here as well!
-
@Graeme said in Sketch2React - the free design to code framework for Sketch app:
@juand4v Oh, Felipe looks really cool, very clever concept! Just checked out the gif, that's amazing that it works with Sketch2React
I should be finished with my voice prototyping stuff soon, and just need to send some resources out to the 30-day program, then I'll finally have the chance to check this out!
Going to post Felipe in the tools here as well!
It's an exciting time to be a designer!
-
@AlexDeardream I have used S2R for quick responsive prototyping with amazingly great results. I work as a consultant UX/AD designer for one of the biggest banks/insurance companies in Sweden, and I always try to sneak in our stuff from time to time. Noticed that the combo of using just {text} {image} and {buttons} is super effective. You can read more about tips for getting started with this here.
I've expanded the article with both a video and written tutorial since I first published it.
Cheers
-
Hey guys!Wow how can so much happen in only 15 days? I really don't get time and space. This is what has happened since I last posted here:
-
New version of our Sketch2React Code App with full support for CSS plugins that use both uppercase and lowercase characters in their class names (like for example Animate.css)
-
Also our Code App has something new called Advanced Export.
-
New tutorial on how to create your custom CSS plugins
Plus a bunch of short vids explaining this and that.
Have fun guys!
-
-
@juand4v wow Juan! Sketch2React doesn't stop! I've just come back to England from Madrid for Christmas period, so I'm going to have time to finally play with this this week!
Thanks for sharing the updates
Also, I didn't hear back from the people at Sketch - I'll follow that up!
-
I had participated in the alpha, just downloaded the desktop app. I'm hoping to really dive into it and see what it can offer my team and I! Thanks for sharing @juand4v !
Latest Members
