32

AMA: The team behind Adobe's design system, Spectrum

over 4 years ago from , Director of Experience Design - Brand & Experience

We’re the Adobe Design team that builds and maintains Spectrum, Adobe’s design system. We provide tools and guidance to foster consistent design across Adobe’s entire ecosystem, which spans dozens of products on desktop, mobile and the web. We support products that are brand new and products that are nearing three decades in market. Our product ecosystem presents a unique combination of challenges that we’ve learned a lot from over the last few years.

We recently published a series of stories on how we’ve been building the system, evolving our team, and collaborating with others:

We brought a cross-section of the overall team to DN today (from 9 AM to 4 PM PDT) to take your questions:

  • Shawn Cheris is a Director of Experience Design. In addition to the Spectrum team, he runs a number of centralized teams including Brand, Icons, Content Strategy, Inclusive Design, and Developer Ecosystem.
  • Mathieu Badimon manages the Spectrum Design team which includes Lindsay Brown, PJ Buddhari, Patrick Steele, and Nate Baldwin.
  • Garth Braithwaite is part of the Spectrum Engineering team and has played a major role in a number of projects, including our open source CSS project, Spectrum CSS.
  • Veda Rosier is the Adobe Spectrum product manager. She helps the team stay strategic and helps us stay on course and make intelligent decisions about what to do next.
  • Andy Welfle manages our Content Strategy team and provides the Spectrum team with thoughts on how to design with words.

Do you work on design systems? If so, what’s been your experience? Please leave your questions or comments below. We look forward to talking with you.

Thank you, The Spectrum Team

