Figma x LiT Workshop
Workshop deck for Figma x LiT that teaches designers and developers practical design-to-code workflows using Dev Mode, MCP Server, Make, Code Connect, and VS Code integration.
Show all
The deck argues that AI-assisted tooling and design-aware code reduce handoff friction, speed prototype validation, and keep implementations aligned with design systems, and includes hands-on demos, annotation best practices, and resource links
- Slide 1: Collaboration in the Age of AI
- Slide 2: Nathalie Kowalczyk (Product Designer) and Riccardo Erra (Developer Advocate)
- Slide 3: Intro & Goal Setting · Hands-on Demo · How We
- Slide 4: Building well-designed products requires time and effort
- Slide 5: Moving from design → dev is not a streamlined process
- Slide 6: A huge challenge in product development is this disconnect
- Slide 7: Why? Because design and code have been siloed
- Slide 8: Figma's platform is evolving to bring design and development closer together
- Slide 9: Today we are taking a closer look at Figma Design
- Slide 10: Demo: Good to know
- Slide 11: Handover from Design Perspective
- Slide 12: Link Figma files into Jira and Confluence
- Slide 13: Finish your routine tasks fast
- Slide 14: Annotation to give context
- Slide 15: Details what developers can extract from Figma:inspectable CSS/Swift/Kotlin values, downloadable
- Slide 16: Let's dive into Figma
- Slide 17: Receiving Handover as a Developer
- Slide 18: Summarizes Dev Mode capabilities:Focus View to isolate frames, an interactive
- Slide 19: Finding Specs with Ease
- Slide 20: Describes the Figma for VS Code extension: browse design files
- Slide 21: Dev Mode MCP Server
- Slide 22: Let's dive into Figma
- Slide 23: Frames the talk's collaboration workflow and principles for designer–engineer handoffs
- Slide 24: How to design-to-code and collaborate in the age of AI
- Slide 25: Automate away the tedious tasks & empower designers
- Slide 26: AI helps designers focus on the important problems
- Slide 27: Enable a true prototype-first culture
- Slide 28: With Make, you can bring your designs to life
- Slide 29: What's next? Expanded Design System support
- Slide 30: Bring design and code closer together
- Slide 31: Connect your design system in Figma to code
- Slide 32: Bring Figma into your dev's workflow
- Slide 33: Introduces the section on cross-team relationships and workflows that connect
- Slide 34: Great work blurs the lines between roles
- Slide 35: Design is for everything and everyone
- Slide 36: The way many teams build products leaves room for error
- Slide 37: The future of building products
- Slide 38: …and AI is a key part of it
- Slide 39: Open question-and-answer session led by Nathalie and Riccardo to address
- Slide 40: Provides resources and further reading to help teams adopt
- Slide 41: Curated FigJam resources: FigJam FAQs in the Help Center, guidance
- Slide 42: Key Figma Design resources including the Help Center, a Master
- Slide 43: Figma Make resources: the Make Prompt Assistant GPT on ChatGPT
- Slide 44: Figma Dev Mode & MCP Server
- Slide 45: Final sign-off with the Figma logo centered as the deck's
Related decks
Fresh decks, weekly
A roundup of what's new in the gallery