Agentic AI

Coding with AI

AI Workflows

Claude Code

OpenClaw

Vibe Coding

AI Evals

AI Transformation

RAG & Search

AI for PMs

AI for Engineers

AI for Designers

AI for Marketers

AI for Founders

Product

Product Sense

Product Discovery

User Research

Prototyping

Growth

Analytics

Tech Foundations

Strategy

Influence

Leadership

Career Growth

Engineering

Machine Learning

LLM Ops

Context Eng

Security

System Design

Design

Figma

Design Systems

Visual Design

Design Strategy

Marketing

Automation

Content Marketing

Demand Gen

Go-to-Market

Product Marketing

Positioning

Social Media

Brand

B2B Marketing

SEO & AEO

AI for Leaders

AI Governance

Communication

Management

People Operations

Exec Presence

Storytelling

Goal-setting

Personal Brand

Founders

Fundraising

More

Everyone

Operators

Data Scientists

Business Analysts

User Researchers

Customer Success

Project Managers

HR Professionals

Sales People

Lawyers

Finance

Investors

Real Estate

Educators

Creators

Working with code as the raw material of software will change how you see design and what you can do with it.

Design Teacher

General Assembly

Ironhack

Edenspiekermann

BuzzFeed

Cantilever Web Design & Development

Nevan Scott

Designer/developer since before it was uncool

This is the pilot. Things will be rough, and will change. We need your feedback to make it better!

Cohort 1

Cohort 2

Making software is supposed to be fun! And this six weeks is packed with the most fun I’ve had in my 15-year teaching career.LLM-assisted coding tools can put you in the driver’s seat, working with the real materials of your craft. I’m seeing designers do things I didn’t think I’d ever get to see designers do.For as long as I can remember, product designers have been pushed away from code. Most designers settled this question for themselves long ago—code is not for me. Now is a great time to reconsider that decision. You can have a relationship with what feels like real work without spending years mastering syntactical minutiae.Working on a design with code is an act of shaping: you’re shaping something out of the raw materials yourself. And as you shape it, you can actually interact with it, get the feel of it. This means you can work on a user interface the way it really works.As designers, we enjoy making things. Working with code is a fantastic opportunity to feel connected to the thing you’re making.Read on to find out more about the course, but keep in mind that the most important things that happen in my classroom <a target="_blank" rel="noopener noreferrer nofollow" href="https://buttonschool.com/classroom/">have nothing to do with the syllabus</a>.

Learn how to use AI coding tools to build your own designs

Take the driver’s seat when working with LLM coding tools

Read code to understand the shape of what you’re making

Form a strong mental model of the architecture of what you’re building

Any amount of knowledge will work in your favor, but the course is made for designers with little-to-no coding skills.

No previous coding experience is required

The course leans into understanding—not just generating—so a desire to go beyond surface-level outputs will help you get the most out of it.

Curiosity about how things work under the hood

You should be comfortable making product decisions and thinking beyond individual screens.

Experience designing real-world products

Product designers with solid design experience but little (or zero) coding knowledge who want to build working apps of their own creation.

Product designers comfortable in tools like Figma who want to understand how web apps work and are ready to learn new tools and thinking.

Product designers who want to cut through the noise by learning how to use AI coding tools with structure, intention and control.

From Figma foundations to shipped product — in 5 weeks.

Founder moonlearning · 2× Config Speaker

Christine Vallaure

Founder, moonlearning.io · 2× Figma Config speaker · Awwwards Jury

Most designers are feeling it. Figma is evolving fast, AI is changing how products get built, and the gap between design and the final product keeps shrinking. Staying relevant means more than knowing the tools. It means understanding how your work connects to what actually ships.This course was built for exactly that moment.You'll build a structured, scalable UI from the ground up, running through all core features, work on a real project, and use AI tools to bring your designs to life. Along the way, you'll build a clear picture of how Figma connects to front-end code and modern workflows.You'll leave with practical confidence, a reusable UI blueprint, and the skills to work at the intersection of design and building. <h3>How it works: 🧭 A proven learning structure: how it works → why it matters → design ↔ code → workflow</h3>✍️ Hands-on exercises that turn learning into action📌 Weekly feature focus: essentials first, extra mile optional🧩 One real website project that connects everything into a cohesive whole🔀 A hybrid format: self-paced videos plus live sessions with Christine🚀 From design to live product, ship with Figma Sites, MCP, and AI-assisted code

The complete Figma course: Master the foundations most skip. Stay ahead with AI.

From pretty screens → a scalable UI foundation

From feature overwhelm → using Figma features with purpose

From trial and error → predictable UI behavior

From handoff friction → design–dev understanding

From Figma file →  live product, shipping with AI

This course builds on basic Figma knowledge. You should know your way around the interface and core tools.

You should already be comfortable with:

Designers levelling up in FigmaYou know the basics, but want more confidence in how your UI is set up and how you use Figma’s features.

Designers working in teamsYou collaborate with designers and developers and want clearer structure, better handoff, and fewer file headache

Developers learning FigmaYou use Figma and want to understand how UI is set up, what’s possible, and where design decisions live.

