Tag · 13 guides
Figma
Every guide tagged figma, sorted by most recent.
FI Figma Make vs Lovable vs v0 vs Bolt vs Replit (AI UI Builders Compared)
Five AI tools generate UI from a prompt. They are not interchangeable. Here is what each one is actually good at, what it ships, and when to pick which.
HO How to Describe Design Styles to AI
Turn vague style words like retro, premium, or playful into precise art direction that AI can actually use.
AU Audit a Design System in 30 Minutes
A step-by-step workflow to audit any design system using AI tools. Check token naming, component health, accessibility, and visual consistency in one session.
DE Design Token Naming: 7 Systems Compared
How Polaris, Carbon, Primer, Material Design, Lightning, Spectrum, and Fluent name their tokens. Side-by-side comparison with patterns, examples, and what to steal for your system.
UN Understand MCP in 10 Minutes (and Why It Changes Your AI Setup)
The one protocol that lets AI read your Figma, GitHub, and docs directly. A plain-English explainer for designers, with examples of what it unlocks in real work.
CO Connect Your Figma Designs to Claude and Cursor
Stop copy-pasting screenshots into AI. Set up Figma Dev Mode MCP so Claude and Cursor can read your designs directly, then ship code that actually matches your file.
Audit 500 Components in 10 Minutes
A complete workflow for auditing your entire Figma component library using Tidy and Claude. Identifies naming issues, missing descriptions, and inconsistencies.
How to Prompt Claude to Audit a Figma Design
A 5-version walkthrough showing how a bare prompt becomes a production-ready design audit. Built on the same iterative method Anthropic teaches internally.
BU Build a Token Parity Check Skill for Claude Code
A Claude Code skill that compares your tokens between Figma and code. Catches drift before it ships, with one slash command.
Convert Figma Variables to CSS Custom Properties
Export Figma variables and transform them into production-ready CSS custom properties your engineers can use immediately.
Pull Component Data from the Figma API
Programmatically access your Figma components, styles, and variables. Build audits, reports, and automations on real data.
Sync Tokens Studio to GitHub
Version-control your design decisions. Every token change tracked, every update synced between Figma and code.
FI Figma to Code with MCP
End-to-end workflow for converting Figma designs to production code using MCP servers. From design to implementation in minutes, not hours.