Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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's profile picture

Figma

553,625 subscribers

141,217 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Hannah Leopold
Hannah Leopoldvor 2 Jahren

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

Profilbild von MrCalm
MrCalmvor 2 Jahren

Damn, this is massive!

Profilbild von Sandun Karunasingha
Sandun Karunasinghavor 2 Jahren

WOW. This is massive. Thanks team.

Profilbild von MUHAMMED SHAFIHUL HADI
MUHAMMED SHAFIHUL HADIvor 2 Jahren

Wow

Profilbild von Lewis Healey
Lewis Healeyvor 2 Jahren

Yes!!!

Profilbild von biscoteira do lastfm
biscoteira do lastfmvor 2 Jahren

@hugobranco

Profilbild von Pocket Sized Baddie 🇵🇸
Pocket Sized Baddie 🇵🇸vor 2 Jahren

Share this design file with us too pls 🫠

Profilbild von Kyle E
Kyle Evor 2 Jahren

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? 🙏🏼

Profilbild von honkmonk
honkmonkvor 2 Jahren

This page is down ..

Profilbild von Figma
Figmavor 2 Jahren

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

Ähnliche Videos

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.
0:20

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 Aufrufe • vor 2 Jahren

#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 👇
0:43

#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,318 Aufrufe • vor 3 Jahren

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 →
1:03

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,302 Aufrufe • vor 2 Jahren

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!
1:59

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 Aufrufe • vor 4 Monaten

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

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

luis.

12,061 Aufrufe • vor 1 Jahr

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
0:44

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 Aufrufe • vor 1 Jahr

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

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

Figma

62,841 Aufrufe • vor 1 Jahr

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.
0:34

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 Aufrufe • vor 2 Jahren

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

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

Figma

98,858 Aufrufe • vor 10 Monaten

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

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

Tom Krcha

360,285 Aufrufe • vor 8 Monaten

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 →
1:20

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,348 Aufrufe • vor 2 Jahren

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. ✨
1:46

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 Aufrufe • vor 5 Monaten

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,417 Aufrufe • vor 2 Jahren

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

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

OpenAI Developers

241,223 Aufrufe • vor 3 Monaten

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:
1:00

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,161 Aufrufe • vor 1 Jahr

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...
0:55

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 Aufrufe • vor 1 Jahr

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.
0:31

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 Aufrufe • vor 2 Monaten

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
1:20

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,234 Aufrufe • vor 1 Jahr

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:
0:59

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 Aufrufe • vor 3 Jahren

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
0:31

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 Aufrufe • vor 3 Monaten