Designer documentation?

[ninavizz]

Hello!

I'm a designer, working with a team seeking to adopt Spectrum. Everything I'm able to find thus far online, is developer documentation; either guiding developers in how to implement within Spectrum's code/token conventions, design governance that is highly generalized (and I would want to stray from in places, anyway), or guidance for designers with development skills seeking to contribute to Spectrum (so, developers).

What I'm not able to find, is the plain-language/explicit "Here's how pages get composed within the system" (more specifically than just "Flexbox" or "Grid") or "Here's how organisms are built from atoms and molecules." Conceptually via Principles, yes—but tangibly for designers seeking specific "Here's what your options are," no. Even just dissections of composed pages so we could connect-the-dots on how to do dynamic or static page layouts, a 1:1 table showing pixel values (or percentages?) to size tokens, etc.

There's a missing bridge between myself and my developer that I'm looking to close—is the TL;DR. I want to be able to hand them completed work in Figma that they can quickly and easily work from, without trying to re-invent wheels; and that's likely to result in coded pages that I'll both recognize and request few changes to, in first-pass reviews of their coded product.

I'd love some guidance, if there is any.

Thx!

• nina

[dannify]

Have you already visited the Spectrum Design website?

[ninavizz]

Yes @dannify. I have visited the many Spectrum sites, multiple times; and already spent several hours looking for something, anything, written for designers that don't work directly with Javascript or speak code.

"Principles" are fine, but they don't tell me the system expects allen screws when I design with phillips heads, to use an analogy. The abstraction of no real numbers mapping to size (font/spacing/lineheight) tokens also makes it harder. The Patterns section also doesn't speak to Patterns, but rather micro-organisms or Molecules. And, that section appears to be just getting started.

[ninavizz]

Question @dannify: has your team done user research with designers that don't code and do not work for Adobe or use XD, on the usability of Spectrum's documentation for use in our work? That feels missing.

I'm a 20yr UX veteran, and have built many design systems; and Spectrum feels more Marketing, design strategy, and developer informed, than "I'm trying to build production-ready stuff from this that leaves little room for interpretation, or needs for customization." I also have no FE devs supporting my work, which is why the backend dev implementing my work feels Spectrum could be a helpful resource.

I'd still love some help, thx!

[allisonacs]

Hi @ninavizz, thanks letting us know. We understand you're having trouble parsing the system without access to actual design assets, which makes sense! We don't currently offer open sourced design files outside of what's available for XD, although you may be able to find community Figma libraries.

Regarding our documentation site, our teams are currently focused on Spectrum 2, so we don't have any roadmapped updates to our existing documentation, but we do appreciate the feedback. That said, your message helped us surface a bug in our current site—we do actually have some of the information you're looking for, but it's currently hidden. We've logged the bug, and in the meantime, here are links to:

• spacing tokens and values
• responsive grid
• font size tokens and values

[ninavizz]

@allisonacs Ohhh my goodness, those are exactly the pages I have needed, the most. Yeah, I'm using a community Figma file, right now, but it's very limited. The sizing tokens, grid, and type stuff will help enormously. TY!! :)