Inspiration by VASA Works
Get started

Figma x LiT Workshop

A 45-slide Figma workshop talk deck built on full-bleed black slides, crisp white grotesque type, and vibrant Figma-brand color blocks, that teaches design-to-code workflows in Dev Mode, MCP, Make, and Code Connect.

45 slides · Talk

View deck overview
Collaboration in the Age of AI cover, dark-mode, minimal, dark
Cover
Hello LiT speaker intro, dark-mode, minimal, dark
Team
Workshop agenda step list, dark-mode, minimal, dark
Agenda
Idea to Product tangled diagram, dark-mode, minimal, dark
Diagram
Design to Dev tangled diagram, dark-mode, minimal, dark
Diagram
Design vs Implementation sketch, dark-mode, minimal, dark
Imagery
Code editor vs Figma siloed split, dark-mode, minimal, dark
Diagram
Figma platform isometric stack, dark-mode, minimal, dark
Diagram
Today's focus highlighted stack, dark-mode, minimal, dark
Diagram
Demo Good to know section opener, dark-mode, minimal, dark
Section
Handover from Design four-column contents, dark-mode, minimal, dark
Contents
Always updated Jira integration feature, dark-mode, minimal, dark
How It Works
Finish routine tasks fast AI feature, dark-mode, minimal, dark
How It Works
Annotation to give context feature, dark-mode, minimal, dark
How It Works
Developer Resources Dev Mode feature, dark-mode, minimal, dark
How It Works
Let's dive into Figma transition, dark-mode, minimal, dark
Section
Receiving Handover as Developer four-column contents, dark-mode, minimal, dark
Contents
Why Dev Mode feature with version history, dark-mode, minimal, dark
How It Works
Finding Specs with Ease, numbered how-to over Dev Mode capture, dark-mode, minimal, dark
How It Works
VS Code Integration, black text panel beside blue IDE capture, dark-mode, minimal, dark
How It Works
Dev Mode MCP Server, black text beside sage-green code capture, dark-mode, minimal, dark
How It Works
Let's dive into Figma, sticker-block transition slide, dark-mode, playful, dark
Section
How We Work, black section divider with stacked decorative tiles, dark-mode, maximalist, dark
Section
How to design-to-code, three-column theme overview, light-mode, minimal, light
Agenda
Three-column overview with first theme active, light-mode, minimal, light
Section
AI helps designers focus on the important problems, green statement with mockups, minimal, technical, vibrant
Value Proposition
Three-column overview with second theme active, light-mode, minimal, light
Section
With Make you can bring your designs to life, green slide with tablet mockup, minimal, technical, vibrant
Product Overview
With Make you can bring your designs to life, Whats next variant, minimal, technical, vibrant
Roadmap
Three-column overview with third theme active, light-mode, minimal, light
Section
Connect your design system in Figma to code, Code Connect slide, minimal, technical, vibrant
How It Works
Bring Figma into your dev's workflow, MCP server slide, minimal, technical, vibrant
How It Works
Relationships & Workflows, black section divider with shape cluster, dark-mode, maximalist, dark
Section
Great work blurs the lines between roles, black quote slide, dark-mode, minimal, dark
Statement
Design is for everything and everyone, statement over discipline bubbles, dark-mode, minimal, dark
Statement
The way many teams build products, build-steps diagram slide, dark-mode, minimal, light
Diagram
The future of building products diagram, dark-mode, technical, dark
Diagram
AI is a key part of it annotated diagram, dark-mode, technical, dark
Diagram
Q&A slide with cursor name tags, dark-mode, minimal, dark
FAQ
Resources section divider, dark-mode, playful, dark
Section
Figjam resources three-card slide, dark-mode, minimal, dark
References
Figma Design resources three-card slide, dark-mode, minimal, dark
References
Figma Make resources three-card slide, dark-mode, minimal, dark
References
Figma Dev Mode and MCP Server resources slide, dark-mode, minimal, dark
References
Figma logo closing slide, dark-mode, minimal, dark
Closing