Adopt

5 surfaces

Surfaces

Integrations

Strategy & Discovery

2
VistalyProductboard

Research & Insights

1
Dovetail

Knowledge & Docs

1
Notion

Design

1
Figma

Analytics

1
PostHog
DesignBeta

Coming from Figma

40% entity overlap

Import

Figma files and frames become design_spec and screen nodes: your designs connected to the features they express.

The structural finding

Figma is the primary integration surface for UPG's design domain. Files map to design_spec nodes, frames to screen nodes, components to ui_component nodes. The key link: a screen node connected to the feature it implements closes the design-to-delivery chain.

What UPG adds

1

Design traceability: every Figma frame connected to the feature and user story it implements.

2

Component inventory: Figma components become ui_component nodes, queryable across your design system.

3

Research connections: link screens to the personas and user needs that shaped their design decisions.

Schema mapping

Direct matches
Component / ComponentSet→design_component
Variable / Style (semantic)→design_token
Frame (screen-sized)→screen
Frame (wireframe-labelled)→wireframe
File (component library)→design_systemOnly when file is classified as a design system
Maps with caveats
Page (flow-themed)→user_flowOnly when page is a named user flow
DevResource→annotationLink from frame to code/docs, loose match
Prototype interactions→prototypeNot a first-class Figma API object; encoded in node.interactions
What UPG adds
opportunityhypothesisfeatureoutcomepersonauser_research
Skipped:Auto-layout properties · Vector node fills/strokes · Webhooks · Prototype transitions

The key edge

The single most important semantic relationship this integration enables.

feature_expressed_by_screen

Defined in the UPG specification

Sample import

Figma design system: Components + Variables + Screens

Input (from Figma)
Output (UPG nodes)
Component
Button / Primary
→
design_component
Button / Primary
↳ design_system_contains_design_component
Variable (design token)
color/surface/primary
→
design_token
color/surface/primary
↳ design_component_styled_by_design_token
Frame (screen)
Dashboard: Overview
→
screen
Dashboard: Overview
↳ feature_expressed_by_screen
Page (flow)
Checkout Flow
→
user_flow
Checkout Flow
↳ user_flow_routes_through_screen

Roundtrip

MCP-POWERED LOOPPlanned
Figma ──import──▶ UPG ──enrich──▶ UPG ──write back via MCP──▶ Figma

Import design components → link to UPG features and stories → write Code Connect mappings back to Figma.

Writes back
  • ·Code Connect mappings linking Figma components to UPG feature nodes
  • ·UPG node IDs as Figma component annotations for traceability
  • ·User story context surfaced in Figma component documentation

Powered by the figma MCP server

How to import your Figma data

Via the CLI (coming soon)

The Figma adapter is built and tested. A one-command import via the UPG CLI is in development:

npx unified-product-graph import --from figma

This will fetch your Figma data, map entity types automatically, and write everything to your graph. Today you can use the Markdown import or the adapter directly in code.

▸ For developers: use the adapter directly
import { FigmaAdapter } from '@unified-product-graph/adapters'
// Pass pre-fetched Figma data as SourceItem[]
const adapter = new FigmaAdapter()
const result = await adapter.convert(items)
// result.nodes → typed UPG entities
// result.edges → canonical relationships
// result.warnings → items needing review

Get started

The Figma adapter ships in @unified-product-graph/adapters. Install it, then run the import command.

# one-time install
$ npm install -g unified-product-graph

# then import
$ upg import --from notion

Other tools in Design

← All integrations