React-sketchapp: Support for generating symbol masters and placing instances

[gabrielecirulli]

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?

[jongold]

Thanks for a great write-up :)

Yes! This is on the roadmap, I haven't had time to work on it yet though.

If anyone feels up to contributing, I'd love some help — we have support for TextStyles, and adding Symbols would be similar.

Here's an API I was considering, but it might not be perfect - essentially we want an easy way of registering and using these symbols without affecting their underlying representation 🤔
src/Widget.js

import { Widget } from 'my-component-library'
import { symbolify } from 'react-sketchapp';

export default symbolify(Widget)

src/index.js

import Widget from './Widget';
render(<Widget someOverrideProp='foo' />, context.document.currentPage())

[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 😄

[jongold]

@lukewestby 🙏 🙏 🙏 🙏

lmk anything I can help with - I realize there's a lot of accrued knowledge that I haven't braindumped yet

[lukewestby]

Will do! I'll ask questions here or wherever else you think would be better. I could also email you for help if y'all prefer to keep issue comment threads sparse. Thanks!

[jongold]

Closed by #53 — should work in 0.11.0 and higher!

[gabrielecirulli]

Thanks for the great work, can't wait to try it out!
On Thu, Jun 8, 2017 at 8:40 PM Jon Gold [e-mail] wrote:

Closed #28 https://github.com/airbnb/react-sketchapp/issues/28.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-sketchapp/issues/28#event-1116049530,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA2E-9CxViMdazVQHRkGT5xtqIn2ttXdks5sCEABgaJpZM4NInDH
.

[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.