Carbon Coverage Figma Plugin ☂️

[RichKummer]

The problem

A recurring challenge is connecting a particular design to development. Some teams create custom coded elements instead of using Carbon code directly.

The solution

A custom Figma plugin that acts as a design linter, displaying the components and patterns used within a design and aiding with hand-off to development.

Carbon contacts

• Eliad Moosavi (development)
• Rich Kummer (design)

Preliminary tasks

Beta Give feedback

1. Carbon coverage: Linting plugin functional exploration #16550
   area: AI4UX role: dev 🤖 +2
   
2. Identify if CDN links can be pulled in to plugin modal #16500
   area: AI4UX role: dev 🤖 +2
   
3. Identify bringing in IBM Plex to the plugin #16499
   +0
   
4. Collect Figma plugin coding resources #16342
   role: design ✏️ +1
   
5. Identify meaningful information to surface in Figma
6. Identify product specs for testing
7. Identifying the Figma library origin to scope to correct kits
8. Can web components be leveraged in the plugin modal

Phase 01: Core functionality

Design

Beta Give feedback

1. Carbon coverage: Plugin user testing prep #16986
   4 of 4
   role: design ✏️ +1
   
2. Carbon coverage: User testing rd 1 #17069
   4 of 4
   role: design ✏️ +1
   
3. Carbon coverage: Installation session #17299
   3 of 3
   role: design ✏️ +1
   
4. Carbon coverage: User testing rd 2 #17162
   7 of 7
   role: design ✏️ +1
   
5. Figma Carbon coverage plugin design exploration I #16692
   4 of 4
   area: AI4UX role: design ✏️ +2
   
6. Carbon coverage: Discussion with Design Principal #17318
   3 of 3
   role: design ✏️ +1
   
7. Carbon coverage: Feedback session #17343
   3 of 3
   role: design ✏️ +1
   
8. Carbon coverage: Refine message language and options #17599
   role: design ✏️ +1
   
9. Carbon coverage: Add message to check libraries #17635
   role: design ✏️ +1
   
10. Carbon coverage: Feedback link #17945
    role: design ✏️ +1
    
11. Carbon coverage: 100% covereage state #17946
    role: design ✏️ +1
    
12. Carbon coverage: Create Airtable feedback form #18013
    role: design ✏️ role: dev 🤖 +2
    

Development

Beta Give feedback

1. Carbon coverage plugin functional exploration #16549
   2 of 2
   role: dev 🤖 +1
   
2. Carbon coverage: Linting plugin functional exploration #16550
   area: AI4UX role: dev 🤖 +2
   
3. Connect Icon library IDs to Carbon coverage plugin #17161
   role: dev 🤖 +1
   
4. Carbon coverage: Add tab structure #17344
   role: dev 🤖 +1
   
5. Carbon coverage: Connect component and token IDs #17068
   3 of 3
   role: dev 🤖 +1
   
6. Carbon coverage: Detect detached component from v11 libraries #17638
   role: dev 🤖 +1
   
7. Carbon coverage: Add message to check libraries #17636
   role: dev 🤖 +1
   
8. Carbon coverage: Refine message language and options #17703
   role: dev 🤖 +1
   
9. Carbon coverage: Add Carbon alpha charts tokens #17704
   role: dev 🤖 +1
   
10. Carbon coverage: Ensure selection is scoping the scan #17637
    role: dev 🤖 +1
    
11. Carbon coverage: Feedback link implementation #17947
    role: dev 🤖 +1
    
12. Carbon coverage: 100% coverage state #17948
    role: dev 🤖 +1

Phase 02: Hide functionality

Hide functionality

Beta Give feedback

1. Carbon coverage: Address storage issues #17178
   role: dev 🤖 +1
   
2. Carbon coverage: Persistent issues on hide #17214
   role: dev 🤖 +1
   
3. Carbon coverage: Start Acceptance criteria for hidden items #17216
   role: design ✏️ +1
   

Phase 03: Snapshot

Future work

Beta Give feedback

1. Carbon coverage: Connect Effect styles to plugin #17078
   role: dev 🤖 +1
   
2. Carbon coverage plugin: Explore multiple elements in a single item
3. Carbon coverage plugin: Providing specific suggestions on how to bring design into Carbon compliance
4. Carbon coverage plugin: AI enhancement to automatically suggest and complete updates
5. Carbon coverage plugin: Consider mapping links from plugin components to documentation/Storybook/repo.
6. Carbon coverage plugin: Explore highlighting the corresponding issue element on hover
7. Carbon coverage plugin: Add color theming based on Figma settings
8. Carbon coverage plugin: Providing additional help on grid usage