What does a world class design toolkit look like?

[heyjoethomas]

Question

As we look to find new ways to support product teams I have been asking myself "what does a world class design toolkit look like?" I think we have made really good strides this year but I think there is a lot of room left to grow and areas to improve.

I would love your thoughts on what this might look like. Some questions worth considering:

1. What tools are in the toolkit?
2. What is not in the toolkit?
3. How is it organized?
4. How does it make collaboration with developers easier?
5. What attributes does it have?
6. What does it prioritize?

Some of my thoughts

• Docs on how to get started/use the file effectively
• Props and variants that map to React props
• Easy to contribute to
• Mix of tool and education platform
• Figma library uses latest techniques and features
• Always in sync with React library
• Syncs with a defined single source of truth. Content or metadata doesn't have to be authored maintained separately but is dynamically pulled in from source of truth.
• Is accessible by new hires and veteran Shopifolk alike.

[johanstromqvist]

Beautiful!

One thought that comes to mind is: How can we keep tools and docs simple and DRY, and then surface content in-context dynamically? E.g. what information might builders need in VSCode or Figma? Where does that information live? When do they need it? How is it pulled? How can we present it with timeliness and high relevance?

Examples between tools

• Polaris for VSCode showing related patterns when interacting with a certain component
• Polaris for Figma showing a list of best practices when interacting with a spinner component

Examples between places on the website

• A component page (e.g. button) highlighting content design guidelines (that is not button-specific)
• A pattern page (e.g. layout patterns) leveraging/cross-linking to our design foundations (such as the spacing framework)