Emil Sjölander from Figma talks about bringing Dev Mode to Figma, a new workspace designed to bridge the gap between developers and designers. They discuss the evolution of design tools, Figma's investment in developer collaboration, the process of choosing and using open source packages, and future plans for code generation in Figma. They also explore the role of design systems and the benefits of using Dev Mode in design systems for faster product development.
Read more
AI Summary
AI Chapters
Episode notes
auto_awesome
Podcast summary created with Snipd AI
Quick takeaways
Dev Mode in Figma brings developers and designers together in the same tool, providing a home for developers within a design tool.
Dev Mode integrates with existing design systems like Material Design, allowing developers to access component documentation and easily import components into their code.
Building Dev Mode involved deepening Figma's investment in developer collaboration, leveraging experience from a startup acquired by Figma called Visly and iterating on user feedback to create a tool that enables faster development and effective collaboration.
Deep dives
Dev Mode: Bridging the Gap Between Developers and Designers
Dev Mode in Figma is designed to bring developers and designers together in the same tool. It allows developers to have a home within a design tool and addresses the challenge of creating a space that caters to developers. Dev Mode was developed based on the experience gained from a startup acquired by Figma called Visley, where the iteration process from PSDs to HTML influenced its creation. It provides features like code generation, popular design system integration, and the ability to participate in the software development lifecycle. With Dev Mode, developers can clone production environments, have their own developer environments at low cost, and work collaboratively with designers to build and iterate on applications.
The Value of Design Systems in Dev Mode
Dev Mode within Figma is particularly valuable for teams that already have design systems. By integrating Dev Mode with existing design systems like Material Design, developers can quickly access component documentation and import the necessary components into their code. Dev Mode also enables developers to compare changes in design, making it easier to stay in sync with designers and build higher quality products faster. It offers a fluid workflow for teams and enhances collaboration by providing developers with the tools needed to accelerate their work and maintain consistency with design systems.
The Journey of Building Dev Mode within Figma
Emil, the guest on the podcast, shared the process of building Dev Mode within Figma. The team focused on deepening Figma's investment in developer collaboration, leveraging their experience from Visley and the existing usage of Figma within the design community. They started with enhancing the Auto Layout feature to make it more accessible and to bridge the gap between design and development. From there, they built Dev Mode as a dedicated space within Figma, optimized for developers. The team iterated on user feedback, both internally and externally, to refine and enhance Dev Mode's features. The goal was to create a tool that allows developers to move faster, collaborate effectively, and build better products in alignment with design systems.
Design and Development Collaboration
The podcast episode highlights the importance of collaboration between designers and developers in order to build great products efficiently. It discusses how organizational alignment problems, such as using different tools or siloing information, can hinder the development process. The episode also emphasizes the role of design systems in maintaining product quality and the challenges faced by companies in getting developers to use them effectively.
Enhancing Dev Efficiency
The podcast explores the difficulties developers face in maintaining high efficiency as they scale and work on various day-to-day tasks. It mentions the frustrations of spending time searching for and understanding design changes and the need for clearer communication between designers and developers. Additionally, it highlights the potential of Figma's Dev Mode in increasing efficiency by offering features like customization, integrations with other tools like JIRA, and the use of plugins for code generation and design asset management.
This week on we’re joined by Emil Sjölander from Figma — talking about bringing Dev Mode to Figma. Dev Mode is their new workspace in Figma that’s designed to bring developers and design to the same tool.
The question they’re trying to answer is “How do you create a home for developers in a design tool?” We go way back to Emil’s startup that was acquired by Figma called Visly, how we iterated to here from 20 years ago (think PSD > HTML days), what they did to build Dev Mode, what they’re doing around codegen, the popularity of design systems, and what it takes to go from zero to Dev Mode.
Changelog++ members get a bonus 5 minutes at the end of this episode and zero ads. Join today!
Sponsors:
Neon – The fully managed serverless Postgres with a generous free tier. We separate storage and compute to offer autoscaling, branching, and bottomless storage.
Traceroute – Listen and follow Season 3 of Traceroute starting November 2 on Apple, Spotify, or wherever you get your podcasts!
Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.