SESSION PLAN
PART 1
What MCP is, a live demo of one, how it compares to Figma's own AI, and the two connectors you will set up tonight.
PART 2
Components, variables, text styles and naming. What has to exist in your file before an agent can build from it.
PART 3
Research an AI topic and design a page about it, with your sources on the page and your design system in your repo.
PART 1 · WORKING WITH MCP
LECTUREMCP stands for Model Context Protocol. It is a way for an AI agent to work inside another app. Instead of you copying something out of Figma and pasting it into a chat, the agent connects to Figma and works on the real file.
The app decides what the agent is allowed to do and hands it a short list of tools.
The page on the projector is a small demo. It sits there and listens. When the agent picks something off this list, every browser watching that page changes at once.
the agent
PICKS A TOOL TO USE
MCP · THE LIST OF TOOLS THE APP PUBLISHES
the live site
THE FUNCTIONS IT ALREADY HAD (TOOLS)
set_headlinesets the headline, with an optional second line
set_themeswitches between light, dark and neon
add_itemappends a line to the feed
clear_itemsempties the feed
get_statereads what the page currently says
Figma MCP is the same idea pointed at your design file. Figma went through what it can already do, wrote down the list, and the agent picks from it.
TOOL
WHAT IT DOES
get_metadataLists what is on a page, with names, positions and sizes
get_screenshotRenders a frame as a picture the agent can look at
get_design_contextHands back a frame as code, with its styles
get_variable_defsHands back the variables something uses, and their values
use_figmaCreates and changes things in the file
An agent cannot exceed the app
Figma has its own AI built in, and it is included on education plans, so you already have it. It needs no setup. The difference between it and an agent is what each one can reach.
Figma AI reaches
Your agent reaches
YOUR COMPUTER · FIGMA AI CANNOT REACH ANY OF THIS
A rough rule. Working inside the design, or making a contained change to something already on GitHub, Figma AI will do it. Working across your whole project at once, reach for the agent.
A connector is how you set one of these up. Authorize it once and the two apps can talk from then on. The two below point in opposite directions.
FIGMA CONNECTOR
GITHUB CONNECTOR
A file gets from Figma into a repo along that second arrow. Figma AI cannot reach your hard drive, but it can reach GitHub.
When two tools cannot reach each other directly, a connector to somewhere they both can reach solves it.
PART 2 · DESIGNING FOR THE HANDOFF
LECTURENext week you will point a coding agent at this file and ask it to build the page. How much of your design survives depends on what you defined, not on how finished it looks. An agent reads structure, not appearance.
Without a component, an agent sees fifteen rectangles that happen to look alike and writes fifteen blocks of code. With one, it writes the button once and reuses it. This is the biggest difference between a file an agent can build from and one it cannot.
Variants collect one component's options under a named property. Define the set and an agent reuses it. Leave it out and the agent invents a new component for every screen. Name the property after what changes, so the file says what the options are for.
BUTTON / STATE
NAVIGATION / LAYOUT
A named value in Figma becomes a named value in code. A raw hex is a number the agent has to guess at, and it guesses differently in different places. Name your colors, spacing and radii before you use them anywhere.
#A85405Aftercolor/primary24Afterspace-6A text style binds size, weight, line height and tracking to one name. Assign two pieces of text the same style whenever they do the same job.
Title Text
Section Subheading
Standard descriptive running text.
Layer names are the only labels an agent has, so name them after what the thing is.
UNSTRUCTURED
Frame 247
└ Rectangle 12
└ Frame 248
SEMANTIC
hero
└ nav
└ curriculum-card
Use auto layout for anything that stacks or repeats. Auto layout records the relationship, that these sit in a row with this gap. Absolute positions record only where things landed, and the agent has to guess what you meant.
ABSOLUTE
x 0 ·
y 0
x 166 ·
y 3
x 335 ·
y 1
AUTO LAYOUT
row · gap 16
DESIGN.md can only describe what is actually in the file. Your agent can help you audit your Figma file to make handoff to code more seamless.
# Figma file auditAudit this Figma file. For each area below, report what you find and name the layers that need fixing.## 1. Typography styles- Do text styles exist?- Are they applied consistently?## 2. Color variables- Do color variables exist?- Are they applied consistently?## 3. Spacing variables- Do spacing variables exist?- Are they applied consistently?## 4. Radius variables- Do radius variables exist, if the design uses rounded corners?- Are they applied consistently?## 5. Components- Do components exist?- Are instances used consistently, or are there detached copies?- Which repeated elements should become components?- Which components, like buttons, need variants for hover and other states?## 6. Naming- Is every layer named? (No "Frame 12" or "Rectangle 4".)## 7. Auto layout- Where should auto layout be used but isn't?Everything above is in your Figma file. DESIGN.md is the same system written out in plain text. You keep it in your repo, next to the code. It names your colors, your type ramp, your spacing steps and the components you built.
# DESIGN.md## Colors- color/primary: #A85405- color/background: #FCF7EE## Text styles- Heading/H1: 40px SemiBold## Spacing- space-6: 24## Components- button: default, hover, focus, disabled- navigation: desktop, compact, mobilePART 3 · CLASS EXERCISE
LABPick a topic in AI you actually want to read about, research it properly, and design 2-3 pages about it. Ethics, a piece of news, how a particular AI feature works, a history, an argument you disagree with. The topic is yours.
1
Accepting the assignment on Classroom 50 creates your repository for this week. Your intent file, your DESIGN.md and your Figma link all go in it, so do this first.
classroom50.org/fitnyc-ct390/rapid-prototyping-with-ai/assignments/week-4/accept (opens in a new tab)2
Write down what you are making before you ask for it. Run /capture-intent, the skill you built in Week 3, or write the file by hand. Put it at the root of your repo as intent.md. The file is a record of your intent, not the model's.
3
In Claude, open Customize, then Connectors, and add Figma. In ChatGPT it is Settings, then Plugins. Authorize the Figma account that owns your file.
Connecting Figma to your agent
4
In Figma, open Connectors and add GitHub. Authorize the account your assignment repo lives on, and give it access to that repo. Figma AI cannot save to your computer, so this is the only way the next step reaches your project.
Connecting GitHub to Figma
5
Ask the Figma agent to write a DESIGN.md describing your file: its colors, text styles, spacing and components. Then have it push that file to your assignment repo through the connector you just set up. That file is what next week's coding agent reads instead of guessing at your design. Ensure it has at least a colors, components, typography, and spacing variables section.
6
Open README.md in your repo and add a shareable link to your Figma file.
7
Download and install the LTS version of Node.js. Then open a terminal, run node -v, and add the version number it prints to your README.md under your Figma link.
nodejs.org/en/download (opens in a new tab)DELIVERABLES