How to use Sketch2React together with InVision Design System Manager

Designforventures.co
Jul 3 · 8 min read

Where to start?

Tutorial Requirements

What is DSM?

Seeing your component library come to life bit by bit is a really nice feeling

What I love about InVision DSM

It works really well with Sketch2React!

It’s the fastest way to kickstart your S2R projects

Write down some useful instructions for your other designers and baam they will get up to speed in no time 👍🤖

Building feels natural


What I don’t love

You always need to be online

Pricing models


So let’s begin testing 👍

Preparation is key!

Clarification

Basically everything that you want to appear in our code app and therefore code is considered a code component by our framework.

You need to convert EVERY code component into a Sketch symbol BEFORE uploading to DSM or it will not work

Example

Lets add a grid to DSM 👍

Converting the grid to a Sketch symbol

Uploading your Sketch2React Grid to DSM

Neat and 👍

Using your Sketch2React DSM Components in Sketch

Most use cases is just drag and drop and you good to go

Most use cases

Grids & Complex Layouts Use Cases

Detach from symbol to populate the grids with real content and you’re good to go 🌵😸

Why detach from symbol?


Read this tutorial offline?

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Designforventures.co

Written by

Tools and tutorials for the people! Co-founder of Sketch2React.io

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond