Nov 27, 2025 • Perfomance & AI Day

Boost Productivity with AI: Figma & Playwright MCP Workflows - Aris Markogiannakis

What if your Figma designs could automatically generate their own React components and Playwright tests? Aris Markogiannakis shows how.

#1about 5 minutes

Bridging the gap between design and development

An introduction to the traditional workflow where developers manually translate design specifications from tools like Figma into code.

#2about 3 minutes

Reframing artificial intelligence as automated intelligence

AI is presented not as true intelligence but as a powerful tool for automating repetitive development processes and workflows.

#3about 4 minutes

Explaining core AI concepts like LLMs, agents, and MCPs

A breakdown of key AI terms, defining LLMs as the brain, agents as the body with tools, and MCPs as the API connecting them.

#4about 3 minutes

Automating test generation using the Playwright MCP

An agent can generate Playwright tests from natural language prompts by following a predefined set of rules and instructions for consistency.

#5about 5 minutes

Generating UI components directly from Figma designs

Setting up a local MCP server allows an AI agent to read a Figma design URL and generate corresponding component code in your IDE.

#6about 6 minutes

Building a workflow to automate component generation

A workflow file with step-by-step instructions enables the AI to generate multiple components, styles, and Storybook stories in a single, automated run.

#7about 8 minutes

Improving AI output quality using Figma Connect

Figma Connect bridges the gap between design and code by syncing component properties, states, and variables, giving the AI better input for more accurate code generation.

#8about 2 minutes

Maintaining human oversight and control over AI tools

AI tools are powerful assistants, but developers must retain control, understand the generated code, and not blindly trust the output to avoid errors.

#9about 11 minutes