正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

Do more with Dev Mode. This new plugin allows you to write and generate dynamic code snippets for your design system. Code Snippet Editor →

Figma

553,625 subscribers

141,217 次观看 • 2 年前 •via X (Twitter)

科学技术教育

Anya Rossi• Live Now

Private livecam show

10 条评论

Hannah Leopold 的头像

Hannah Leopold2 年前

@josejimmy8055 This is game changing! As a company wide design system team dev, having code snippets would increase my productivity by at least 50%!

MrCalm 的头像

MrCalm2 年前

Damn, this is massive!

Sandun Karunasingha 的头像

Sandun Karunasingha2 年前

WOW. This is massive. Thanks team.

MUHAMMED SHAFIHUL HADI 的头像

MUHAMMED SHAFIHUL HADI2 年前

Wow

Lewis Healey 的头像

Lewis Healey2 年前

Yes!!!

biscoteira do lastfm 的头像

biscoteira do lastfm2 年前

@hugobranco

Pocket Sized Baddie 🇵🇸 的头像

Pocket Sized Baddie 🇵🇸2 年前

Share this design file with us too pls 🫠

Kyle E 的头像

Kyle E2 年前

Ahhh yes love this, will try it out but my hope would be that when generating code for entire page it would inject the snippets created/modified for it’s underlying components? 🙏🏼

honkmonk 的头像

honkmonk2 年前

This page is down ..

Figma 的头像

Figma2 年前

Everything seems to be working on our end. Let us know if you continue to have issues.

相关视频

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Customize Dev Mode to how you work. Five plugins to try: Design 🤝 Dev → Atlassian Jira Code Generation → Bernardo Ferrari Figma to Code → Anima Design Systems → Tokens Studio → Figma Code Snippet Editor More in the thread.

Figma

47,489 次观看 • 2 年前

#Config2023 Launch 1: Dev Mode A new space in Figma for developers with features that help translate design into code, faster. Read more: Here are all the ways you can use Dev Mode 👇

#Config2023 Launch 1: Dev Mode A new space in Figma for developers with features that help translate design into code, faster. Read more: Here are all the ways you can use Dev Mode 👇

Figma

617,307 次观看 • 3 年前

Coming next week: New features in Dev Mode to bring design + dev closer. Annotations (!!), improvements to diffing, plugins, and the VS Code extension. What's shipping January 31 as Dev Mode moves out of free beta →

Coming next week: New features in Dev Mode to bring design + dev closer. Annotations (!!), improvements to diffing, plugins, and the VS Code extension. What's shipping January 31 as Dev Mode moves out of free beta →

Figma

789,278 次观看 • 2 年前

Introducing CodeRabbit Plugin for Claude Code! The CodeRabbit plugin for Claude Code creates an autonomous AI development workflow, helping you write and fix code without manual intervention. Type /coderabbit:review (or just say “review my code”) to get AI-powered fixes directly in your dev flow! Try it today, it’s free!

Introducing CodeRabbit Plugin for Claude Code! The CodeRabbit plugin for Claude Code creates an autonomous AI development workflow, helping you write and fix code without manual intervention. Type /coderabbit:review (or just say “review my code”) to get AI-powered fixes directly in your dev flow! Try it today, it’s free!

CodeRabbit

27,190 次观看 • 4 个月前

Published a plugin! It allows you to copy CSS variables from Figma in either design or dev mode 🧑‍💻

Published a plugin! It allows you to copy CSS variables from Figma in either design or dev mode 🧑‍💻

luis.

12,061 次观看 • 1 年前

New in Dev Mode: → Ready for Dev View: see all designs marked ready for development in a single, organized space → Focus View: annotate and inspect with just your chosen design in focus → More Statuses: track what's ready for dev, changes made, and completed designs #Config2024

New in Dev Mode: → Ready for Dev View: see all designs marked ready for development in a single, organized space → Focus View: annotate and inspect with just your chosen design in focus → More Statuses: track what's ready for dev, changes made, and completed designs #Config2024

Figma

57,503 次观看 • 1 年前

New in Dev Mode: → Editable text in measurements: describe design details with more than just numbers

New in Dev Mode: → Editable text in measurements: describe design details with more than just numbers

Figma

62,832 次观看 • 1 年前

This plugin can generate textures for your Unreal Engine scene! Comfy Textures is an Unreal Engine plugin which integrates the editor with ComfyUI. It allows you to quickly create and refine textures for your scene using generative diffusion models.

This plugin can generate textures for your Unreal Engine scene! Comfy Textures is an Unreal Engine plugin which integrates the editor with ComfyUI. It allows you to quickly create and refine textures for your scene using generative diffusion models.

