Insert subhead here

Insert subhead here

11:30am – 1:00pm

Insert text here

1:00pm – 2:00pm

Insert longer text here

2:30pm – 4:30pm

Insert a longer bit of text here that wraps onto multiple lines

11:30am – 1:00pm

Insert text here*

Insert subhead here

Insert subhead here

time

11:30a – 12:30pPST

Insert subhead here

This is optional — lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus sem, luctus pulvinar purus. Fusce laoreet augue id dolor vulputate ullamcorper.

Insert event title here

Insert event title here

Insert event title here

Insert event title here

Getting ready to build from Figma

Wednesday, July 22

10AM – 11AM BST | 11AM - 12PM CEST

Building your first component with AI

Wednesday, August 5

10AM – 11AM BST | 11AM - 12PM CEST

Connecting, reviewing, and shipping your component

Wednesday, August 19

10AM – 11AM BST | 11AM - 12PM CEST

1. Getting ready to build from Figma

Move from design into code by setting up your basic environment — covering GitHub, a starter repo, the terminal, and how a codebase is structured. 

In this session, you will:

• Learn how to set up GitHub, a starter repo, and understand the basics of the terminal.
• Understand how Figma, Dev Mode, MCP, and a local coding environment are connected.
• Map Figma variables to tokens in code so your build starts from the right foundations.

Additional resources

2. Building your first component with AI

With your setup in place from episode 1, it’s time to start building. Read the component as structured context, translate it into code with AI, preserve the token decisions established in session 1, run it, and iterate until the result reflects the design intent.

In this session, you will:

• Inspect properties, variants, spacing, and structure in Dev Mode.
• Prompt AI to generate a first implementation using the synced tokens.
• Run locally, compare with the design, and iterate with intent.

Additional resources

3. Connecting, reviewing, and shipping your component

For our last webinar of the series, it’s time to close the loop. Connect the working component back to Figma, validate and refine the relationship with AI, then package the work as a documented, reviewable contribution. Then we’ll help you understand what happens before you merge and ship.

In this session, you will:

• Link the Figma component and its code with Code Connect.
• Validate props, variants, and examples, then refine the mapping.
• Commit changes, open a pull request, and understand review and merge.

Additional resources