AI and Figma Workflows
This page links to all the resources in the “AI will upend your process for the better”.
The presentation
Vibe Coders
The following are links to resources that make vibe coding easier:
Mocking
Using mocks make it easier for an agent to build a prototype because it doesn’t have to implement the change in the backend and database.
The following initializes a mock app for mock service worker:https://github.com/bitovi/convey-app-template/blob/9e6cb793015272e3b49fdf126f7b8fdfa82e616c/.github/skills/init-mock-app/SKILL.md
Data Model
When mocking, you want to keep your data model
Design Consistency
When making new components, want to keep them looking right — a Brand skill teaches the agent your colors, type, and tokens https://github.com/bitovi/ai-enablement-prompts/pull/26
Component skill .. use existing components before you build something new — component-registry
Visual Communication
Figma Make (local)
Branch Builds
Local Agent Orchestrators
Code to Figma
Figma Use Skills
Bitovi’s Figma Skills — figma-react
Asking Questions / Writing Stories
CascadeMCP Server — cascade-mcp
Review design → post questions to Figma — cascade-post-design-questions-to-figma
Review design → post questions to Jira — cascade-post-design-questions-to-jira
Write Jira story — write-jira-story
Generate behavior questions (Figma–Jira) — generate-behavior-questions
Implementation
Figma Code Connect — figma-connect-component (Bitovi) · figma/code-connect (official)
Figma to React component skill — figma-implement-component
Implement code from React — figma-design-react
Cloud Agent Orchestrators
Cloud Agents
Lets you run a agent in the cloud … with access to MCP and your codebase
Jira To Cloud Copilot Setup
FigmaMCPProxy — figma-mcp-proxy
CascadeMCP — cascade-mcp
Asking Questions / Writing Stories / Implementation
Reuses the Local Agent skills above, run via the cloud setup.