Figma Design System Context Capability

naftiko: 1.0.0-alpha2
info:
  title: Figma Design System Context Capability
  description: A capability that consumes Figma design system (files, components, tokens) and exposes the design-system context as REST + MCP tools so AI-assisted UI work in Copilot/Claude grounds against the actual brand library instead of hallucinating component names.
  tags:
  - Naftiko
  - Figma
  - Design System
  created: '2026-05-01'
  modified: '2026-05-04'
binds:
- namespace: figma-env
  description: Figma personal access token or OAuth bearer with file_read scope.
  keys:
    FIGMA_TOKEN: FIGMA_TOKEN
capability:
  consumes:
  - namespace: figma
    type: http
    baseUri: https://api.figma.com
    authentication:
      type: bearer
      token: '{{FIGMA_TOKEN}}'
    resources:
    - name: file
      path: /v1/files/{{file_key}}
      operations:
      - name: get-file
        method: GET
        inputParameters:
        - name: file_key
          in: path
          description: Figma file key (from the file URL).
    - name: components
      path: /v1/files/{{file_key}}/components
      operations:
      - name: list-components
        method: GET
        inputParameters:
        - name: file_key
          in: path
    - name: component-sets
      path: /v1/files/{{file_key}}/component_sets
      operations:
      - name: list-component-sets
        method: GET
        inputParameters:
        - name: file_key
          in: path
    - name: styles
      path: /v1/files/{{file_key}}/styles
      operations:
      - name: list-styles
        method: GET
        inputParameters:
        - name: file_key
          in: path
    - name: variables
      path: /v1/files/{{file_key}}/variables/local
      operations:
      - name: list-local-variables
        method: GET
        inputParameters:
        - name: file_key
          in: path
  exposes:
  - type: rest
    address: 0.0.0.0
    port: 8080
    namespace: figma-design-system-context-capability-rest
    description: REST API exposing a unified Figma design-system context for a given file.
    resources:
    - name: design-system
      path: /design-system/{{file_key}}
      operations:
      - method: GET
        name: get-design-system-context
        description: Return components, component sets, styles, and local variables for a Figma file as a single design-system snapshot.
        inputParameters:
        - name: file_key
          in: path
          type: string
          description: Figma file key.
        call: figma.get-file
  - type: mcp
    address: 0.0.0.0
    port: 3010
    namespace: figma-design-system-context-capability-mcp
    description: MCP server exposing the Figma design system as grounded context for AI coding agents.
    tools:
    - name: get-design-system-context
      description: Fetch components, component sets, styles, and design tokens (local variables) for a Figma file so an agent can ground UI suggestions against the real brand library.
      hints:
        readOnly: true
      inputParameters:
      - name: file_key
        type: string
        required: true
        description: Figma file key.
      call: figma.get-file
    - name: list-components
      description: List all published components in a Figma file (name, key, description, containing_frame).
      hints:
        readOnly: true
      inputParameters:
      - name: file_key
        type: string
        required: true
      call: figma.list-components
    - name: list-styles
      description: List color, text, effect, and grid styles defined in a Figma file.
      hints:
        readOnly: true
      inputParameters:
      - name: file_key
        type: string
        required: true
      call: figma.list-styles
    - name: list-local-variables
      description: List local variables (design tokens) defined in a Figma file. Requires Enterprise plan.
      hints:
        readOnly: true
      inputParameters:
      - name: file_key
        type: string
        required: true
      call: figma.list-local-variables
  - type: skill
    address: 0.0.0.0
    port: 3011
    namespace: figma-design-system-context-capability-skills
    description: Agent Skill bundle that gives Claude Code or Copilot grounded access to a Figma design system.
    skills:
    - name: figma-design-system-context-capability
      description: Ground UI generation against a real Figma design system rather than hallucinated component names.
      location: file:///opt/naftiko/skills/figma-design-system-context-capability
      allowed-tools: get-design-system-context,list-components,list-styles,list-local-variables
      argument-hint: 'Use when generating or refactoring UI code that should match an existing Figma design system.'
      tools:
      - name: get-design-system-context
        description: Unified design-system snapshot for a Figma file.
        from:
          sourceNamespace: figma-design-system-context-capability-mcp
          action: get-design-system-context
      - name: list-components
        description: List published components.
        from:
          sourceNamespace: figma-design-system-context-capability-mcp
          action: list-components
      - name: list-styles
        description: List color/text/effect/grid styles.
        from:
          sourceNamespace: figma-design-system-context-capability-mcp
          action: list-styles
      - name: list-local-variables
        description: List local variables (design tokens).
        from:
          sourceNamespace: figma-design-system-context-capability-mcp
          action: list-local-variables