中文
Figma Config

A three-step method road-tested on SAP's complex design system: turn your design system into a Kit and templates that Make will actually use.

Figma deep dive: Make | Config 2026 · Laura

30 min
Design-to-CodeAgentContextAI Product

29 min total·Actually worth watching closely: ~14 min·3 must-watch clips

Orange = the 14 minutes worth watchingFor the rest, the guide is enough
Segment guide · 6 segments
  1. 0:17 7:21Listen

    Debunking "Make doesn't know my design system"

    An opening clarification of the most common complaint: Make can absolutely produce output on your design system — the problem is that nobody taught it how. Sets out the three ways in — design system support in Figma, code layers, and your local code base — along with the conceptual frame for the talk.

    Handing Make a component library achieves nothing; you have to teach it your system through a structured path.

    Pure spoken argument and conceptual setup, with nothing critical on screen — fine to listen to on a commute.▶ Jump to 0:17
  2. 7:21 12:01Listen

    The three core files of machine-readable guidelines

    How to break human guidelines into a bite-sized, multi-file structure: guidelines sets the product's personality and the required reading order, discovery teaches the agent to navigate so it doesn't hallucinate, and setup spells out imports and build config. For SAP the whole conversion took about 42 minutes.

    guidelines, discovery, and setup are the structural foundation that lets Make — or any LLM — use your design system well, and the conversion is easier than you'd expect.

    Mostly spoken explanation of what each file does, with nothing to watch — remembering the division of labor is enough.▶ Jump to 7:21
  3. 12:05 18:14Watch

    Hands-on: building the SAP Make Kit from scratch

    Brett builds a Kit live from the gear-cog entry point: comparing the library styles and NPM package routes, selecting the full set of SAP UI5 packages into package.json, then bulk-importing the machine-readable guidelines and replacing the placeholder files.

    More advanced teams take the NPM package route; drag in about two guideline folders at a time so you can pinpoint problems, and never delete the default Guidelines entry file.

    A real product walkthrough end to end — the entry points, the changes in the file tree, and the import details all have to be seen to be followed.▶ Jump to 12:05
  4. 18:14 21:40Watch

    Testing before publishing: compliance skill and component showcase

    A robust prompt close to your real product generates a full screen, then the Fury compliance-check skill verifies the output uses real design system components; before publishing, the start screen is rebuilt into an interactive component showcase, with the name, thumbnail, and versioning set.

    Don't YOLO-publish — a "make me a button" test passes far too easily; a full-screen generation plus a compliance skill is what actually verifies it.

    The compliance score and the showcase are the key visual evidence — listening alone misses what verification actually looks like.▶ Jump to 18:14
  5. 21:40 25:36Watch

    Building team templates on top of the Kit

    Laura attaches the published Kit, then generates a page template from a single extremely detailed scaffolding prompt with no designs attached, and builds in an onboarding overlay and a presets/recipes panel that lets anyone switch the whole interface in one click.

    Generating a template from prompt alone, strictly limited to the NPM packages and guidelines, is the hard test of whether your design system and Kit hold up.

    How the long prompt is written and how the onboarding and presets panels actually behave are all on screen — that's where the substance of this section lives.▶ Jump to 21:40
  6. 25:36 29:27Listen

    Closing: an expanding map of deliverables and a governance loop

    A wrap-up on how design deliverables are growing from the library and documentation to guidelines, skills, Kits, and templates — and how a Kit update pushes down to every template and Make file consuming it, forming a continuous governance and feedback loop.

    The point of this infrastructure isn't to make individuals stronger; it's to let a whole team prototype in code, on top of the design system.

    Closing argument and vision, with nothing on screen — the conclusions are enough.▶ Jump to 25:36