You can also share specific Figma designs with Claude Code by pasting links. This is useful when using the remote MCP server or when you want to reference a specific layer or frame.
Copy a Figma Link
1
Select a Frame or Layer
In Figma, click on the frame, component, or layer you want to reference.
2
Copy the Link
- Right-click the selection and choose "Copy link to selection"
- Or use the shortcut: Cmd + L (Mac) / Ctrl + L (Windows)
3
Paste in Claude Code
Paste the Figma URL directly into your Claude Code prompt along with your instructions.
Example Prompts with Links
Claude Code prompt
> Implement this Figma component as a React component:
> https://www.figma.com/design/abc123/MyProject?node-id=42-1337
> Use Tailwind CSS and make it responsive.Claude Code prompt
> Here are two Figma frames, the mobile and desktop versions:
> Mobile: https://www.figma.com/design/abc123/MyProject?node-id=10-200
> Desktop: https://www.figma.com/design/abc123/MyProject?node-id=10-300
> Build a responsive component that matches both layouts.Multiple Links Work Too
You can paste multiple Figma links in one prompt. This is great for showing Claude Code different states (default, hover, active) or responsive breakpoints (mobile, tablet, desktop).
When to Use Links vs Selection
- Use frame selection (desktop MCP) for quick iteration: select, prompt, repeat
- Use links when sharing a specific part of a complex file
- Use links when working with the remote MCP server (no desktop app)
- Use links when referencing multiple frames or states in one prompt
Sharing frames with links
- Copied a Figma URL straight to a specific frame or layer
- Pasted multiple links in one prompt to show responsive states
- Learned when links beat selection (complex files, remote MCP, multi-frame references)
Two ways to point Claude Code at a frame. Next: tips for getting cleaner output from both.
Stuck on your own project? Book 45 minutes with me for $49.
The patterns behind this lesson
Contextual AssistanceOffer timely, proactive help and suggestions based on user context, history, and needs.Augmented CreationEmpower users to create content with AI as a collaborative partner.Progressive DisclosureGradually reveal information, options, or AI features to reduce cognitive load and simplify complex tasks.