Figma

Report

Figma designs convert to code via Figma Make and MCP

Figma designs can be taken into Figma Make to convert them into real website-driven code; when someone questions whether a Figma design can be turned into code, the answer is yes; MCP (Model Context Protocol) can be used to take Figma code over to Codex, Claude, or another external AI agent for building, and for complex animations MCP with AI or another method can hand off the animation.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma presenter

Method

Sending a Figma prototype to Figma Make to generate a working site

How to take a Figma prototype into Figma Make: select the frames, use the send-to-Figma-Make option under prototype mode, and prompt it to honor the transitions, use the intro animation, and keep things as is. Figma Make then opens and can turn the prototype into a working site with working code in one shot.

Figma · Figma for Edu: Prototyping with animations in Figma

Method described by narrator

Method preserved for inspection; not a verified protocol.

Report

Sending prototypes to Figma Make and prompting it

Select frames and use the 'Send to Figma Make' option under prototype mode; a finished prototype with interactions can be taken into Figma Make; when sending, it takes the interaction there plus whatever is prompted; a prompt like 'Make this interaction into a section of a website. Use the intro animation and keep things as is. Honor the transitions.' was used, along with instructing it to make no mistakes; a prototype can also be converted to a working site with a prompt like 'make this prototype into a working site include to build an animation in the first frame'.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma presenter

Report

Prototype work as context for Figma Make and AI agents

Doing upfront prototype work provides better context for Figma Make or an AI agent; all decisions made in the Figma prototype carry over as context when using the prototype with Figma Make; many things done automatically in the prototype should be provided as context when building the real thing; it might be faster to visually articulate designs in Figma and pass them off as context to be built as a real prototype.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma presenter

Recommendation

Send Figma code to Figma Make or AI agents via MCP

Mickey says that when people ask whether something made in Figma can be made into code, the answer is yes: you can take Figma code into Figma Make, or via MCP (Model Concepts Protocol) over to Codex, Claude, or another external AI agent to build where you already build with AI.

Figma · Figma for Edu: Prototyping with animations in Figma

Recommendation from Mickey

Report

Figma Motion lives inside Figma Design

Mickey states that Figma Motion is located within Figma Design, so motion work happens in the same tool as design work.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Mickey

Recommendation

Reference custom animation styles in Figma agent prompts and custom skills

Custom animation styles can be referenced in prompts or through custom skills when using the Figma agent to create motion. If you don't reference them, the Figma agent won't use your motion language when creating motion.

Figma · Figma Motion basics: Custom animation styles

Recommendation from Figma

Anecdote

Figma Make generated a style guide page describing a loading animation with list and table options

The presenter built a page with Figma Make by asking it to take a frame with an animation and embed it within a page as a style guide breaking down how the loading animation is to be used on web; the page describes the animation and creates other options like a list and a table, all within Figma Make.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Report

MCP lets you configure Figma context with your LLM, such as Claude

MCP allows you to take Figma context and configure it with your LLM; the presenter is currently using Claude with Figma MCP.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Anecdote

Presenter demoed trim path, nested arm, and component animations passed to Figma Make and MCPs

The presenter showed trim path animations on infinity-symbol lines, a more complex looping nested arm animation as a proof of concept, and a simple hard animation made as a component, sending them to Figma Make to embed into pages, working with Figma MCPs.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Anecdote

Figma Make built pages around requested animation frames, including a second animation on request

The presenter asked Figma Make to use an animation frame and embed it into a page, and Figma Make built the page around that animation; selecting a second animation and asking to include it as well also worked.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Report

Workshop scope: classic prototyping plus animation into real code

Mickey describes the workshop as covering classic prototyping and how to take that classic prototype's context and make something real by integrating animation, going from Figma design to Figma Make, where complex animations made in Figma were taken into Figma Make one-to-one as real website-driven code.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Mickey

Anecdote

Presenter pre-wired all three pizza interactions and a finished Figma Make build from the workshop file

Before the workshop, the presenter wired up all three pizza interactions in the file, including an X button that loads in, and made a finished Figma Make build from that exact file; Figma Make even added the X button on its own.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Recommendation

Prompt Figma Make to turn an interaction into a website section

When sending a prototype to Figma Make, prompt it to make the interaction into a section of a website, using the intro animation and keeping things as is, honoring the transitions.

Figma · Figma for Edu: Prototyping with animations in Figma

Recommendation from Figma

Recommendation

Send selected frames to Figma Make via prototype mode

Select frames in the file and use the option under prototype mode to send them to Figma Make.

Figma · Figma for Edu: Prototyping with animations in Figma

Recommendation from Figma

Report

Figma Make builds real pages from prototype frames and prompts

Figma Make takes prototype interactions plus a prompt, examines the design, imports the frames, and builds the real thing, with the user able to participate and make changes afterward.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Principle

Build in Figma with intent, style, and motion to feed LLM context

Building things in Figma with intent, style, and motion provides context that can be used when working with LLMs, and that context and those animations can be brought into other spaces.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma

Recommendation

Tell Figma Make to drive animations based on scroll

You can have animations and then tell Figma Make to be driven based off of your scroll, for example six sections each animating when they come into view.

Figma · Figma for Edu: Prototyping with animations in Figma

Recommendation from Figma

Report

Motion beta access in Figma Design

Opening Figma Design and locating the Motion beta icon in the toolbar gives access to motion tools.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma presenter

Report

Figma prototype triggers and interaction affordances

Figma prototype mode supports a set of triggers (on click, on drag, while hovering, while pressing, mouse enter, mouse leave, after delay), and selecting an object in prototype mode shows white dots with a blue outline used to create interactions between two frames; with a frame selected, interactions are laid out in the right-hand panel.

Figma · Figma for Edu: Prototyping with animations in Figma

Claim from Figma presenter