Add Figma Code Connect to all components

[georgewrmarshall]

Description

Expand Figma Code Connect integration to all components in the MetaMask Design System libraries (@metamask/design-system-react and @metamask/design-system-react-native).

With the initial infrastructure and AvatarAccount implementation now in place, we need to systematically connect all remaining components to provide complete design-to-code integration across the entire design system.

This will enable designers and developers to see real, working code examples for every component directly in Figma Dev Mode, with platform-specific implementations clearly differentiated.

Technical Details

• Foundation Complete: Figma Code Connect infrastructure is now established with:

  • Root-level dependency management
  • Platform-specific configuration files
  • Interactive and automated scripts
  • Comprehensive documentation

• Current State: Only AvatarAccount component is connected

• Target: Connect all ~20+ components across both React and React Native libraries

• Implementation Pattern: Follow the established pattern from AvatarAccount:

  // ComponentName.figma.tsx
  import codeConnect from '@figma/code-connect';
  import { ComponentName } from './ComponentName';
  import { ComponentEnums } from '../../types';
  
  codeConnect.connect(ComponentName, 'figma-url', {
    props: { /* prop mappings */ },
    example: (props) => <ComponentName {...props} />
  });

Acceptance Criteria

Phase 1: Avatar Components

• AvatarBase connected to Figma with size, shape, and children prop mappings
• AvatarFavicon connected with src and size mappings
• AvatarGroup connected with limit and children mappings
• AvatarIcon connected with name and size mappings
• AvatarNetwork connected with name and size mappings
• AvatarToken connected with name and size mappings

Phase 2: Badge Components

• BadgeCount connected with count and variant mappings
• BadgeIcon connected with name and variant mappings
• BadgeNetwork connected with name and variant mappings
• BadgeStatus connected with status and variant mappings
• BadgeWrapper connected with badge prop mappings

Phase 3: Button Components

• Button connected with variant, size, and children mappings
• ButtonBase connected with all button base props
• ButtonIcon connected with iconName and variant mappings

Phase 4: Form & UI Components

• Checkbox connected with checked and label mappings
• Text connected with variant, color, and children mappings
• TextButton connected with variant and children mappings
• Box connected with common layout props

Phase 5: Complex Components

• Icon connected with name and size mappings (handle large icon set)

Quality Assurance

• All components show platform dropdown (React/React Native) in Figma Dev Mode
• All examples use proper enum values instead of hardcoded strings
• All examples include required props for component to render
• Import paths correctly resolve to package imports
• Realistic example data used (addresses, names, etc.)
• Documentation updated with component connection examples

Automation & CI/CD

• Dry-run validation passes for all connected components
• Publishing workflow includes all new components
• CI/CD pipeline integration documented
• Unpublishing workflow tested for all components

References

• Initial PR: [Insert PR number] - Figma Code Connect Infrastructure & AvatarAccount Implementation
• Figma Design File: https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A-WIP--MMDS-Components
• Documentation: docs/figma-code-connect.md
• Figma Code Connect Docs: https://www.figma.com/code-connect-docs/
• Component Inventory:
  • React: packages/design-system-react/src/components/
  • React Native: packages/design-system-react-native/src/components/

Testing Commands:

# Interactive connection
yarn figma:connect:react
yarn figma:connect:react-native

# Validation
yarn figma:connect:publish:dry-run

# Publishing
yarn figma:connect:publish

Success Metrics:

• 100% component coverage in both React and React Native libraries
• All components display correctly in Figma Dev Mode
• Platform dropdown functionality working for all components
• Developer adoption metrics (usage in Figma Dev Mode)