Today's art direction
The Card Launch Page
A payment card sold on a flat screen, turned just far enough to read as an object.
A card launch page has one hero: the card. Here three of them share a single perspective set on their parent, which is exactly how Figma's new perspective effect works on a frame, so the fan reads as three objects on one table. Lettered application steps open each section, and a plan compare table does the job a fintech page uses it for.
Apricot ground, persimmon cards with a cream edge, one cobalt for every action and the current step, navy for the fine print. Zilla Slab sets the headlines with a banker's weight; Fira Sans reads at 19px; Fira Code carries every transform value.
Tooling. Figma blog, 12 November 2026
Figma layers turn on three axes, inside one frame's perspective
Figma's new 3D transform effect rotates any layer on x, y and z, and a perspective effect set on a parent frame gives every child one shared vanishing point. It is non-destructive, so the layers underneath stay editable, and it is in open beta for every Full seat.
The 3D layers also take Figma Motion keyframes and shaders; Figma made its own launch video that way, with its agent assembling the scenes. Framer's agent got the whole 3D transform panel back in September. Figma's version adds a way out to coding agents, since its MCP server can read and create 3D designs.
Set the perspective on the frame, and every layer inside turns toward the same point.
Three ways to get a card into 3D
Scroll the table sideways for Framer and CSS.
| Figma12 November | Framer agent1 September | Hand-written CSSany day | |
|---|---|---|---|
| Rotates on | x, y and z | x, y and z | rotateX, rotateY, rotateZ |
| Perspective | An effect on the parent frame | A property the agent sets, with origin, depth and backface | perspective on the parent element |
| After the turn | Layers stay editable | Layers stay selectable and editable | Your markup, unchanged |
| Handoff | CSS transform copied in Dev Mode | Ships with the Framer site | It is the code |
| For agents | Figma MCP server reads and creates 3D | The agent sets every 3D property | Any agent that writes CSS |
| Who gets it | Open beta, Full seats | Framer agent users | Every current browser |
Technique. Figma release notes, 12 November 2026
What Dev Mode copies out is two declarations you already know
Figma's release notes file the feature as design in 3D that ships directly to code: Dev Mode copies a 3D layer as a CSS transform, with its depth and the rotation on each axis. The handoff is a property, not a rendered clip.
In the browser the same scene is perspective on the parent and a rotate transform on each child. The bench beside this paragraph writes that pair by hand, so you can feel how few degrees a card needs before it stops reading as a card.
The bench prints plain browser CSS. Figma's exact Dev Mode output may be formatted differently.
.stage {
perspective: 900px;
}
.card {
transform:
rotateX(10deg)
rotateY(-24deg)
rotateZ(0deg);
}
Workflow. Framer updates, 12 November 2026
Framer's agent now paints its own textures and shaders
Framer's Agent can now generate images and shaders on the canvas: a custom image, texture or illustration on request, a swapped subject, a removed background, or a restyled upload.
The shader half is the one to try first. Asking for a halftone or pencil surface inside the page you are building skips the round trip through an image tool, and the treatment stays something you can ask to change.
- Halftone shader
- Bokeh blur shader
- CRT shader
- Pencil effect shader
- Texture or illustration image
Borrow this pattern
One perspective, set on the parent
When a row of cards needs depth, set perspective once on the container and rotate only the cards. Every card then turns toward the same vanishing point, which is what makes a fan read as one set of objects on one table. Put the perspective inside each card's own transform and every card gets its own camera: the row looks like copies pasted side by side.
- Perspective on the parent, transform on the children.
- Rotate art and objects, never a paragraph someone has to read.
- Keep turns under about 35 degrees so a card still reads as a card.
- Under reduced motion, keep the angle and drop the movement.
All three cards turn 30 degrees, and each one shows a little more or less of its side depending on where it sits.The same 30 degrees, but each card has its own camera, so the three turn identically and the row goes flat.
.fan {
display: flex;
/* one camera */
perspective: 1400px;
}
.fan .card {
transform: rotateY(30deg);
}
@media
(prefers-reduced-motion: reduce) {
.fan .card {
transition: none;
}
}
Prompt Lab. Works in Beaver Builder AI, Figma Make, Framer, Lovable, v0 or Claude Code
The fine print, as a prompt
Build a fintech card launch page for a payment card product: web-native, plain HTML and CSS, with one small script for a tilt calculator. 1. Ground and palette: a flat vivid apricot field (#E68A58) with no texture. Cream sheets (#F8F1E7) carry all reading text in near-black ink (#1B1612), with muted notes in #5E5248. One cobalt (#1F3FBF) for buttons, the current step and rules; deep navy (#121B44) for the fine print panel and code. The cards are a deeper persimmon (#E5631F) with a 3px cream edge. 2. Type: Zilla Slab 600/700 for the headline, section titles and table heads; Fira Sans 400/600 for reading text at 19px; Fira Code for labels, transform values and code. 3. Hero: a top bar on the ground; an inline byline sentence (issue, date, read time) centred above a two-line slab headline; then a stage holding three cards in one row that share a single perspective. Set perspective: 1400px on the stage and rotate only the cards (left rotateY(26deg), centre rotateX(8deg), right rotateY(-26deg)). Each card face is a 3:2 airbrushed illustration of one cobalt cube at a different rotation, with that card's transform printed small in cream mono at its lower left. Under the stage, the deck on the left and a cobalt button plus a text link on the right. 4. Sections: separate cream cards on the apricot ground. Open each with a lettered progress row (A to F joined by a 2px line, the current letter a filled cobalt square, the others pale cobalt), every letter a real link to its section, then a mono source line and a slab h2. 5. Components: a plan compare table with three columns, the featured column filled cobalt at the head and tinted below; a tilt calculator with four labelled range inputs (rotate X, Y, Z and perspective) that turn a preview card live and print the CSS under it; a two-option radio switch that flips a mini card fan between one shared perspective and a perspective per card using :has(); a navy fine print panel holding a prompt with a copy button; a closing row of a large slab field note beside a ruled sources list under a 2px ink rule. 6. Guardrails: body text at least 18px with line height at least 1.6 and lines of 60 to 75 characters; never rotate reading text, only card art; small labels at WCAG AA against their actual surface; hover and focus states of 120 to 180ms on every link, button and input; a prefers-reduced-motion guard that keeps the angles and drops the transitions; no fake card numbers, chips or logos on the card art; no neon, no glow, no purple-blue gradients, no gradient text, no pill-shaped everything, no accent left-border stripes. On mobile the fan becomes one centred card with the other two tucked behind it, the table scrolls sideways with a sticky first column, and every two-column block stacks.
Field note
Two canvases shipped 3D this autumn, and both hand it off as plain CSS. The craft now is restraint: a few degrees, one vanishing point, flat type.
Sources
- How 3D transforms and Figma's agent brought a launch video to lifeFigma blog, 12 November 2026
- Design in 3D, natively in Figma, and ship directly to codeFigma release notes, 12 November 2026
- Image and Shader GenerationFramer updates, 12 November 2026
- perspectiveMDN Web Docs, reference
- Framer's agent gets the whole 3D transform panelArt Direction Daily, issue 120