Config IndiaFigma, October 15
Figma Make sites now ship with an admin panel the client can run
Prompt a site in Make and Payload sets up the database, file storage, logins, and an editing panel at /admin. The designer builds it; the client updates it after launch.
Today's art direction
The Handover Workshop
A course landing page on vivid marigold, set in heavy mono over a bookish serif, with a buy-box that never leaves.
Workshop and course pages sell a short commitment, so they keep the facts a buyer checks in one fixed card: when, how long, what it costs, what you cover. Here that card is the masthead. It holds the issue number and date, and its syllabus is the page's own navigation.
The ground stays one flat saturated yellow, and the reading happens on cream sheets. Red is kept for lesson numerals and the price, so the eye always knows where a lesson starts.
- Buy-box rail
- Syllabus nav
- Lesson numerals
- Cream sheet
- Role table
- Flat marigold
- Still-life plate
Tooling
Payload gives every Make site a back end and an editing panel
Figma's Payload announcement says that prompting an app in Make now sets up a database, file storage, user login, and an admin panel, with Figma hosting the back end. After publishing, the panel lives at the site's address plus /admin. Payload joined Figma in 2025 and stays open source for anyone who would rather self-host.
API keys sit in Make's settings and stay hidden from visitors on the published site. Payload is on all plans with access rolling out over the coming weeks, and hosting is a free beta for now.
Who touches what
| Role | Where they work | What they change |
|---|---|---|
| Designer | Make, by prompt | The site itself, built around real content instead of placeholder copy |
| Marketer | The /admin panel | Articles, copy, tags, media, category order, versions, and publishing |
| Developer | Payload's codebase | Custom behavior, using the open-source framework |
Granular permissions decide who can change what, which is the part a client contract usually has to spell out by hand.
What the client can do without you
- Create an article
- Edit page copy
- Tag entries
- Swap an image
- Reorder categories
- Review earlier versions
- Publish
“Payload gave my team a content system anyone can manage.”Noah Trevino, lead designer at IBM, in Figma's post
You leave with: a way to quote a small CMS site without a separate back-end build. Price the hosting as unknown until Figma publishes it.
Technique
Code Layers open to everyone, and they round-trip to a pull request
Figma first showed code on the canvas at Config in June, which issue 053 covered. As of today, Code Layers are in open beta on all plans. A layer can come from a GitHub repo or local folder, a coded prototype from another tool, a live site captured with Figma's Chrome extension, a Figma design converted into interactive code, or a prototype made through the Figma MCP server.
Extract designs turns a code layer's screens back into editable frames, and changes can be pushed to a branch for review as a pull request. Creating and editing code layers is free on paid plans through November 4.
You leave with: a way to redesign a client's live site on the canvas starting from what is actually deployed, not last year's mockup.
Workflow
Specs puts the Markdown brief on the canvas, next to the frames
Figma Specs is in open beta on paid plans across Figma and FigJam. Drag a .md file onto the canvas or press D to start one, then embed frames, FigJam files, or individual nodes beside the text. The Figma agent can reply to comments, GitHub and Hex connectors pull in outside data, and a finished spec can go to a coding tool through the Figma MCP server.
You leave with: one file that holds the brief and the frames it describes, which is what a coding tool needs to build the right page.
Design move: borrow this pattern
The buy-box rail: facts in view, syllabus as navigation
On any page that sells a short commitment (a course, a workshop, a retreat, a consult package), pin one card beside the content. It carries the four facts a buyer keeps scrolling back to check, then a single action, then the outline of what they get. Each outline item links into the page.
- Use it for
- Courses, workshops, events, and fixed-scope service packages, where the decision rests on date, length, and price.
- Keep it honest
- Four facts, at most. A real price or an honest "free while in beta", never a countdown. The outline matches the page's actual sections.
- On mobile
- Unpin it and put it straight after the hero, so the facts come before the lessons rather than floating over them.
Prompt Lab
Course materials: the prompt
Build a landing page for a one-afternoon workshop (course / education page).
Layout: a two-column page on desktop. Left column holds the content; a 340px right rail holds a sticky "buy-box" card (position: sticky, top 24px) that stays in view for the whole page. On screens under 1020px the rail becomes a normal block placed directly after the hero.
Buy-box card: cream #FFF7E6, 2px ink #1B1712 border, 10px radius. Top to bottom: a small red uppercase mono label ("Workshop, one afternoon"), a large heavy mono title, then a definition list of exactly four facts (date, length, number of lessons, price), labels in small umber #5A4A2E mono caps on the left, values right-aligned, hairline rules between rows. The price is in heavy mono red #C1271A. Then one solid ink button with cream text ("Start lesson 01"). Then an ordered syllabus list where each item is a link to its lesson anchor, numbered 01, 02, 03 in heavy red mono.
Hero (left column): a mono kicker with one filled ink label, a heavy mono headline (Azeret Mono 800, about 64px, tight negative tracking, max 15ch), a serif deck at 22px (Literata), a primary button and a mono text link. Below it, one contained photograph at 3:2: an overhead editorial still life on red linoleum, hard key light, no text in the image.
Lessons: each lesson is a row with a giant red mono numeral (about 112px) in a 150px left column and a cream sheet on the right with a 2px ink border. Inside: a red mono caps label, a mono h2, serif body paragraphs, and a closing "You leave with:" line above a 2px ink rule. Use one real table inside a lesson (role, where they work, what they change). The final lesson is the design move, inverted to an ink sheet with cream text.
Ground: one flat vivid marigold #F0B429 across the whole page, no texture, no gradient. Reading always happens on cream sheets, never directly on the yellow at body size.
Type: Azeret Mono (500, 700, 800) for headlines, labels, numerals, and buttons; Literata (400, 400 italic, 600) for all reading text. One italic serif pullquote only.
Guardrails: body text at least 18px with line-height 1.65 or more and about 65 characters per line; WCAG AA contrast for every label against its real background (red only at large sizes on yellow); hover and focus states on every link and button with 150ms easing and a prefers-reduced-motion guard; radius 10px on cards and 6px on buttons, no pills; no gradients, glows, neon, emoji icons, countdown timers, fake testimonials, or fake readable text inside images.
Try it with Beaver Builder AI, Figma Make, Claude, Lovable, v0, and Webflow.
Field note
The hardest line in a small-site quote has always been "who updates it after launch." Make now answers it with a panel the client logs into, which leaves the price of hosting as the open question.
Sources
- Create, ship, and manage data-backed websites with Payload in Figma Figma blog, October 15, 2026
- Design together with code layers Figma blog, October 15, 2026
- Introducing Figma Specs Figma blog, October 15, 2026
- Issue 053: The mockup stopped being a picture of the build Art Direction Daily, June 29, 2026