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.

Summary

A 45-slide Figma workshop talk (Figma x LiT) on collaboration and design-to-code in the age of AI. Its personality is the Figma house style: full-bleed black slides, crisp white grotesque headlines, tiny monospace eyebrows, and saturated Figma-brand color blocks used as graphic punctuation between content slides.

Visual description

Slides run 16:9 on a near-black field (#000000) with white type set in a Helvetica/Inter-like grotesque sans; headlines are large and lowercase-to-sentence-case, body copy is medium-weight with arrow bullets. Section and utility labels appear in small all-caps monospace ("GOOD TO KNOW", "CODE EDITOR", "FIGMA"). The deck's signature recurring layout is a centered black rounded rectangle holding a diagram or hand-drawn illustration, set inside a pale mint-green (#E8FCC2) full-bleed border, with a dark caption sentence below it. A second recurring layout is the four-column numbered list: big "GOOD TO KNOW" eyebrow, a two-line headline, then four hairline-divided columns each numbered 1 to 4 with a label pinned to the bottom. Feature slides split the frame: black text column on the left, a real Figma/Jira/Dev Mode UI screenshot bleeding off the right edge over a vivid color panel (lilac, mint, cyan, green). Brand color blocks recur as full graphic moments: the cover stacks tall rectangles of pink, ochre, lime, purple, gray, and indigo with cut-off geometric glyphs; transition slides ("Let's dive into Figma") arrange colored pill-buttons and Figma/Make/FigJam mark fragments in a row. A repeated 3D isometric stack diagram shows Figma's product surfaces (FigJam, Slides, Design, Sites, Make, Dev Mode) layered over a green "Figma AI" platform plane. Throughout, the palette pulls from Figma's brand spectrum: indigo-blue (#4B4EFF), Figma green (#5CE075), coral-orange (#FF5C39), plus pinks, lilacs, and ochres.

Key takeaway

The discipline of an all-black deck where every slide is white type plus one vivid graphic idea, so color reads as deliberate punctuation rather than decoration. The mint-bordered black diagram card is a reusable container that makes any chart, sketch, or screenshot feel framed and intentional. The monospace eyebrow over a large grotesque headline is a clean, technical hierarchy worth copying for any developer-facing talk.

Reuse notes

A strong reference for workshop, conference talk, and developer-tool decks, and for any technical presentation that needs to stay legible and high-energy across 40-plus dark slides. The four-column numbered "agenda preview" layout and the split text-plus-UI-screenshot feature layout are directly reusable. The Figma-brand color blocks and product glyphs are bespoke to Figma; swap them for your own brand spectrum. Needs real product screenshots to carry the feature halves and at least one good illustration for the framing cards.

More like this