Carbon coverage: Discussion with Design Principal

[RichKummer]

To better understand designer needs with the Carbon coverage plugin, we want to run a feedback session with Luke Firth. We will provide background on the plugin, walk through the designs, and gather feedback.

Tasks

Preview Give feedback

1. Schedule session
2. Run/record feedback session
3. Collect feedback notes

[RichKummer]

Discussion with Luke Firth 09/03/24

• Biggest flaw I see is that very few teams use pure Carbon v11 kit. They often are using various PAL kits or specialized kits.
• Work with a team of 55 designers, and 200 designers if looking at the larger team structure.
• This team in Sustainability uses a specialized Figma library that pulls in certain Carbon components. The idea is to closely align the code framework (Graphite) with the design kit. Since not all Carbon components are used, their specialized kit only consumes the proper Carbon components that are okay for designers to use.
• Called out wanting to know if component is detached.
• For snapshot, gravitated towards the progress bar with percentage. If going this route, however, would change the color of the progress bar to blue without any changes for low/medium/high compliance.
  • Make language more neutral in the readout here. Do not use “this file can be improved”, instead find a neutral way to say it. This is because the plugin might highlight something that is actually okay.
  • In the future, could see an option to show a bar breaking down all the kits used in this file – ex. 54% Carbon v11, 23% Carbon for IBM Products, etc. More important than that is just knowing what is a legitimate component/token to use vs not legitimate.
• Sees value in "hidden" feature, but disagrees with the name.
  • Should be less "hide" or "ignore" and more acknowledging that this issue is actually okay, or putting this on an "exception" list. Could also be "vouch for" or "mark as exception".
  • Definitely wants to see a list of all the issues that were made an exception. As a lead, would find it useful to see what was made an exception in the file.
  • When marking an issue as an "exception", wondering if a designer might not understand that what they're really saying is to not worry about this item, it's actually okay. Consider something where the designer marks something as an exception, and gets a flyout asking them to explain why. Maybe have options for "detached to update design", or "using another Carbon kit", etc. Might consider keyboard shortcuts to make this faster. (Maybe this is a first-time experience to help tell the user how the "mark as exception" interaction works?)
• When it comes to components vs tokens, color and type tokens are more important to ensure they are connected properly.
  • Components can have many variations, but color and type tokens are fundamentals that need to be on point.
• This tool is useful in the short term if it focuses on color and type tokens.
  • In the long term, this plugin becomes much more useful when it can detect more than the Carbon v11 All themes kit. Even better if the designer can select which kits to detect per scan.
• This plugin is timely because we’re hiring designers that can have varying levels of familiarity with Carbon. Give leaders a tool to work with designers of those varying degrees of familiarity.
  • Leaders can help determine what the designers need to work on.

Background on Graphite Figma kit

• Kit the team is using is for the Graphite application framework in Sustainability that makes use of Carbon and other components.
  • A dev could use a drag and drop tool to build a product.
  • Team needs the Figma kit and framework to be closely aligned.
  • Right now the kit and the code are on v10. Designers need to be using v10. When code side is updated to v11, then they’ll update to v11 on the design/kit side.
  • Kit uses select Carbon components, but not all. So it shows everything that is okay to use, and nothing else. Ex. they only use 3 button sizes but not all.
  • Might be interested in selecting in the plugin what kits to test against.