21 comments

  • Cassie McDaniel, over 4 years ago

    Clearly Adobe is in the design business. :) What does the Spectrum team see as the impact of releasing this design system on the industry as a whole? How do you think other corporate systems (like Material Design) have changed the industry?

    10 points
    • Garth BraithwaiteGarth Braithwaite, over 4 years ago

      First and foremost, we hope this positively impacts internal and third-party developers to ensure Adobe’s product ecosystem is serving designers and engineers working on our products and extensions.

      Corporate systems have certainly changed the industry and influenced the evolution of design systems. They provide a common platform for design and engineering to create cohesive and intuitive products, and they have also helped to provide insight and inspiration for others. Design systems aim to solve very complex problems in terms of design, engineering, process, resources, and more. Seeing what large companies do and how they try to answer these common problems helps the community as a whole better understand the issues and potential solutions.

      6 points
    • Shawn Cheris, over 4 years ago

      I'll take that in reverse order. First off, Google. We were actually a couple of years into our work on Spectrum when Material came out. Speaking for myself, I feel like the Material Style Guide was a huge Design Achievement on it’s own terms. And I think the language itself did a really admirable job solving for it’s area of focus: (mostly) lightweight apps on Android on a phone or tablet. We met with the Material team a number of times in the early days and I think we all found we had a lot in common in terms of how we thought about the work and the experience of selling something like that to a big company.

      That said, sometimes we’re pretty jealous of companies who are solving design systems in a more focused, specific way. It’s great that you solved for your one app across three platforms with a brand new tech stack, but that’s NOT the kind of problem we are dealing with. We’re dealing with 100+ products across six surfaces, three(+) customer verticals and dozens of code bases spanning decades.

      But that unique challenge has forced us to solve our needs with some uniquely abstract approaches. And Adobe is a company that makes design tooling, too. So I think you’ll start to see some of what we’ve learned make its way into products like Xd very soon.

      Releasing the Spectrum language is mostly about empowering our developer community and business partners to more easily build plugins, extensions, and integrations and to bolster our growing platform for developers. We also hope that designers might find value in some of the tough problem we’ve solved for, but we don’t have millions of people building stuff on Adobe’s platform (yet!).

      10 points
  • Garth BraithwaiteGarth Braithwaite, over 4 years ago

    Here's an article introducing the Spectrum Design System. It was written about a year ago but gives some good insight into its origin and the motivations behind it. https://theblog.adobe.com/introducing-spectrum-adobe-building-design-system-scale/

    8 points
  • Andy WelfleAndy Welfle, over 4 years ago

    A hotdog: is it a sandwich?

    5 points
  • Thomas Michael SemmlerThomas Michael Semmler, over 4 years ago

    I think I'm too late to this. I wish there was a different way to get information about AMA's besides regularly checking the website, which I only do once a day. I'll ask anyway, maybe someone is interested in answering it.

    Adobe Products are notorious for breaking continuity when switching from app to app. When you switch from PS to XD, to Illustrator to Animate, even the smallest micro interactions are different, like picking a color. Even more so, if you finally learned the new way that specific app is doing it, you immediately have to relearn it because the tablet or mobile version of that app has yet another way of doing it.

    So my question is, in a world where adobe is losing their clients left and right to competitors, does a design system really have the power to unify experiences to emphasize on the one USP, the Cloud Structure, Continuity, seamlessly going from one app to the other? Do you even have the development resources for that? Or do you only plan to unify new applications?

    4 points
    • Stuart McCoyStuart McCoy, over 4 years ago

      I really do hope they come back and answer your question. I've always wondered why Adobe never started developing a common codebase for their developers to handle common functionality across apps.

      0 points
      • Shawn Cheris, over 4 years ago

        We do have common codebases across many of our apps, but keep in mind that some of them have been in market for decades. And also there's a lot more UI in those flagship apps than you think. Even if you have a common front end framework established, the time and manpower it would take to re-implement something like Photoshop from scratch is at least an order of magnitude more complex than most people realize. And that work would come with a trade-off of not being able to do other work. There's a balance, and it's something that's always being evaluated.

        In the meantime, the Spectrum team, and the Design team at large, are always working to move the overall experience in the right direction.

        0 points
    • Nate BaldwinNate Baldwin, over 4 years ago

      We have several teams working together to integrate a single source of truth for Spectrum across multiple platforms, including Web, Android, iOS, MacOS, UWP, and many of our home-grown frameworks used in existing products. When you work with a big ship like Adobe, turning it takes time and is done incrementally. So while it may still seem that there are major inconsistencies, we’ve made tremendous headways in unifying our experiences across products (both old and new) and across devices. It takes a community to move a mountain, which is why our team is so focused on collaboration as an integral part of our design system strategy.

      0 points
      • Shawn Cheris, over 4 years ago

        Thanks for the question. It's true that Adobe has traditionally not been afraid to let different product teams handle interactions like a color picker in different ways. In some cases this is due to tradition within the individual product and in some cases it's because a new product might want to do something in a way they have found optimal for their particular user base. But that can, as you point out, be frustrating at times for users of multiple products. It's a balance.

        With new apps, we're taking the opportunity to have fresh conversations amongst all of our designers, product managers, and users about the best path forward. You can see this in the new app frame that products like Lightroom CC and Premiere Rush are using, and in the upcoming Photoshop for iPad. It's funny that you mention color pickers, because that's a specific pattern that has been given a lot of attention. Font pickers, too.

        It's likely that as we learn from these new common patterns, you'll see some of that make it's way into the existing flagship apps. But we've found in talking to our existing users that there's a careful balance to be made between making big unilateral changes and keeping the UI that they're familiar with and use to do their jobs. One seemingly small change, even for the better, can result in tons of productivity lost in the creative industry.

        2 points
        • Thomas Michael SemmlerThomas Michael Semmler, over 4 years ago

          Thanks for the answer - but I wonder if it is ultimately a problem in the target audiences. Someone who is using Animate to animate a little animation to be published as a video actually can invest the time it needs to learn completely different interactions to similar UI Problems, because they need to learn it anyway. But for me, I just want to animate an SVG and export it on a web project - and this is basically impossible for me. I ended up animating it by hand with CSS, because the way Animate works and thinks is so entirely different from the way that animations on the web work, that it would have taken me a considerable amount of time just to learn the basic concepts. As a UI engineer, I just don't have the time for this.

          Another example is defining Colors via libraries. I do my UI Design in Sketch, but all our Print Design and Images for Social Media or other types of Content are created by another department in photoshop, illustrator and indesign. So we have created a library for the colors. Turns out, nobody truly thought of how you handle Swatches in Libraries that have slightly varying RGB & CMYK / Pantone Variants. There is no 1:1 conversion from rgb to cmyk and usually designers define specific colors for those versions. Why is there no option to define different color space versions for swatches in libraries? The fact that this has not been brought up apparently by other people, also seems to me that multidisciplinary professionals have started to move on from the creative cloud to other solutions. And it also seems that adobe does not care that much about it - many efforts, and imho Spectrum too, try firstly to appeal to the non-professional target audience, which sometimes means stripping complexity, or flattening the initial learning curve by hiding more complex features in old menus and deep interactions or keyboard shortcuts.

          Is there a conflict in priorities, especially when it comes to Spectrum, in setting priorities to support very different target audiences?

          1 point
  • Jamie Diamond, over 4 years ago

    Just starting to look at this, and it looks wonderful.

    How do you plan on scaling this system to high-density professional applications, where breathing room isn't a luxury, like the production suite apps, and even the likes of some of the high-impact creative apps (Photoshop/Illustrator)?

    4 points
    • Shawn Cheris, over 4 years ago

      Great question.

      First, We've already applied a lot of Spectrum elements like colors to our flagship apps like Photoshop and Illustrator, and obviously those apps are more dense and have different needs. But if you look at how those apps looked five years ago and today, the Spectrum influence will be unmistakeable. We're looking at a second round of work on those apps now and those teams are doing a ton of work to make them ready for bigger UI shifts.

      But we're also investing as a company in new apps like Photoshop for iPad, Lightroom CC, Premiere Rush, and other apps that we announced at MAX last year. These apps have a lot of the power of their traditional desktop counterparts, but from their inception, the overall organization of the app has been considered with Spectrum in mind. We're using a lot more progressive disclosure and modality instead of just throwing every panel in the world at you all the time.

      Xd is like this, too... the property inspector in Xd only ever shows you what you need at any given moment. So even though there's a ton of power there, we're selective about what you see and when.

      From the beginning, Spectrum was designed to not only give us a North Star to aim for with new apps (some of which you're seeing now), it also considered what we'd need to do to start modernizing our existing flagship apps.

      2 points
    • Garth BraithwaiteGarth Braithwaite, over 4 years ago

      One of the benefits of systemizing design is that it allows us to introduce various “levers” we can turn on and off for multiple purposes. One thing we’re working on is the option of density for our components, which would allow products that need to utilize more screen real estate to do so where appropriate.

      1 point
    • Garth BraithwaiteGarth Braithwaite, over 4 years ago

      There are 3rd party developers who are working on plugins for Photoshop and Illustrator who have been requesting this in Spectrum CSS on this GitHub issue.

      1 point
  • Shawn Cheris, over 4 years ago

    Note: For those of you adding questions or comments after 5pm PDT, we will respond during the following workday (most of our team is based in San Francisco). Thanks and have a good day or night!

    1 point