Claude Code and Figma Guide
Free 6 page guide. Connect Claude to Figma and let Claude Code draw your first screen.
The Claude Code and Figma Guide is a free 6 page PDF by Laith Aljunaidy, in Arabic and English, that connects Claude to Figma and lets Claude Code draw your first screen without a terminal. It covers the Claude desktop app and the Figma connector setup with screenshots, how to build a project folder from your brand assets, the exact first prompt, a real demo screen, and a troubleshooting table. Two PDFs, one per language. Pay what you want on Gumroad, free if you take it free.
Updated
What is inside
Connect Claude to Figma and let Claude Code draw your first screen. No terminal, no commands, one message.
A free 6-page guide in Arabic and English. You download the Claude desktop app, connect Figma from Settings, Connectors, open the Code tab, pick a project folder, and send one message. Claude reads the folder, asks what is missing, and draws the screen inside your Figma file. Real screenshots from Anthropic and Figma, the demo result, and a troubleshooting table for when something does not work.
What is inside
- Step by step setup of the Claude app and the Figma connector (the Figma MCP), with screenshots
- How to make a project folder with your brand assets and Figma link so Claude designs from your files, not from guesses
- The exact first prompt, generic enough for any product, and what Claude asks when the folder is empty
- A real demo screen drawn by Claude in Figma, and a table of the errors you might hit with the fix for each
- Two PDFs: Arabic edition and English edition
Who it is for. Designers and founders who want to try Claude Code with Figma without installing anything in a terminal. Arabic-first teams get an Arabic guide written in Arabic, not translated.
Pay what you want. Free if you take it free. If it saved you an hour, pay what it was worth.
Paid
Go further with the paid kits
The nine templates at their Pro edition in one kit, or your design system as a folder Claude reads.