test-ui-kit-n

Nike Podium Generic Design System — Figma Make Kit.

Production-ready React 18 components, design tokens, and React Flow node types for building marketing surfaces and pipeline / dataflow visualizations.

What's inside

• 47 design tokens — colors, spacing, radius, typography, elevation
• 4 components — Button (6 variants), Badge (8 variants), Tag, Card (5 variants)
• 10 React Flow node types — Base, Product, Category, Action, Metric, Decision, Start/End, Group, DataTable, PipelineTarget
• 4 edge types — Default, Animated (orange), Lineage (blue), Dashed (grey)
• Full Figma Make Guidelines at Guidelines.md + routed docs in /docs

Install

npm install test-ui-kit-n reactflow

Quick start

// 1. App root
import 'test-ui-kit-n/tokens.css';

// 2. Components
import { Button, Card, Badge } from 'test-ui-kit-n/components';

<Card variant="elevated" padding="lg">
  <Badge variant="orange">NEW DROP</Badge>
  <h2>Air Max Day</h2>
  <Button variant="accent" size="lg">Shop Now</Button>
</Card>

// 3. Pipelines (optional)
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';
import { nodeTypes, edgeTypes } from 'test-ui-kit-n/nodes';

<div style={{ height: 600 }}>
  <ReactFlow nodes={nodes} edges={edges}
             nodeTypes={nodeTypes} edgeTypes={edgeTypes} fitView />
</div>

See Guidelines.md for full usage rules and the docs/ directory for per-component / per-node specifications.

Build & publish

npm install
npm run build           # → dist/
npm publish --access public

To publish privately to a Figma-managed org registry, scope the package (e.g. @yourorg/podium-make-kit) and set the registry per Figma's Make Kit publishing guide.

Use in Figma Make

1. Publish this package to npm (public or your org's private registry).
2. In Figma Make, add the package as a Make Kit (Settings → Make Kits).
3. Figma Make's AI will read Guidelines.md first, then route to /docs/* on demand based on the user's prompt.

License

MIT