Two speakers demo new feature from @figma

Two Figma employees, a design director and a software engineer, introduce a problem in the design-to-code workflow, announce a new feature called 'Claude Code to Figma' as the solution, and provide a detailed demo showing how the tool captures live web UIs and converts them into editable Figma frames. They conclude by explaining the benefits for both design exploration and engineering implementation.

Creator: @figma on Instagram

Video format

Talking Head Edit

Video outline

  1. Define a shared frustration
  2. Reveal the bridging solution
  3. Demonstrate the new workflow
  4. Showcase expanded creative output

Hook overview

Two credible experts introduce themselves and their roles, immediately establishing authority and setting a professional, informative tone.

Verbal hook

Hi. I'm Guy. I am the design director on the AI team at Figma.

Visual hook

Two speakers are seated at a table in a professional, well-lit room with bookshelves in the background. Animated lower-third graphics appear on screen to introduce each speaker.

Hook strategies

  1. credibility

Payoff

A final, empowering statement that encourages the audience to adopt the new solution and imagine the possibilities it unlocks for their own work.

Narrative framework

The Problem-Bridge-Payoff Framework

Narrative framework logic

Establish a common industry problem by contrasting two conflicting but necessary workflows. Introduce a new tool or method as the 'bridge' that synthesizes the two, then demonstrate how this new synergy unlocks superior results and collaboration.

Narrative framework breakdown

  • frameworkName: The Problem-Bridge-Payoff Framework
  • frameworkType: Standard Narrative
  • coreLogic: Establish a common industry problem by contrasting two conflicting but necessary workflows. Introduce a new tool or method as the 'bridge' that synthesizes the two, then demonstrate how this new synergy unlocks superior results and collaboration.
  • confidence: 95
  • pendingStatus: created

Topics: Tech, Design

Concepts: Product Demo, Breakdown

Formats: Talking Head Edit

Elements: Screen Recording, Picture-in-Picture, B-Roll Cutaway, Text Overlay

Account types: Brand

Transcript excerpt

Hi. I'm Guy. I am the design director on the AI team at Figma. And I'm Alex, an engineer who worked on the feature that we're showing you here today. I'm really excited to show you this workflow that we've been working on. Ideas can come from anywhere, from doodles, to code these days. And code is really interesting because it can get you to somewhere real very quickly, but it also runs this risk of just rabbit holing down and kind of missing out on a lot of the exploration stage. Exploring rank code really means changing code. It also means creating new git branches, feature flags, threading variables and state and data through all these different code paths. Ultimately, versions that you end up with, they really just live on your laptop. They're not something that you can easily share and collaborate and show to other folks. And so oftentimes, I find that the feedback is often shared in the form of screenshots and video recordings and things like that. The decisions that you make in code often are also ultimately very single file. They they have to happen in a certain order, and it kind of limits your ability tier, like, explore horizontally and think about the big picture. And s

101,854 views