Office hours: Intro to Dev Mode

In this livestream, Jake, Lauren, and Emil dive into Dev Mode, the newest space in Figma built for developers.

0:00 Intro to Dev Mode
3:20 Editor view demo
14:03 Dev mode demo
31:45 Q&A
53:55 Closing
____________________________________________________

Find us on ⬇️

____________________________________________________

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[ilteris]

🎯 Key Takeaways for quick navigation:

00:00 🧑‍💻 Dev Mode in Figma is specifically designed for developers and designers to streamline the transition from design to production.
00:45 🆓 The new VS Code extension and Dev Mode are available in beta and free for everyone until the end of 2023.
01:00 💸 Starting 2024, Dev Mode and Figma for VS Code will require a paid seat under certain Figma plans.
01:28 💼 Two new access options for Dev Mode and Figma for VS Code will be introduced in 2024 for organizational and enterprise plans.
02:11 🛠️ Without Dev Mode, users can still copy values, generate code, and export assets from design mode in the inspect panel.
03:34 🖌️ In editor view, Dev Mode leads to the removal of the inspect panel from design mode to streamline the design process.
04:04 🧐 Viewer mode retains key information in the properties panel, even without Dev Mode.
05:02 📝 Component descriptions and sections in Figma have been enhanced for better clarity and detail for developers.
06:25 🌐 Component descriptions now support rich text, links, and code for better documentation and accessibility.
07:34 🔗 Dev resources section in Dev Mode allows developers to add relevant links and resources directly to components.
09:11 🏗️ Sections in Figma are used for organizational purposes, grouping related frames and elements for better project management.
10:20 🟢 'Ready for Dev' tags in sections indicate which parts of a design are prepared for development.
12:09 📊 In Dev Mode, marked sections provide detailed information about the content, helping developers focus on relevant areas.
13:04 🔄 Dev links can directly navigate developers to the relevant sections in Dev Mode, enhancing efficiency.
17:05 🔍 The 'Compare Changes' feature in Dev Mode highlights differences in design elements, aiding in accurate implementation.
18:14 📄 Dev Mode provides rich documentation for components, including lists, code blocks, and external links.
19:21 📏 Enhanced box model and code snippets in Dev Mode offer detailed layout and style information for elements.
20:31 📲 Code generation options in Dev Mode include support for iOS, Android, and various CSS frameworks.
22:57 🧩 Plugins in Dev Mode allow for creating issues, managing tasks, and integrating with other tools like Jira.
25:17 👀 Dev Mode highlights components on the canvas, providing a clear overview of the design's structure and elements.
27:07 🖥️ Figma for VS Code integration allows for seamless transition of designs to code within the VS Code environment.
31:12 🔄 Links between Figma and VS Code facilitate easy navigation and reference between design elements and their code counterparts.
32:25 💻 Code gen plugins in Figma can pull real-time data and make external requests, expanding the scope of automation and integration.
33:19 📈 Figma's future development focuses on enhancing collaboration and efficiency between designers and developers.

Made with HARPA AI

[alexh]

Is there a plugin similar to the one that allows interoperability between Figma and VS code and being able to turn ui elements created in Figma into copy pasted code that can also later be tweaked that is available for Xcode aswell?

[ke]

It'd be nice to be able to autolayout a section.

[TimArnoldIsMe]

This is fantastic! I wonder if the Figma plugin could be enhances so that when I create a new ticket for a component from within Figma, it will pull the Figma component "desctiption"?

[Reni]

How to make prototyping navigation appear when scrolling in figma??