There’s a series of questions I’ve struggled with for as long as I can remember. The questions have to do with design systems work: Where should we document things? Do we make a separate app? Do we use a third-party tool to document our components? How should that tie into Figma or Sketch? What about written documentation? Should we invest a lot of time into making a giant Polaris-like wiki of how to build things?
The issue with all these tools and links and repositories is that it can become increasingly difficult to remember where to go for what kind of information. Designers should go here and engineers should go there — unless, of course, you’re an iOS engineer, then you need this special resource instead. It can be overwhelming and confusing for everyone that doesn’t live within the orbit of design systems drama and is just trying to ship a feature on time.
After years of struggling with these questions, I think my current advice to my past (and current) self is this: meet the people where they are. And where are most people asking questions about design systems, whether that’s a color variable or a component or a design pattern?
In Slack!
The other day I thought it would be neat to set up some Slackbot custom responses to do a rather simple thing. When someone types color me
into a channel, I all the color variables and their hex values are pasted. That way, no one needs to learn a new tool or bookmark yet another link.
Here’s how it works.
We first have to open up the settings of the organization you’re in and click the “Customize” item in this dropdown:

That pops open a new tab with the “Customize your Workspace” settings. If you select “Slackbot” from the options, then you can then see all of the custom responses that have been set up already. From there, we can create a new response like this:

That \n
is what breaks things onto a new line so that I can now test it out in a chat with myself once I’ve saved this:

Because this takes up so much darn space, I also made separate answers for each color, like blue
and purple.
But all of this has me wondering: how else can we use Slack — or whatever chat app or communication tool — to extend the cause of good design systems work?
I bet there’s a ton of other things we can do to improve our lives within tools like this and make design systems work even easier.
I’ve also lately started viewing Slack as a design resource centre. I’m currently writing a Slack app that integrates a publishing database called Consonance and I’m thinking of cloning this to create A Design Specifications API that can be called from Slack with slash commands.
I think an API and communication via slash commands is a much more viable choice! looking forward to hearing more about your project.
For us, we don’t sync the documentation with Figma but rather let Figma itself be the source of truth and keep our tailwind config in sync with it. Our component library then exposes both our Vue components and the tailwind config file.
What a great idea and it’s so simple to implement. Will definitely try it on a collaborative project that uses lots of colours.
Love this idea for mockups too.
mockup [site-name]
can spit out the links to the latest XD mockups. Very handy, thanks for the inspiration.