Support for generating symbol masters and placing instances

Thanks for sharing the project. It seems like an approach that makes a lot of sense when it comes to building complex design systems.

I wanted to share a bit about my workflow and a proposal for how this project could work with symbols.

I have been building a design system that uses Sketch symbols to provide various primitives, such as buttons, fields, checkboxes, containers. The users of this system make a new copy of a file containing all the symbol masters for each project they start. They use the symbols in it to compose their layouts.

Almost all of the symbol masters have 2 versions: a normal version and a “measurement” version. The measurement version has @ appended to the symbol name and contains transparent colored rectangles that represent the margins and paddings of the symbol:

When I saw what React Sketch.app can do, its purpose immediately made sense to me in the context of this type of work. Having a tool generate all permutations of a specific component instead of having to manually compose symbols and create their measurement versions would be a much better workflow.

I’m curious to discuss if the following ideas fit with your plans for this project:

• Similarly to rendering Artboards, React Sketch.app should be able to render Symbol Masters.
• With a system similar to how refs work in React, it should be possible to refer to symbol masters and place instances, e.g. <SymbolInstance master="button-active"/>
• Being able to set the resizing method on a per-element basis within masters as a prop (e.g. stretch, resize-object, etc.) would allow to programmatically define the behaviour of such symbols

Having a “style guide” that is composed out of symbol masters that are defined programmatically has a twofold advantage: designers who are not experienced in programming can directly use the generated file and symbols in it, together with simple plugins such as Auto Layout, to build their comps manually.

Designers who also have a background in programming and need to build much more complex comps can work with the same symbol instances, whose masters are still defined directly in code, and reap the benefits of Sketch’s symbols implementation.

Both groups would benefit from having a library that’s very flexible, always up to date, and easy to keep free of manual mistakes.

Any thoughts?

[lukewestby]

hey @jongold! wayfair.com uses both react and sketch extensively and we’re really excited about react-sketchapp. symbol support is something we would like so i wanted to drop a note here to let y’all know we’re going to work on contributing this feature 😄

[hanonno]

Now we’re getting somewhere, nice work!

To give you a bit of insight, I would like to use this to generate our design system, these components are all symbols.