[RFC] Sharing assets: workflow and tooling
To be usable for developers and designers, all our assets should be delivered as a react component and as a editable mockup.
For example, in the case of a button:
- a button component, that you can reused in the code by adding a
<Button>
element; - a graphic version of the component with editable text and styles.
Our goal is too have a single source of truth that we can offer to newcomers and that let designers and developers collaborate with as a little friction as possible. To achieve that, we need:
- an up-to-date styleguidist instance that let you see components (states, styles, behavior and animations);
- an up-to-date library that can be use in any tools that someone may want: from sketch to photoshop, amongst various other (pencil app, invision creator, or whatever comes next)
The only theme that needs to be share between designers is the starter kit.
Some use cases that comes to mind:
- a designer needs to create a mockups using our atomic system. She can select the atoms she wants, import it into her application of choice and start building a new component.
- a designer is sending the mockup for his new component to his co-working developer and she must be able to see how the design must be implemented in terms of styling
- two designers share assets to build two different components based on the same atoms and molecules, and both are using two different tools.
Basics
-
Inclusivity first: no option should be set as the only way to contribute to the project. We must avoid any solution that would let someone out of the project.
-
There is no really working options to share proprietary formats betweens applications. For instance, Figma knows how to open sketch file, but it does not render it as good as it was in sketch (not even talking about font). Sketch is unable to render figma files. Invision Creator has not been tested yet, as all the future tools.
-
The only graphic format that stay editable is SVG. With the issues that the way it's exported from different applications are not totally set. For example, figma export the text as shapes, which means that you can not edit it anymore, you need to delete the text to add the new one -- also, it seems to be a bug that figma is trying to solve on their next svg export tool.
Options
For now, three options are on the table:
- A shared folder with all the assets, ordered by atomic level, as svgs.
- A different asset library for each different tool we'd like to use (for each tool, a designer has to maintain the library and make it accessible).
- A tool used as a hub so we can share mockups and specs from different toolset in the same environment (@AlexPricop talked about https://zeplin.io as a tool to share the mockups from sketch/adobe tools/figma and let developer inspect the code). Zeplin only works on OSX and Windows but the idea would be to have a tool that let you share the documentation of all design with your developer.