figma-d3-react-ts_skill

Overview

This skill guides building pixel-perfect D3.js visualizations as React/Next.js components that match Figma designs exactly. It documents the end-to-end workflow: extract design details from Figma, map D3 patterns from examples, implement with TypeScript in either imperative (useRef+useEffect) or declarative (JSX+hooks) styles, and validate visually with Playwright. The focus is precision: exact fills, masks, gradients, spacing, accessibility, SSR compatibility, and performance.

How this skill works

First, extract the chart node and every shape atom from Figma (screenshots and design contexts) to capture exact fills, gradients, masks, textures, and blend modes. Next, research an appropriate D3 reference example for scales, generators, and interactions. Combine the D3 math patterns with the Figma styling values and implement as a React component in TypeScript, choosing imperative DOM control when complex interactions or force simulations are required. Finish by iteratively building and visually validating with Playwright until the component matches the Figma screenshot.

When to use it

• Creating interactive charts, graphs, network diagrams, or geographic maps that must match Figma exactly.
• Building reusable chart components in React or Next.js with TypeScript typing and SSR considerations.
• Implementing texture/gradient/mask-heavy fills that require inspecting Figma layer structure.
• Adding advanced interactions: zoom, brush, drag, transitions, or force-directed layouts.
• Optimizing performance for many elements (>1000) or exporting accessible SVG markup.

Best practices

• Always extract shape atom design context from Figma; never assume solid fills.
• Use D3 for math (scales, generators, forces) and React for rendering unless DOM control is needed.
• Apply exact Figma values for colors, opacities, stroke widths, fonts, and gradient directions.
• Wrap imperative code in 'use client' and dynamic imports with ssr:false for Next.js when required.
• Validate visually in a build loop: Figma screenshot → build → Playwright screenshot → compare.
• Prefer SVG for fidelity and accessibility; switch to canvas only for very large counts.

Example use cases

• Pixel-perfect multi-line or area charts matching Figma gradients and masks.
• Force-directed graph component using D3 force simulation with React wrapper.
• Bar or grouped-bar charts with textured or tiled fills extracted from Figma.
• Scatter plots or bubble charts with radial gradients and glow filters from design layers.
• Heatmaps with precise color scales and masked textures preserved from Figma.