DesignPull

The bridge between Figma and code

// the_problem

Designers work in Figma. Developers work in code. The handoff is where things break — inconsistent spacing, wrong colors, missing states. Design systems help, but keeping them in sync is manual labor.

I needed a way to pull design tokens directly from Figma and push components back to the canvas — all within my coding workflow. No context switching. No copy-paste. No drift.

// the_insight

Figma has an API. Claude Code has MCP (Model Context Protocol). What if I could connect them?

I built a three-layer architecture: Claude Code at the top for AI-assisted workflows, Figma Console MCP as the data bridge, and a Desktop Bridge Plugin running in Figma to handle real-time operations.

Claude Code

Figma Console MCP

Desktop Bridge Plugin

// the_solution

DesignPull lets Claude write directly to Figma. Pull design tokens, push components, sync variables — all from the terminal. Zero context switching.

designpull · figma-mcp.ts

// Pull tokens from Figma canvas

import { figmaMCP } from '@designpull/core';

const tokens = await figmaMCP.getTokens{

scope: 'color/brand',

format: 'css-vars',

});

// Write component back to canvas

await figmaMCP.pushComponent{

name: 'Button/Primary',

tokens: tokens,

source: './src/Button.tsx',

});

// the_impact

I use this tool every day. It's live at designpull.dev. Version 0.4 supports token extraction, component creation, variable management, and real-time canvas updates.

This is what design engineering looks like — not just building interfaces, but building the tools that make building interfaces better.

← back