Bring Figma into your dev's workflow, MCP server slide

Summary

A green MCP-server slide: an oversized headline left, and on the right a dark code editor beside a coral crossword web app generated from Figma context.

Visual description

Saturated green (#2ECC71) full bleed. Top-left a black highlight bar with green text reads "Bring design & code closer". A large black headline stacks "Bring Figma into your dev's workflow". Bottom-left body copy explains Figma's MCP server guiding AI agents to generate code using existing components, variables, styles, and layout patterns. The right half holds two windows: a dark code-editor window (generic syntax-highlighted lines, line numbers) and a light browser window showing a coral-red "Miniword" crossword activity, repeated twice (empty grid above, a grid with "SUN" filled below).

Key takeaway

Showing input and output side by side, the code editor next to the live coral app it produced, so the slide demonstrates the workflow rather than describing it. The abstracted, near-unreadable editor reads as "code" without distracting with real text.

Reuse notes

Good for a slide that needs to show a generation or build workflow end to end. Pairs the muted dark editor with a high-chroma result screen for contrast. Keep within the green theme run; the highlight bar maintains continuity with the Code Connect slide before it.