DSH to Figma
Bring Figma canvas tools into DeepSeek Harness.
Read and edit Figma with a native DSH plugin and an automatically paired canvas companion. Import once, then launch and work.
English · 简体中文
Quick start · Tools · Configuration · Verification
Why DSH to Figma
- Native DSH integration. Tools, design skills and image attachments use the host's extension points. No agent-loop fork is required. Supported DSH cores: 0.2.0-rc.2 and 0.2.1-rc.2.
- Editable design work by default (
local). The companion executes public Figma Plugin API scripts inside the selected document. Create and update frames, text, auto layout, components, variants, styles and variables.
- A design-to-code workflow. Inspect the layer tree, layout, CSS and assets, then let the host agent implement them in the current workspace.
- Visual feedback. Receive canvas screenshots through DSH's native image attachment path. A text-only model receives an explicit diagnostic instead of a pretend visual review.
- No token copying in the recommended setup. DSH generates your private, paired Figma plugin automatically. Start it in a file to connect; one connected file is selected automatically. Official desktop MCP remains an optional reading/screenshot mode.
0.2.1 verified in Figma Design mode: automatic pairing, single-file binding, native frame/text creation, independent readback and update, screenshot and PNG export all passed through an installed DSH conversation. This version fixes the Figma sandbox startup failure found in 0.2.0. See actual results and image.
Examples
Read and screenshot with official desktop MCP (optional)
In a DSH Work conversation, provide a link to a frame in the open Figma file:
Use the official desktop MCP. Check figma_status, read this frame’s metadata, and return a screenshot. Do not modify the canvas.
The real run returned 10 official tools, backend: desktop, available: true, and bridgePort: null. get_metadata read DeepSeek Harness — Desktop UI, node 1:4, 1440 × 900, including its Sidebar and Main layers. get_screenshot returned a 1024 × 640 WebP, stored as a native DSH image attachment and displayed in the conversation. The image below is that actual MCP result; no canvas changes were made.
Actual screenshot returned by official desktop MCP through DSH
Rebuild a screenshot as editable Figma UI (local mode)
This writing example uses backend: local and the running companion. Version 0.2.0 simplifies its setup with automatic pairing. Provide a reference screenshot in DSH, select the target frame in the connected Figma file, and describe what to draw:
Recreate this UI on the frame I selected. Draw only the UI.
1. Reference and instruction in DSH. The request uses a screenshot of the DeepSeek Harness desktop app. The agent identifies the selected frame and plans a 1440 × 900 UI reconstruction without the surrounding desktop background.
Reference screenshot and natural-language instruction in DSH
2. Editable result in Figma. The result contains the sidebar, conversation area and message composer. Figma's layer panel shows separate text, frame and vector layers; the selected frame measures 1440 × 900. These elements can be selected and refined in Figma.
Reconstructed desktop UI with native layers and a 1440 by 900 frame in Figma
These screenshots were supplied by the maintainer from an actual run on 2026-10-18. They demonstrate this screenshot-to-UI case; they are not a pixel-perfect comparison or verification of every tool and editor mode.
How it works
flowchart LR
A[DSH tools + skills] -->|default: local| B[Authenticated bridge :3055]
A --> C[Private paired companion package]
C -->|import once| D[Figma companion]
D <--> B
D --> E[Editable canvas + screenshots]
A -. optional: desktop .-> F[Official reading + screenshots :3845]
A -. optional: remote .-> G[Official remote MCP + approved OAuth]
DSH prepares a private companion directory and ZIP in <DSH_HOME>/figma/ on local-mode startup. Import its manifest into Figma once. Each time you run DSH to Figma · Local, it connects automatically to this DSH host. Keep its window open. No remote OAuth or personal access token is needed.
The private package contains a local credential; keep it on your machine. Public distribution packages contain no credentials. The bridge remains authenticated and loopback-only; automatic pairing does not expose an unauthenticated token endpoint. Idle connections retry automatically, but interrupted canvas operations are never replayed.
Quick start
1. Install the DSH bundle
Prerequisites: Git, a supported DSH host and Figma desktop for development-plugin import. Use the Node version required by the host; repository development uses Node 24+. Tested DSH cores: 0.2.0-rc.2 and 0.2.1-rc.2. Local mode uses Figma’s Plugin API, not the paid desktop MCP seat entitlement; normal account, file-edit and editor permissions still apply.
This repository is the distribution source; the package is not published to npm. Clone it and install the local folder:
git clone https://github.com/Duoasa/DSH-to-Figma.git
cd DSH-to-Figma
dsh plugin --profile web add "file:$PWD"
Use your actual profile instead of web. The host package manager installs runtime dependencies; there is no build step for installation because the generated Figma companion is committed.
Official macOS DSH Desktop: use the desktop-bundled CLI for the reserved desktop profile. If your app is installed at this location:
"/Applications/DeepSeek Harness.app/Contents/Resources/runtime/cli/bin/dsh" \
plugin --profile desktop add "file:$PWD"
Adjust the app path for your installation. A separate globally installed dsh may be older and refuse to manage desktop. Alternatively, add the absolute local repository path in DSH's native plugin manager.
Open Plugins → DSH to Figma and confirm the component is running. Restart the host if it does not reload automatically. Installation success alone does not prove runtime health.
Use the CLI, profile and DSH_HOME belonging to the host with a compatible DSH core. Disable/remove any earlier development version of this plugin before enabling this package; duplicate versions share the same entry ID and local bridge port.
2. Import the automatically paired Figma plugin once
After DSH starts in local mode, ask it:
Help me connect Figma. Call figma_setup and give me the paired manifest path. Do not show the credential or read the generated code.
With the default DSH home, the manifest is:
~/.dsh/figma/companion/manifest.json
- In Figma desktop, choose Plugins → Development → Import plugin from manifest….
- Select the generated manifest. On macOS, use ⌘⇧G in the file picker to enter its full path.
- Open the target Design file and run DSH to Figma · Local.
- It connects automatically; there is no token field to fill in the normal flow. Keep the plugin window open.
The path is stable across DSH plugin updates; run the Figma plugin again after an update. Do not move/delete that directory. If you prefer an archive, figma_setup also returns DSH-to-Figma-paired.zip, a private copy for this host. Extract it to a permanent directory before import; that extracted copy must be refreshed manually after updates.
3. Start working
Inspect the connected Figma file, then create a separate auto-layout card titled “Hello from DSH”. Return its node ID, read it back, and show a screenshot. Leave existing artwork unchanged.
With one connected file, the first canvas call binds it automatically. With multiple files, DSH explicitly chooses a target. Existing bindings never silently switch after disconnect. Writes can leave partial changes on failure; inspect before retrying.
Upgrading from 0.1.5: if your profile explicitly sets backend: desktop, change it to local and reload/restart. The package default does not overwrite an explicit user preference. The setup guide includes the patch.
Standalone Figma package
Download DSH-to-Figma-packages from a successful GitHub Actions build, or build it locally with the command below. The artifact contains the DSH package and a separate generic Figma ZIP.
npm run package:companion creates dist/DSH-to-Figma-companion-0.2.1.zip, containing the manifest, compiled plugin, UI, bilingual install notes and license. It is safe to distribute and contains no credentials. For zero-copy pairing, use the private package generated by your own DSH instead; the generic package offers a manual-token fallback under Advanced.
The local CLI alternative is node /absolute/path/to/plugin/cli.mjs setup --home /absolute/path/to/dsh-home; it prints installation paths, never the pairing token.
Tools
Default local mode registers 17 canvas tools under mcp__figma__…, plus five setup/guidance tools. Optional official modes dynamically expose their actual server catalog. Desktop MCP has no use_figma canvas-writing tool.
| Workflow | Local tools |
|---|
| Canvas scripting | use_figma, import_scene |
| Inspection | get_selection, list_fonts, get_metadata |
| Visual/design context | get_screenshot, get_design_context, get_figjam |
| Design systems | get_variable_defs, get_libraries, search_design_system, get_component_context |
| Component/code references | get_local_component_links, set_local_component_links |
| Motion inspection | get_motion_context |
| Asset transfer | upload_assets, download_assets |
| Setup and guidance | figma_setup, figma_status, figma_select_document, figma_read_guide, figma_reconnect |
The bundled figma-workbench skill includes focused guides for canvas scripting, design-to-code, components/variables, assets/scenes, FigJam/Slides and official services. Local component links are plugin data, not published Code Connect mappings. Search covers the implemented local scope, not all cloud libraries. Public API scripting can target Design, FigJam and Slides; editor-specific acceptance is pending.
See capability coverage for cloud-only features and contract differences.
Configuration
Configure the dsh-figma entry through your host's native plugin configuration. These are entry config fields, not a complete profile patch:
| Field | Default | Purpose |
|---|
backend | local | local, desktop or remote |
bridgePort | 3055 | Local companion bridge |
desktopServerUrl | http://127.0.0.1:3845/mcp | Official desktop endpoint |
toolCallTimeoutMs | 120000 | Tool timeout, 1–300 seconds |
oauthClientId | empty | Approved remote OAuth client ID, when required |
Changing bridgePort regenerates the paired companion with the matching endpoint and manifest allowlist. Restart DSH and rerun/reimport the generated companion as needed. Multiple hosts should use different ports and their own generated companions.
- Local mode (default): automatic private companion preparation, launch-to-connect and single-document selection.
- Desktop mode (optional): enable Figma’s built-in desktop MCP, set
backend: desktop, and restart/reload DSH. Reading and screenshots only; no companion. See Figma’s seat requirements.
- Remote mode: use
dsh-figma login and backend: remote. Official availability depends on Figma client approval, account, seat and server catalog. No Codex credentials are reused.
- Disable: use the native plugin manager, or launch the host with
DSH_FIGMA_DISABLED=1.
Detailed setup, OAuth and troubleshooting →
Data and execution boundaries
- The local bridge binds only loopback, checks Host/Origin and requires a pairing token on every request. Tokens are stored under
DSH_HOME/figma with private filesystem permissions; the paired companion contains a private copy on disk and holds it in memory while running. It does not store it in Figma document data or clientStorage.
- Figma scripts execute inside the editor through the public Plugin API. The DSH bundle itself runs with host process privileges, as other native plugins do.
- In local mode, one connected document is bound on first use. Multiple documents and disconnected bindings require explicit selection. Operations are ordered per document; unknown writes are never automatically replayed. Mutations are not transactional.
- Asset uploads must stay inside the Work workspace. Exports use fresh
.figma/assets/<batch>/ directories. Screenshots may be sent to your configured model provider as part of the conversation.
- OAuth credentials are stored in a private local file, not encrypted with the OS keychain.
dsh-figma logout removes local credentials; revoke Figma app access separately to invalidate the grant server-side.
Development
npm ci --ignore-scripts
npm run test:all
npm pack --ignore-scripts
check regenerates companion/code.js from its sources and validates syntax/package files. The tests cover HTTP authentication, document queues, cancellation/recovery, assets, OAuth, official MCP discovery, and actual DSH service/attachment integration. Figma API behavior in automated tests uses fixtures.
index.mjs Native DSH plugin entry
cli.mjs Install, pairing and OAuth helper (dsh-figma)
lib/ Bridge, tool catalog, assets and official transports
companion/ Figma development plugin; generated code.js is shipped
skills/ Agent workflow skill and focused references
test/ Unit, protocol and native DSH integration tests
docs/ Setup and verification details
For another installed runtime, see verification instructions. Contributions and reproducible issues are welcome; include DSH version, backend and error text, and remove tokens and private design data.
Credits and license
Built on DeepSeek Harness, the Figma Plugin API and the Model Context Protocol SDK.
README organization draws on community projects dsh-context, dsh-plugin-shop and dsh-openpencil. Their code and screenshots are not bundled here.
MIT · Copyright © 2026 Duoasa.
