How to use Sketch2React together with InVision Design System Manager
This is another shining example of how community driven we try to be with all things Sketch2React, and how that has been one of our top priorities from the very beginning.
The question was asked by a very active member of our Slack community:
”Does Sketch2React work with Craft Manager for Sketch?”.
Since I personally hadn’t been using Craft for years I didn’t have a great answer for that more than the usual ”we’ll look into that, thanks” 😸 💪
Btw thanks Jason for inspiring me to create this very tutorial.
Where to start?
You need to start somewhere. Of course, being the design nerd that I am I thought to myself ”Hmm InVision DSM seems really really nice, I have been meaning to try it out, now is the perfect time, let’s do this!”
Tutorial Requirements
- Latest version of Sketch 55+
- Latest version of Craft Manager
- Free InVision Account (so you can use DSM)
- Latest version of Sketch2React 1.5
- Basic understanding of Sketch2React and how to build components
What is DSM?
It stands for Design System Manager and it’s InVision’s answer to the ever growing question: “How the hell do we keep our component library in sync between designers?”
It’s like a design CMS for Sketch 👍
What I love about InVision DSM
It works really well with Sketch2React!
Not only that, it works really well with Sketch (duh!) — the whole workflow feels natural. It’s really easy to just jump in, start adding components, text styles, colours, update them, keep on building.
It’s the fastest way to kickstart your S2R projects
Once you have built up your S2R component library you really start to ripe the fruits of your hard labor. You are practically drag+dropping real code components onto Sketch, something you really need to experience.
It’s surreal and even myself, deeply invested in Sketch2React, have a hard time getting used to it. It’s amazeballs!
Building feels natural
We are designers and we love building things. Using DSM really enhances that feeling. You can write down documentation, scribble down small tool tips, divide things into sections, the tool is a delight to use.
What I don’t love
You always need to be online
To access and update your design system library you always need to have an internet connection. Bummer if you’re commuting and feel like updating your DSM on the go. Totally understandable of course, the very nature of DSM is to share everything with others. Would be great with some kind of offline magic though. One can wish 😄🧙♂️
Work around
Make sure to download all your components to a Sketch doc before jumping on that commuter train. Or just use your companies shared internet connection thingie and you can do that jazz whenever wherever. 😆
Pricing models
There is only one pricing model and it’s hidden. Well technically free is also a plan, so two then. Free and Enterprise. For this tutorial I’m just using Free.
Enterprise comes with a mystical hidden price tag. Enterprise lets you share your DSM with other designers which is (of course) amazing. Also you get some kind of code inspect thingie but that is out of scope for this tutorial.
I’m fine with the free version for now since I’m building myself a Sketch2React Component Library, that has exactly one user. Me 😊🤸♂️❤️💎
InVision if you’re reading this, please add some fair plans to us designers that don’t have the need to use DSM on enterprise level. You have a great product that many many designers are missing out on. 🤙🤸♂️ And honestly, the whole ”contact us for prices” scares the hell out of me and I’m not alone.
So let’s begin testing 👍
This is what you need to do before jumping into Sketch:
- Make sure you have the very latest version of Craft Manager installed on your computer machine thingie
- Make sure you have the very latest version of Sketch 55.2
- Make sure you have a basic understanding of how S2R works, this will be very confusing if not
Preparation is key!
- Look at the introductory video that appears first time you click on the DSM icon inside Craft, it’s really great and totally worth 3–4 minutes of your lifetime
- Here’s even more great learning resources for DSM
- Make sure you have a couple of real code Sketch2React components for this test, feel free to just copy/paste from any of our free demo documents for this purpose
- Make sure you convert all of your code components to Sketch Symbols before adding them as Components inside DSM
Clarification
That last part is crucial. You need to convert anything you want to reuse in other documents (as real S2R code components) into Sketch symbols.
Basically everything that you want to appear in our code app and therefore code is considered a code component by our framework.
Example
- Style your {text} as funky and stylish as you need it to be
- Convert it to a Sketch symbol and call it H1 or H2 or Paragraph depending on what component you’re making
- Use the shortcut ⌘L to fire up DSM
- Go to the folder that is called Components
- Select the freshly squeezed symbol you just created from the Layer List
- Create a subfolder inside Components and call it whatever you want, mine is called Text (Sketch2React)
- Click the big + icon inside of the DSM interface
- Your Sketch2React Symbol will now be added into Components inside of DSM and available to be added to whatever new blank Sketch file you need it to be in — amazeballs !
Lets add a grid to DSM 👍
Grids are great and they save you lots and lots of time. For speeding up this part make sure you first have downloaded our 9 Free Grids document.
Converting the grid to a Sketch symbol
- Open up 9 Free Grids
- Select any of the available grids, I’ll choose the one that is called 4 x 4 Grid
- Select {container} (see above GIF)
- You could delete Title {row} [m4] if you want since that is only used to describe the grid name in our demo
- With {container} selected go to Create Symbol (you can right-click and choose it or just use the icon shortcut like I do) and call it 4 x 4 Grid (or anything else)
Uploading your Sketch2React Grid to DSM
- Fire up DSM with the neat shortcut ⌘L
- Select the freshly created symbol called 4 x 4 Grid
- Go to Components and create a new subfolder, call it Grids (Sketch2React) so you can separate S2R code components from non-code components
- With the 4 x 4 Grid symbol selected press the + button in DSM (like below) and the upload will begin 🤖💪
Using your Sketch2React DSM Components in Sketch
For most use cases it’s really just drag and drop onto a new Sketch document and you’re good to go.
Most use cases
- Create a new Sketch doc ⌘N
- Rename Page 1 and call it Start here
- Create a new artboard, just use one of the built-in Sketch web or mobile templates, the important thing is to call it Start
- Fire up InVision DSM ⌘L
- Drag and drop any of your S2R enhanced real code components from DSM onto your blank artboard
- Save your document
- Open up our code app and link to this very same Sketch doc
- You should see the S2R components that you just drag+dropped from DSM in our code app
- Do a happy dance!
Grids & Complex Layouts Use Cases
Say that you use one of our 9 Free Grids or you have designed your own template grids by just using our practical {rectangle} component, divided everything nicely into {rows} {cols} — and then saved them as stated above as Sketch Symbols. When drag + dropping your Grid S2R DSM components onto new documents you will want to do this:
- Create a new Sketch doc ⌘N
- Rename Page 1 and call it Start here
- Create a new artboard, just use one of the built-in Sketch web or mobile templates, the important thing is to call it Start
- Fire up InVision DSM ⌘L
- Drag and drop any of your uploaded S2R Grids from DSM onto your blank artboard
- Save your document
- Open up our code app and link to this very same Sketch doc
- You should see the S2R Grid components that you just drag+dropped from DSM in our code app
- Now select the S2R Grid Component, right-click and select Detach from Symbol
Why detach from symbol?
Because, big chances are, you will want to populate each {col} with your real content instead of our colourful {rectangle} component 😄✅
Of course, say that you first start with a very simple grid, fill it with content and want to convert this into a complex code component that you can update using the overrides? Nemas problemas, just follow the exact same instructions that you now have learned. 🚀
That was all folks, hope you’ll enjoy InVision DSM together with Sketch2React as much as I do.
As always, have a great one 🤗❤️
//Juan Maguid, Team Sketch2React
Read this tutorial offline?
We just updated our awesome free e-book Sketch2React Pocket Guide and included (amongst many new thingies) this lengthy tutorial. Download from below 👇👇👇👇👇👇
