Every lesson in the shadcn/ui + Figma slide course, in full text: 6 decks, 576 slides.
Session 5: Composition — Responsive Layouts, Blocks & PagesSession 5 of the shadcn/ui and Figma series, in which Gordon composes a complete, responsive Aster homepage entirely from his themed components. It teaches the hierarchy that runs from components to blocks to pages, "blocks" being shadcn's own term, then covers responsive design in Figma - the Tailwind breakpoints sm, md, lg, and xl, constraints, minimum and maximum width, and wrapping Auto Layout - and maps all of it onto responsive Tailwind such as grid-cols-1 md:grid-cols-3, flex-col md:flex-row, hidden md:flex, max-w-*, and container. The usual suspects (navbar, hero, feature grid, pricing, and footer) are built as worked examples that read off their own responsive classes, and spacing and type stay on the scale at every breakpoint. The session includes a compose-a-responsive-page pattern, a breakpoint table, four checks, three traps, and a fully scaffolded your-turn build of the Aster homepage at desktop and mobile with a per-section self-check.
Session 6: Design-to-Code HandoffThe capstone session of the shadcn/ui and Figma series. Gordon scaffolds a real shadcn project with npx shadcn init and add, learns where the theme lives in code - globals.css, with :root, .dark, and @theme inline - and pastes in his tweakcn OKLCH values. The session then compares the three handoff paths honestly: Dev Mode with Code Connect, Figma-to-code plugins and AI, and manual mapping. Finally he reads a component's source, the cva variants in button.tsx, so that he can customize it, because he owns the file. It ends with a fully scaffolded your-turn build that renders the Aster landing page in light and dark, and with the series capstone.
Session 3: Design Tokens & Theming — the Heart of ItSession 3 of the shadcn/ui and Figma series for Gordon, a designer shipping his Aster studio landing page, and the heart of the system. Tokens come in three layers: primitive palette values feed semantic role variables, which in turn feed light and dark modes, so a whole kit can be retinted by editing a handful of --primary, --muted, and --accent values instead of changing colors component by component. The session covers OKLCH - the oklch(L C H) notation, why it is perceptually uniform, and why Tailwind v4 and shadcn default to it - along with the single --radius that drives the entire corner scale through calc(), and tweakcn.com as a visual theme editor that round-trips to a real globals.css (:root, .dark, and @theme inline) and to a Figma-compatible theme. In the scaffolded your-turn build, Gordon crafts Aster's violet brand theme in tweakcn using oklch(0.55 0.24 285) and a radius of 0.625rem, tunes dark mode, exports globals.css, and imports the Figma theme. There are four checks, three traps, one pattern in the retheme recipe, the continuing Aster example, and real OKLCH values throughout.
Session 1: Foundations & the Design-to-Code Mental ModelSession 1 of the "Designing & Shipping with shadcn/ui in Figma" series, written for Gordon, a designer building the Aster studio landing page. It closes the design-to-code gap by teaching the three layers: Tailwind supplies utility-first CSS, Radix supplies headless accessible behavior, and shadcn/ui supplies styled components that you copy into your repo and then own. The deck's key idea is the difference between copying components in and depending on a closed library. It includes a guided tour of the Figma shadcn kit - the Pages, the Assets panel, and the Variables panel - mapped one-to-one onto code, a "which layer owns this?" decision recipe, four checks, three traps, and a scaffolded your-turn build in which Gordon recreates an Aster profile card from the kit's Card, Avatar, Badge, and Button parts. The homework is to browse ui.shadcn.com and list five components the Aster site will lean on.
Session 4: Radix & Component AnatomySession 4 of the Designing & Shipping with shadcn/ui in Figma series, in which Gordon learns to configure any kit component through its properties and to account for every interaction state. It explains what "headless" means - Radix supplies the behavior and accessibility while shadcn adds the Tailwind skin - and covers Figma component properties, where a variant property swaps a whole style and a boolean property toggles a single feature, demonstrated on the real Button variant and size set. It then works through the five interactive states that matter (default, hover, focus-visible ring, active, and disabled), with particular attention to focus-visible for keyboard accessibility. A scaffolded your-turn build brands the Aster primary Button and Input and documents all their states, alongside the configure-a-component pattern, four checks, and three traps drawn from real designer misconceptions.
Session 2: Tailwind's System, Made Visual in FigmaSession 2 of the Designing & Shipping with shadcn/ui in Figma series, in which Gordon learns to think in tokens and utilities and to translate any Auto Layout frame into Tailwind classes. It covers utility-first thinking - composing classes rather than writing bespoke CSS - and the four scales he lives in: spacing on a 4px base, the color palette, the type scale, and the radius scale, each with tables and SVG rulers. Auto Layout is mapped onto flexbox control by control, with a mapping table and an annotated frame, and a repeatable recipe lets him read any frame off as classes. The scaffolded your-turn build works on the Aster site: he builds the pricing card with Auto Layout and spacing and radius variables, compares an eyeballed rebuild against a token-based one, blocks out the five homepage sections on the scale, and reads the frame's Tailwind aloud. The frame-to-classes pattern comes before every check, and the session includes at least four checks, three traps, and homework.
Want this taught 1-on-1? Alexander tutors shadcn/ui + Figma — $55/session, free consultation.