Master responsive layouts, reusable components, and scalable design systems in Figma to ship polished UI faster.

Advanced Figma March 2026

Advanced Figma May 2026

Advanced Figma is a 4-week course for going beyond the basics—master auto layout, components, and variables to build scalable, responsive UI systems. A cohort-based experience—learn in a small group, guided by Nevan through practical live sessions. Hands-on content—learn how Figma’s core systems work together through clear guides, exercises, and applied projects. Expect to spend ~4–6 hours per week building responsive layouts, reusable components, and a flexible design system you can apply to real work.

Master everyone’s favorite design tool

Responsive Layouts

Reusable Components

Composable Structures

Scalable Design Systems

You should already be comfortable using Figma day to day.

Not for beginners

Basic layout, typography, and components are assumed.

Not a UI fundamentals course

This course focuses on advanced, hands-on Figma workflows.

Strongly tools-focused

UI and product designers who already use Figma and want to master advanced layout and component workflows.

Designers responsible for building or maintaining component libraries and design systems in Figma.

Designers who want deeper control, speed, and consistency when working in Figma on real products.

Design Figma Files That Scale

Founder moonlearning · 2× Figma Config Speaker · Awwwards Jury Member

Using powerful features isn’t the goal. Knowing when they help and when they get in the way is.

Why overengineering can be the fastest way to break a file

Variables, components, states, and naming. How each piece works together to keep a file calm and predictable as projects

The structure behind files that scale

Sustainable workflows aren’t about perfection. They’re about files that can be understood, changed, and reused over time

Build Figma files that stay usable months later

Doing More With Your Design System in Figma

TJ Pitre

Founder & CEO at Southleft

Joey Banks

Founder & CEO at Baseline Design

Learn how to structure components and libraries that stay flexible and are easy to maintain over time.

Build components and libraries that scale

Explore how Dev Mode and MCP bridge design and code to build more connected systems.

Connect design and engineering

See how components behave in context using Figma Make, MCP, and Storybook.

Explore your components beyond the canvas

Level Up Your Team with Variables in Figma

Founder of Baseline. Prev. building design systems at Webflow, Twitter, & Figma.

Learn how variables can save you and your team time when building designs, managing systems, and creating prototypes.

Learn how to use variables in Figma

Gain insights for for naming and storing variables and collections to create primitive and semantic variables.

Help your team create primitive and semantic variables

Learn tips and new methods to save you time as you create, organize, and work with variables.

Several advanced techniques and time-saving features

Discover practical skills and strategies for using and creating variables within designs and prototypes.

Join with your team and learn together

How to build consistent and scalable designs

Maxime Rabot

Independant visual designer & founder of House of Maestro

Manage your typography, colors, spacing and avoid any guesswork when building your design templates.

Learn best Figma features and design system best practices

Understand the logic of design systems and use atomic design methodology to build digital products.

Design and build with design system thinking in mind

Prepare your work for development handoff and learn how to set a common language.

Prepare for development

Styling AI Prototypes: Design Systems, Tailwind and ShadCN

Anna Arteeva

AI educator, former Head of Product Design at Payoneer

A quick tour of design variables, colour and typography tokens, UI libraries and design systems.

Styling basics for AI prototypes

A plain language walkthrough of how Tailwind and ShadCN work and how to avoid the generic AI UI look

Tailwind and ShadCN, demystified

Turn your logos, colours, type styles and spacing rules into a reusable system to apply consistently across all projects

Brand assets and design tokens

Practical options for reusing design system components instead of rebuilding buttons and cards from scratch.

Bringing your design system into AI tools

Figma Slots: Build Flexible UI Without Detaching

Nima Tahami

Product Designer & Builder (ex-iOS Developer) Founder at Mokline

Learn how to create components that adapt to real content without breaking or requiring detaching.

Build flexible UI components with Figma Slots

Simplify your design system by reducing variants and building more maintainable, flexible components.

Replace variants with scalable Slot-based design systems

Apply Slots to practical UI patterns you’ll actually use in products like cards, lists, and dynamic layouts.

Design real product UIs using Slots (cards, lists, layouts)

From Pixels to People: Building Systems Together in Figma

Jon Delman

Design Systems @ Workiva

Explore the features we rely on most for building design systems and how they’ve improved collaboration and outcomes.

Our favorite Figma features for design systems

Learn how to begin working with design systems and build stronger connections with designers and developers.

Get practical advice for building your skills, connecting with others, and starting a career in design systems.

Design Systems

Cohort-based courses

Free Lightning Lessons

Design Figma Files That Scale

Doing More With Your Design System in Figma

Level Up Your Team with Variables in Figma

How to build consistent and scalable designs

Styling AI Prototypes: Design Systems, Tailwind and ShadCN

Figma Slots: Build Flexible UI Without Detaching

From Pixels to People: Building Systems Together in Figma

Variables for Design Systems

Creating a Smoother Designer to Developer Hand-off

Design System Strategy: Your 2025 Blueprint for Success

Build a Component Library with AI Prototypes

You may be interested in