← Daniel Clark
07 / 07 SLDS 2 Design System Integration

Sign in to edit

Get the deep dive

The full story behind SLDS 2 Design System: the research, the design decisions and how the team got there. Leave your details and I’ll send it to you.

Used only to send you the deep dive. Never shared.

Deep dive requests
    07 · Salesforce · SLDS 2 & Figma

    SLDS 2 Design System Integration

    An agent that knows the new design system styling hooks and and platform, metadata all within Figma.

    TL;DR

    1. The user problem

      Design system answers lived in docs and in specialists’ heads, far from Figma and the code. SLDS 2 then moved to styling hooks only, so a new approach was needed.2

    2. How I led

      Our team was the first in the Salesforce platform builder ecosystem to integrate SLDS 2. I then built an agentic Figma plugin that answers in SLDS 2 and hands back code with a knowledge graph and ontology to increase query accuracy.

    3. Where it went

      Salesforce now ships SLDS AI skills for Claude Code and Cursor, and says AI with SLDS 2 writes up to 30% more accurate code.35

    Demo · 3:28 The SLDS 2 agentic Figma plugin: proof of concept

    Su, a designer, and Tom, a developer, ask the SLDS Agent in Figma and get SLDS 2 back

    The SLDS knowledge graph, From the demo
    From the demo The SLDS knowledge graph

    Components, tokens and patterns the agent draws its answers from
    Lightning Design System 2, lightningdesignsystem.com
    lightningdesignsystem.com Lightning Design System 2

    Summer ’26 v3.3.3, built on styling hooks
    30%

    more accurate code when building with AI and SLDS 2, Salesforce says

    Lightning Design System 2: AI tools
    60+

    tools in Salesforce DX MCP, including SLDS 2 best practices

    Lightning Design System 2: vibe coding and SLDS
    1:1

    the SLDS 2 Figma library, mapped to live code

    Salesforce: what is SLDS 2?, 20 February 2025
    01

    User problem

    A designer asks how deep a tree grid can nest. A developer asks which styling hook colors a page header. The answers sat in docs and specialists’ heads, far from the canvas, and SLDS 2 moved to styling hooks only, so yesterday’s answers stopped being right.2

    02

    My role

    Put SLDS 2 expertise where designers and developers already work, and make its answers the same every time.

    03

    How I led

    We integrated SLDS 2 first, then built an agent on top of it.

    01

    First to SLDS 2

    Our team was the first in the Salesforce ecosystem to integrate SLDS 2, the version of the design system built on styling hooks alone.2

    02

    An agent inside Figma

    The SLDS Agent plugin answers on the canvas. Ask for a five-level nested structure for a tree grid, and it returns the structure and the best practices behind it.

    03

    Code for developers

    Ask for an opportunity details page, and it returns CSS written in SLDS 2 styling hooks.

    04

    Grounded, not guessed

    Answers come from object and component metadata and an SLDS knowledge graph, so the same question gets the same answer.

    05

    Two people, one tool

    Built for Su, a UX designer starting to code, and Tom, a full-stack developer.

    04

    Business outcome

    Salesforce has since shipped AI tooling for SLDS 2.

    01

    AI skills

    SLDS AI development skills now work in Claude Code, Cursor and Agentforce Vibes.3

    02

    Figma to code

    Salesforce pairs its DX MCP, with 60+ tools, with the Figma MCP to turn designs into SLDS 2 code.4

    03

    Accuracy

    Salesforce says building with AI and SLDS 2 generates up to 30% more accurate code, and calls SLDS 2 an agentic design system.57

    Put the expert in the canvas.Ground the agent in metadata.One answer for design and code.

    Sources

    1. Lightning Design System 2Summer ’26 v3.3.3
    2. Lightning Design System 2: FAQs
    3. Lightning Design System 2: AI development skills
    4. Lightning Design System 2: vibe coding and SLDS
    5. Lightning Design System 2: AI tools
    6. Salesforce: what is SLDS 2?20 February 2025
    7. Salesforce: the next chapter of experience design with SLDS 21 December 2025