Welcome!

AI & Design Systems Benefits Infomercial

Course Goals & Outcomes

Who This Course Is For

Meet Your Teachers

Our Collective AI Experience

Principles & Our Approach to AI

What To Expect

Chapter 1 Introduction

How did we get here? A brief fistory of technology & computers

History of design systems

AI as mortar for design system foundations

Design system definition

A design system's ingredients

The value of design systems

Design System Tools Intro

Figma Intro

Figma Component Walkthrough

Figma Variables Walkthrough

Code and Storybook Intro

Code and Storybook Walkthrough

Publishing a Component Library in Code

Documentation Tools

Design System Tools Summary

AI Tooling Overview Introduction

AI & Design Systems Environments & Tools Resources

What is FigmaLint?

Linting Components with FigmaLint

Figma Lint AI Model Integration and Features

What is the Design Systems Assistant?

Design Systems Assistant Overview

Connecting The Design Systems Assistant to ChatGPT

Documentation: Integrating Grammarly with Design Systems

Using MCP Apps with Figma Console MCP To Analyze Design System

What is the Figma Console MCP?

Installing Figma Console MCP

Part 1: Why Figma Console MCP?

Part 2: From System-Wide Awareness to Pinpoint Precision

Part 3: Figma Console MCP vs. Dev Mode MCP – Component Creation

Part 4: Unlocking Full Variable Access

Part 5: Plugin Development and AI Feedback Loops

Using the Figma Console MCP Effectively

Figma Console MCP Capabilities

Using Figma Console MCP for Enterprise Design System Applications

Implementing Code-Only Props Technique with Figma Console MCP

Figma Console MCP Design To Code Demo

Figma Console MCP Code To Design - Fixing Drift