What is Sketch2React?

Sketch2React is a free Design to Code Component framework that consists of:

• A free framework based on Bootstrap 4 that consists of Components​

• A Desktop App (Mac only) that converts your Sketch files into actual code

• A Sketch plugin that helps you setting up the Bootstrap Grid inside of Sketch

• From our Code App you can export to code components

What can it do?

Our framework is really great for many things, like for example:

• Design and style your own components like text, buttons, form fields, navigation

• You go from design to code components without ever leaving Sketch

• React Vanilla or our version? The choice is yours…

• Since we run Bootstrap 4 in the background you can design and export real code grids to your developers

• Add custom made CSS animations, overrides and effects as easy as 1-2-3​

• A great way to get started learning our framework is to use it for what we call Quick Responsive Prototyping​

• Since you're working with real code you get real code constraints, which is a great thing

• Pump out Bootstrap 4 powered websites for free like there's no tomorrow. Connect external CMS for even more awesomeness.

What is the .sketchplugin for?

You actually don’t need the plugin but it can make your workflow faster. It works a bit like a wizard that helps you with all of the really tedious stuff like creating containers, choosing margin and paddings etc. All of these settings can be changed afterwards in Sketchs layer panel.

Can I use web fonts like Google Fonts?

Yes you can! Actually it’s really easy, check out our handy Cheat Sheet for further instructions. We also have instructions on how to use Typekit fonts from Adobe.

​