Original: https://codingcat.dev/podcast/2-7-building-design-systems-with-backlight-dev
▶ Watch on YouTube & Subscribe to CodingCat.dev
**Building Design Systems with Backlight.dev **is a CodingCat.dev podcast episode featuring m4dz alongside Alex Patterson and Brittney Postma focused on Design, GitHub, Builder.io. We sit down with m4dz, developer advocate from the <div>RIOTS team. We talk all about the Backlight.dev design system. Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.
Questions
- Can you explain what divRiots is and what you work on?
- What is Backlight.dev?
- What are some of the struggles for starting a design system that Backlight is addressing?
- Demo backlight.dev
- What frameworks can be used with backlight?
- How does backlight give you the code once you are done customizing it?
- Where does the design piece of the design system come in?
- Is code driven development the future of building design systems?
- Who is Backlight's target audience, marketers or developers?
- Do you know about complexity cliffs and what are your thoughts on single components for every use case?
Additional Links
- Storybookjs - https://storybook.js.org/
- Monaco - https://microsoft.github.io/monaco-editor/
- Vite - https://vitejs.dev/
Technical Overview: Building Design Systems with Backlight.dev
2.7 - Building Design Systems with Backlight.dev: We sit down with m4dz, developer advocate from teh divRIOTS team. We talk all about the Backlight.dev design system. https://codingcat.dev/podcast/2-7-building-design-systems-with-backlight-dev Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experien
When applying the concepts from Building Design Systems with Backlight.dev in a production codebase, teams working with Design, GitHub, Builder.io, Svelte should align their implementation with the web.dev UI & Design Patterns (Responsive web design, typography, color systems, and UX patterns). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.
Key Engineering Takeaways
- **Core Topic Focus: **Practical strategies for Design, GitHub, Builder.io, Svelte covered in "Building Design Systems with Backlight.dev" (We sit down with m4dz, developer advocate from the <div>RIOTS team. We talk all about the Backlight.dev design system.).
- **Production Implementation: **Combine the architectural patterns demonstrated in this podcast with the official web.dev UI & Design Patterns for type safety, performance, and long-term maintainability.
- **Hands-On Video Walkthrough: **Follow along with the live coding demos and discussion on YouTube (Building Design Systems with Backlight.dev) and subscribe to CodingCat.dev on YouTube for weekly deep dives.
Video Chapters & Timestamps
Jump directly to any segment of Building Design Systems with Backlight.dev on YouTube using the timestamped chapters below:
- 00:00: AM (EST)
- 00:00: Intro
- 00:00: Sirens Streams Backlight.dev with SvelteKit - https://www.youtube.com/watch?v=S9BxYHBwYvo&list=PL8bMgX1kyZTgzMPaoZd1ea3l8elUC4fvS&index=3
- 00:00: Intro
- 00:00: How did you get into divRiots
- 00:00: What does your job as a dev advocate entail?
- 00:00: What is backlight.dev?
- 00:00: Why is it a problem for people to structure a design system?
- 00:00: starter kits
- 00:00: Demo
- 00:00: What is the flow for publishing and installing?
- 00:00: Builder.io Ad
- 00:00: Storybook integrated
- 00:00: Coding in the browser (Monaco) - https://microsoft.github.io/monaco-editor/
- 00:00: Vite
- 00:00: Client to figma to backlight
- 00:00: Code driven development
- 00:00: Collaboration
- 00:00: Target audience
- 00:00: Complexity of components
Resources, Links & Official Documentation
- *Watch on YouTube: *Building Design Systems with Backlight.dev Full Video (plus Subscribe to CodingCat.dev)
- *builder.io: *https://Builder.io
- *:20 - Sirens Streams Backlight.dev with SvelteKit: *https://www.youtube.com/watch?v=S9BxYHBwYvo&list=PL8bMgX1kyZTgzMPaoZd1ea3l8elUC4fvS&index=3
- *:28 - Figma Tokens: *https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens
- *Show Pick: *Will Smith Audio Book (picked by Alex Patterson)
- *Show Pick: *Figma Complex Component Architecture (picked by Alex Patterson)
- *Show Pick: *Build Your Own Design System - Learn with Jason (picked by Brittney Postma)
- *Show Pick: *Building Design Systems in SvelteKit (picked by Brittney Postma)
- *Show Pick: *How I Met Your Mother (picked by m4dz)
- *Show Pick: *Open Props (picked by m4dz)
- m4dz Guest Profile & Episodes on CodingCat.dev
- m4dz on GitHub
- Episode Sponsor: Builder.io
- web.dev UI & Design Patterns: Responsive web design, typography, color systems, and UX patterns
- GitHub Documentation: Pull requests, GitHub Actions CI/CD, and repository security
- Builder.io Developer Documentation: Visual headless CMS, SDKs, and design-to-code workflows
Related CodingCat.dev Tutorials & Podcast Episodes
- Building & Maintaining Design Systems: Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too.
- Using No-Code with Builder - Part 2: Alex and Brittney sit down with Steve Sewell, Co-Founder and CEO of http://builder.io/, to understand how http://builder.io/ is different from other no-code sol...
- Design Systems: From Atomic Design to a Global Solution: Dive into the world of creating and maintaining successful design systems, unpack the layer cake approach, and explore the potential future of a global design s...
Frequently Asked Questions (FAQ)
What are the main takeaways from Building Design Systems with Backlight.dev?
We sit down with m4dz, developer advocate from the <div>RIOTS team. We talk all about the Backlight.dev design system. 2.7 - Building Design Systems with Backlight.dev: We sit down with m4dz, developer advocate from teh divRIOTS team. We talk all about the Backlight.dev design system. https://codingcat.dev/podcast/2-7-building-design-systems-with-backlight-dev Sponsors
https://Builder.io
Empower your entire team to visually create and optimize high-speed experien Throughout this podcast, m4dz breaks down real-world implementation details for Design, GitHub, Builder.io so developers can apply these patterns directly in production.
How do you implement Design best practices in production?
When adopting Design and GitHub in a production stack, start by validating your configuration against the web.dev UI & Design Patterns (Responsive web design, typography, color systems, and UX patterns). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.
Where can I watch the full Building Design Systems with Backlight.dev walkthrough and find related code resources?
You can watch the complete video session for Building Design Systems with Backlight.dev on the CodingCat.dev YouTube channel. For a deeper dive into Design, check out our related guide: Building & Maintaining Design Systems.
Top comments (0)