Загрузка видео...

Не удалось загрузить видео

На главную

Introducing Figma Connect 2.0 Copy multiple designs in Figma, paste them into MagicPath, and get clean react code instantly. Auto Layout and responsiveness, all preserved. Your Figma designs become code any agent can understand and build with. Codex, Claude Code, and more.

skirano's profile picture

Pietro Schirano

111,285 subscribers

36,741 просмотров • 10 дней назад •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.
1:19

Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.

Pietro Schirano

980,042 просмотров • 7 месяцев назад

Introducing Figma export in MagicPath. Design and build with our native agent, or your favorite external one (Codex, Claude Code, etc.). Explore tons of different directions, then bring your work into Figma as fully editable designs. As simple as a copy-paste.
0:21

Introducing Figma export in MagicPath. Design and build with our native agent, or your favorite external one (Codex, Claude Code, etc.). Explore tons of different directions, then bring your work into Figma as fully editable designs. As simple as a copy-paste.

Pietro Schirano

42,132 просмотров • 3 месяцев назад

btw, from Figma → Code via Pencil > just copy/paste: cmd+C in Figma, cmd+V in Pencil > styles and layout settings preserved, pixel perfect > claude code produces the code that fits your repo code, requirements and rules, you are in charge
0:34

btw, from Figma → Code via Pencil > just copy/paste: cmd+C in Figma, cmd+V in Pencil > styles and layout settings preserved, pixel perfect > claude code produces the code that fits your repo code, requirements and rules, you are in charge

Tom Krcha

15,342 просмотров • 7 месяцев назад

Turn code into designs your whole team can edit by connecting Codex to the Figma canvas
0:35

Turn code into designs your whole team can edit by connecting Codex to the Figma canvas

Figma

107,585 просмотров • 2 месяцев назад

Introducing: a new properties panel and annotations in Figma Make Directly edit your designs and prototypes built in code
0:40

Introducing: a new properties panel and annotations in Figma Make Directly edit your designs and prototypes built in code

Figma

65,117 просмотров • 25 дней назад

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma
3:19

Tired: code or canvas Wired: code AND canvas Introducing Claude Code to Figma

Figma

3,074,002 просмотров • 6 месяцев назад

Introducing Reweb 2.0 - The Cursor & Figma baby Generate, edit & explore designs with AI. Export React and shadcn code. Available today in open beta.
0:44

Introducing Reweb 2.0 - The Cursor & Figma baby Generate, edit & explore designs with AI. Export React and shadcn code. Available today in open beta.

Mattia

93,877 просмотров • 1 год назад

Announcing Visual Copilot 2.0 Turn Figma designs into interactive applications using your code, components, and data with natural language
0:58

Announcing Visual Copilot 2.0 Turn Figma designs into interactive applications using your code, components, and data with natural language

Steve (Builder.io)

32,981 просмотров • 1 год назад

Introducing Codex to Figma: Roundtrip between code and canvas through the Figma MCP server
0:36

Introducing Codex to Figma: Roundtrip between code and canvas through the Figma MCP server

Figma

179,966 просмотров • 5 месяцев назад

What if AI could turn your Figma designs into fully interactive, data-connected applications? Announcing Visual Copilot 2.0: make Figma designs real, using your actual code, data, and APIs. 🧵👇
0:58

What if AI could turn your Figma designs into fully interactive, data-connected applications? Announcing Visual Copilot 2.0: make Figma designs real, using your actual code, data, and APIs. 🧵👇

Builder.io

17,002 просмотров • 1 год назад

YC W23's CodeParrot (YC W23) converts Figma designs and screenshots into production-ready code, so developers can build stunning UI lightning fast. Share your Figma files and set your code preferences, and CodeParrot will have your screens ready in minutes.
0:52

YC W23's CodeParrot (YC W23) converts Figma designs and screenshots into production-ready code, so developers can build stunning UI lightning fast. Share your Figma files and set your code preferences, and CodeParrot will have your screens ready in minutes.

Y Combinator

53,541 просмотров • 2 лет назад

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.
6:06

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,880 просмотров • 1 год назад

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys
0:29

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

Meng To

76,017 просмотров • 1 год назад

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,597,925 просмотров • 11 месяцев назад

Build your ideas with Cursor and Figma. Watch Lee Robinson go from design to code with GPT-5-Codex and Agent.
6:58

Build your ideas with Cursor and Figma. Watch Lee Robinson go from design to code with GPT-5-Codex and Agent.

Cursor

276,733 просмотров • 11 месяцев назад

Introducing the Sleek Design Skill Just install it and your agent instantly makes better mobile app designs Works with Claude Code, Codex or any agent with skills. Link below.
0:31

Introducing the Sleek Design Skill Just install it and your agent instantly makes better mobile app designs Works with Claude Code, Codex or any agent with skills. Link below.

Mattia

184,159 просмотров • 5 месяцев назад

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.
0:30

You can now push what you’re building in Claude Code directly into Figma. With the latest updates to the Figma MCP server, build a working prototype in code, then send it to a Figma canvas to explore multiple versions.

Claude

4,320,231 просмотров • 6 месяцев назад

Introducing code layers in Figma Sites Add interactions and animations with code crafted by you or with help from Figma’s AI
0:31

Introducing code layers in Figma Sites Add interactions and animations with code crafted by you or with help from Figma’s AI

Figma

169,255 просмотров • 1 год назад

Today we’re launching an experimental Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.
0:45

Today we’re launching an experimental Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Replit ⠕

524,480 просмотров • 2 лет назад

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams
0:48

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 просмотров • 5 месяцев назад