Dreaming Tulpa 🥓👑

32,769 次观看 • 2 年前

Dev Mode: → Interactive Inspection (Dev Mode) → Annotations (MCP server) → Local Images (MCP server) → Design system rules (MCP server)

Dev Mode: → Interactive Inspection (Dev Mode) → Annotations (MCP server) → Local Images (MCP server) → Design system rules (MCP server)

Figma

98,694 次观看 • 10 个月前

Design Mode for Cursor Introducing a new way to design right where you code.

Design Mode for Cursor Introducing a new way to design right where you code.

Tom Krcha

360,176 次观看 • 8 个月前

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

More ways to animate with LottieFiles: - Auto-layout - Nested Frames - Multi-variant Components - Gradients - Handoff features like animation URLs and embed codes for Dev Mode Download the plugin and play →

Figma

124,344 次观看 • 2 年前

What if you could generate all your colors, typography styles, sizes, radii, and more as variables and tokens with just one click? No manual setup, in few minutes go from blank page to a solid design system foundation. With option to present everything nicely for dev doc and more. With this Figma plugin, it’s actually that simple. ✨

What if you could generate all your colors, typography styles, sizes, radii, and more as variables and tokens with just one click? No manual setup, in few minutes go from blank page to a solid design system foundation. With option to present everything nicely for dev doc and more. With this Figma plugin, it’s actually that simple. ✨

vijay verma

26,190 次观看 • 4 个月前

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.

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,398 次观看 • 2 年前

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.

Code → design → code Generate design files from code, collaborate in @Figma, and implement updates all within Codex without breaking your flow.

OpenAI Developers

241,206 次观看 • 3 个月前

Need a little help building your islands? The Epic Developer Assistant Beta is here to lend a hand! This new AI-powered assistant helps you write Verse code for your UEFN projects, provides answers, workflow guidance, code snippets, and more. Check it out now on the Epic Developer Community:

Need a little help building your islands? The Epic Developer Assistant Beta is here to lend a hand! This new AI-powered assistant helps you write Verse code for your UEFN projects, provides answers, workflow guidance, code snippets, and more. Check it out now on the Epic Developer Community:

Fortnite Developers

118,106 次观看 • 1 年前

GitHub Copilot can review your code and generate tests for you in VS Code, and you can customize how it does this magic with targeted Custom Instructions...

GitHub Copilot can review your code and generate tests for you in VS Code, and you can customize how it does this magic with targeted Custom Instructions...

Visual Studio Code

82,442 次观看 • 1 年前

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.

Attachment issues (resolved) You can attach 30+ file types (docs, data, media, and code) directly in Make, so you can move beyond placeholders and design with real inputs from code to canvas.

Figma

34,917 次观看 • 1 个月前

There’s no way you caught everything. Here’s what we launched at #Config2024 → UI3, a redesigned Figma → Figma AI (Make Design, Make Prototype, Visual Search, Replace Content, Rename Layers) → Figma Slides → Dev Mode updates (Ready for Dev View, Focus View, More Statuses) → Code Connect is out of beta (!!) → Auto Layout improvements → Responsive Prototyping Viewer → FigJam Pages

There’s no way you caught everything. Here’s what we launched at #Config2024 → UI3, a redesigned Figma → Figma AI (Make Design, Make Prototype, Visual Search, Replace Content, Rename Layers) → Figma Slides → Dev Mode updates (Ready for Dev View, Focus View, More Statuses) → Code Connect is out of beta (!!) → Auto Layout improvements → Responsive Prototyping Viewer → FigJam Pages

Figma

997,173 次观看 • 1 年前

Curious about design systems but don't know where to start? Whether you're about to build your first design system or just curious about them, our new 4- part course, "Introduction to Design Systems," will provide guidance, real-world applications, and tools to help you make the most informed decisions. - Understand what a design system is - Discover what goes into a design system and explore foundational concepts - Learn which Figma features help manage design systems - Explore the importance of documentation and how to maintain, improve, and advocate for your design system. Learn more:

Curious about design systems but don't know where to start? Whether you're about to build your first design system or just curious about them, our new 4- part course, "Introduction to Design Systems," will provide guidance, real-world applications, and tools to help you make the most informed decisions. - Understand what a design system is - Discover what goes into a design system and explore foundational concepts - Learn which Figma features help manage design systems - Explore the importance of documentation and how to maintain, improve, and advocate for your design system. Learn more:

Figma

550,976 次观看 • 3 年前

designing my new personal site with Pencil.dev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

designing my new personal site with Pencil.dev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

Sandra

93,463 次观看 • 2 个月前