"use strict";var _jsxruntime = require("react/jsx-runtime");Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var _react = require('react'); var _three = require('three'); var THREE = _interopRequireWildcard(_three); var _Cover = require('./components/Cover'); var _Cover2 = _interopRequireDefault(_Cover); var _Split = require('./components/Split'); var _Split2 = _interopRequireDefault(_Split); var _StatGrid = require('./components/StatGrid'); var _StatGrid2 = _interopRequireDefault(_StatGrid); var _Tabs = require('./components/Tabs'); var _Tabs2 = _interopRequireDefault(_Tabs); var _Deck = require('./engine/Deck'); var _Deck2 = _interopRequireDefault(_Deck); var _Slide = require('./engine/Slide'); var _Slide2 = _interopRequireDefault(_Slide); /* Figma: the workshop. The gallery's light decks are quiet and typographic. This one is the opposite: a room with people in it, a real canvas screenshot, three product surfaces and the mark's five colours. It is the only deck in the set built around photography, the only one that uses or , and it closes on a wall of solid colour rather than on white. EVERY FACT, WITH ITS SOURCE. All checked on 2026-08-07, none recalled. - "Non-designers made up approximately two-thirds of our monthly active users" in the three months ended 31 December 2025: Figma, Inc. FY2025 Form 10-K, filed 18 February 2026 (CIK 0001579878, accession 0001628280-26-009228), Item 1, first paragraph. Read out of the filing itself, not out of a summary. The often-quoted "13 million monthly active users" is an S-1 figure for March 2025 and the 10-K deliberately stops restating it, so no user total appears anywhere in this deck. - "Built for the browser with the power of WebGL to allow our users to engage in real-time collaboration": the same 10-K, Item 1, verbatim. - The ten products and their one-line glosses: figma.com's own top nav, fetched 2026-08-07 and transcribed word for word. Worth checking rather than remembering, because Figma Weave and Figma Motion are recent and the old Design / FigJam / Dev Mode trio is no longer the shape of the line. - Config 2026 announcements and the three screenshots: Figma blog, "Config 2026: New materials, new tools and a more expressive canvas", 24 June 2026. The captions are that post's own descriptions. - Dylan Field's quote: the same post. - Q2 2026 figures: "Figma Announces Second Quarter 2026 Financial Results", 5 August 2026, two days before this deck was written. Revenue $370.1m (up 48%), net dollar retention 136% as of 30 June 2026, 1,635 Paid Customers above $100k ARR (up 46%) and 15,964 above $10k ARR (up 34%). "Third straight quarter of accelerated revenue growth" is Field's own wording in that release. - The closing line is figma.com's live

. DELIBERATELY NOT USED. "95% of the Fortune 500", which figma.com still prints but captions with March 2025 data; any monthly-active-user total; and gross margin, which is real but is the least interesting true thing about this company. / / Figma's five mark colours, read off the inline with a hard monochrome filter, NOT a CSS mask. The mask was tried * first and rendered nothing: several of these SVGs paint through and * clip paths, so their alpha channel is empty when used as a mask source even * though the file itself displays perfectly. brightness(0) flattens whatever * the file contains to solid black, which also neutralises the * currentColor-driven files, and invert(1) lifts it to white for dark grounds. / function Wordmark({ height = 26, invert = false }) { return ( _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/figma/logo.svg", alt: "Figma logo" , width: Math.round(height 2.73), height: height, style: { display: "block", height, // Explicit width + alignSelf: inside a column flex the default // align-items:stretch widens the replaced element and floats it to the // middle of the slide instead of the left gutter. alignSelf: "flex-start", opacity: invert ? 0.95 : 0.88, filter: invert ? "brightness(0) invert(1)" : "brightness(0)" },} ) ); } /** A rounded rectangle as a THREE.Shape, centred on its own origin. */ function roundedRect(w, h, r) { const x = w / 2; const y = h / 2; const s = new THREE.Shape(); s.moveTo(-x + r, -y); s.lineTo(x - r, -y); s.quadraticCurveTo(x, -y, x, -y + r); s.lineTo(x, y - r); s.quadraticCurveTo(x, y, x - r, y); s.lineTo(-x + r, y); s.quadraticCurveTo(-x, y, -x, y - r); s.lineTo(-x, -y + r); s.quadraticCurveTo(-x, -y, -x + r, -y); return s; } /** * The layer stack: five translucent coloured planes in Figma's mark colours, * hanging in depth on a single diagonal, drifting. * * COMPOSED, NOT SCATTERED, and that is the whole design constraint. Five loose * shapes tumbling in space photograph as confetti, and the poster and the PDF * export are stills. So the planes never leave a fixed cascade: they share one * heading, they are evenly stepped in x, y and z, and the animation is a set of * amplitudes small enough (0.08 units, 0.02 radians) that the arrangement you * see in the still is the arrangement at every frame. Nothing spins. * * Each plane also carries its own outline at full opacity, which is what makes * it hold up small: translucent fills alone go soft at thumbnail size, and the * outline reads as a selection bound, which is the correct reference. * * SIZED TO DOMINATE. The first version of this scene filled about 56% of the * media column's width and read as a decoration beside the copy rather than as * the subject. Three things were fighting it, and all three are tuned below. * First, the group's heading and the cascade's depth step ran the same way, so * rotating about y CANCELLED most of the horizontal spread (x' = x cos + z sin * with x and z stepping together): the heading is gentler now and the x step is * larger. Second, the planes were small relative to the frame: they are wider * and taller. Third, the camera sat further back than the column needed. * Net effect is roughly double the area, still one composed cascade. / function LayerStack() { const host = _react.useRef(null); _react.useEffect.call(void 0, () => { const el = host.current; if (!el) { return; } const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 100); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.domElement.style.display = "block"; el.appendChild(renderer.domElement); const group = new THREE.Group(); // A shared heading, so the five planes read as one object seen off-axis // rather than as five objects that happen to be near each other. Shallower // than it was: this angle is what foreshortens the cascade's x spread. group.rotation.set(0.06, -0.28, 0); // Lifted, because perspective is not symmetric here: the cascade runs // towards the camera as it runs down, so the lower planes are magnified and // the stack reads bottom-heavy and clips its last plane on a tall column. group.position.y = 0.08; const layers = []; const disposables = []; for (let i = 0; i < MARK.length; i += 1) { const w = 2.52 - i 0.055; const h = 1.76 - i * 0.04; const shape = roundedRect(w, h, 0.12); const fillGeo = new THREE.ShapeGeometry(shape, 10); const edgeGeo = new THREE.BufferGeometry().setFromPoints(shape.getPoints(60)); disposables.push(fillGeo, edgeGeo); const color = MARK[i] ; // depthWrite off + an explicit renderOrder: the fills are translucent and // must composite strictly back to front, which the depth buffer would // otherwise prevent for the planes that overlap. const mesh = new THREE.Mesh( fillGeo, new THREE.MeshBasicMaterial({ color, transparent: true, opacity: 0.6, depthWrite: false, side: THREE.DoubleSide }) ); const line = new THREE.LineLoop( edgeGeo, new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.95 }) ); const x = (i - 2) * 0.47; const y = (2 - i) * 0.56; const z = (i - 2) * 0.5; mesh.position.set(x, y, z); line.position.set(x, y, z + 0.001); mesh.renderOrder = i * 2; line.renderOrder = i * 2 + 1; group.add(mesh); group.add(line); layers.push({ mesh, line, y0: y, phase: i * 1.15 }); } // Selection handles on the front plane only. Four solid squares at its // corners: the one detail that says "this is a canvas" rather than "these // are shapes", and putting them on a single plane keeps it from becoming // decoration. const front = layers[layers.length - 1] ; const handleGeo = new THREE.PlaneGeometry(0.085, 0.085); disposables.push(handleGeo); const handleMat = new THREE.MeshBasicMaterial({ color: MARK[MARK.length - 1] }); const hw = (2.52 - 4 * 0.055) / 2; const hh = (1.76 - 4 * 0.04) / 2; [ [-hw, -hh], [hw, -hh], [hw, hh], [-hw, hh] ].forEach(([hx, hy]) => { const handle = new THREE.Mesh(handleGeo, handleMat); handle.position.set(hx , hy , 0.004); handle.renderOrder = 20; front.mesh.add(handle); }); scene.add(group); const resize = () => { const w = el.clientWidth || 1; const h = el.clientHeight || 1; renderer.setSize(w, h); camera.aspect = w / h; // The stack is taller than it is wide, so a portrait media column frames // it fine but a squat one clips the top and bottom planes. Backing the // camera off as the frame gets narrower keeps the whole cascade inside // the container at every stage size. camera.position.set(0, 0.06, 8.05 + Math.max(0, 1 - camera.aspect) * 2.4); camera.lookAt(0, 0, 0); camera.updateProjectionMatrix(); }; resize(); let raf = 0; let t = 0; const tick = () => { t += 0.016; layers.forEach((l, i) => { const dy = Math.sin(t * 0.34 + l.phase) * 0.08; const rz = Math.sin(t * 0.23 + l.phase * 0.7) * 0.02; l.mesh.position.y = l.y0 + dy; l.line.position.y = l.y0 + dy; l.mesh.rotation.z = rz; l.line.rotation.z = rz; void i; }); // A hint of turn, bounded to three degrees. Enough for the depth to be // legible in motion, far too little to ever restage the composition. group.rotation.y = -0.28 + Math.sin(t * 0.16) * 0.05; renderer.render(scene, camera); raf = requestAnimationFrame(tick); }; tick(); const ro = new ResizeObserver(resize); ro.observe(el); return () => { cancelAnimationFrame(raf); ro.disconnect(); disposables.forEach((d) => d.dispose()); handleMat.dispose(); scene.traverse((obj) => { const mesh = obj ; const mat = mesh.material ; if (Array.isArray(mat)) { mat.forEach((m) => m.dispose()); } else if (mat) { mat.dispose(); } }); renderer.dispose(); el.removeChild(renderer.domElement); }; }, []); // position:absolute rather than a fixed pixel height: .split-media is // position:relative and align-items:center, so a flow child collapses to its // content (a zero-sized canvas) and a fixed height leaves the column // half empty. Insetting it makes the scene fill the whole half of the stage. return _jsxruntime.jsx.call(void 0, 'div', { ref: host, style: { position: "absolute", inset: 0 },} ); } /** * One tab's worth of products: a bordered card of hairline-ruled rows, each a * mark-coloured chip, the product name and Figma's own one-line gloss. * * WHY THIS IS A FIXED-HEIGHT CARD WITH FLEXED ROWS. As four naturally sized * rows it was a thin strip in the top half of the stage with white space under * it, which is the defect this whole gallery keeps repeating. The card now has * one declared height and every row takes an equal share of it, so the block * reaches down the stage AND the three tabs are the same object at three * different row heights (four rows, then three, then three) rather than three * different-sized blocks that make the slide jump as you click. */ function ProductPanel({ items }) { return ( _jsxruntime.jsx.call(void 0, 'div', { className: "mat", style: { width: "100%", maxWidth: 940, marginInline: "auto", height: "clamp(292px, 47vh, 380px)", boxSizing: "border-box", padding: "clamp(6px, 1vh, 12px) clamp(18px, 2.4vw, 34px)", display: "flex", flexDirection: "column", textAlign: "left" }, children: items.map((p, i) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: "1 1 0", minHeight: 0, display: "grid", gridTemplateColumns: "18px minmax(0, 0.66fr) minmax(0, 1.34fr)", gap: "clamp(14px, 1.8vw, 26px)", alignItems: "center", borderTop: i === 0 ? "none" : "1px solid var(--hair-2)" }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { width: 18, height: 18, borderRadius: 6, background: p.color, display: "block" },} ) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(19px, 1.9vw, 24px)", lineHeight: 1.15 }, children: p.name }) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontSize: "clamp(15px, 1.5vw, 19px)", color: "var(--fg-muted)", lineHeight: 1.35 }, children: p.blurb }) ]}, p.name) )) }) ); } /** * One Config 2026 exhibit: the screenshot uncropped in a dark frame that fills * whatever cell the grid gives it, caption underneath. * * WHY THIS IS NOT . Gallery is the right component for a row of * equal exhibits, but it caps its media at max-height clamp(150px, 32vh, 300px) * inside an aspect-ratio box, and these three shots are 1400x788, so on a * 1280x720 stage each one landed about 330px wide with the headline floating * above a band of thumbnails. The frame is worth more than the component here: * the picture box is flex:1 against a definite grid row instead, so the hero * below runs about 680px wide, twice the linear size and four times the area, * and the three shots between them fill the stage corner to corner. / function Surface({ src, alt, title, body, style } ) { return ( _jsxruntime.jsxs.call(void 0, 'figure', { style: { margin: 0, minHeight: 0, display: "flex", flexDirection: "column", gap: 12, ...style }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { flex: "1 1 auto", minHeight: 0, display: "flex", alignItems: "center", justifyContent: "center", padding: "clamp(6px, 0.8vw, 11px)", boxSizing: "border-box", // #101014 is Gallery's own dark panel value. All three shots are // dark-UI, and a light surround would leave them in a halo. background: "#101014", border: "1px solid var(--hair)", borderRadius: "var(--radius)", overflow: "hidden" }, children: _jsxruntime.jsx.call(void 0, 'img', { src: src, alt: alt, style: { display: "block", width: "100%", height: "100%", objectFit: "contain" },} ) }) , _jsxruntime.jsxs.call(void 0, 'figcaption', { style: { flex: "0 0 auto" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(17px, 1.7vw, 21px)", lineHeight: 1.15 }, children: title }) , _jsxruntime.jsx.call(void 0, 'div', { style: { marginTop: 5, fontSize: "clamp(14px, 1.35vw, 17px)", color: "var(--fg-muted)", lineHeight: 1.35 }, children: body }) ]}) ]}) ); } function App() { return ( _jsxruntime.jsxs.call(void 0, _Deck2.default, { children: [ / The only photographic cover in the gallery, and the only of any kind. The editorial split keeps the claim on a solid white panel and the room edge-to-edge beside it, so no type is ever set over the photograph. The picture slot hard-crops to a portrait column, which is why this is the one image in the set that was prepared for it. / _jsxruntime.jsx.call(void 0, _Cover2.default, { nav: "Cover", title: _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 28,} ) , _jsxruntime.jsx.call(void 0, 'span', { style: { display: "block", marginTop: 20 }, children: "Two thirds of the people in Figma are not designers." }) ]}) , subtitle: "Developers, PMs, researchers, marketers and writers, all in the same document at once." , image: "/gallery/figma/cover.webp", foot: "Figma FY2025 Form 10-K, filed 18 February 2026: non-designers were approximately two thirds of monthly active users in the three months ended 31 December 2025." ,} ) / The image-led Split. The screenshot cover-fills its half of the stage rather than floating in it: object-position pulls the crop left of centre so the design frame and its annotations survive, and the Inspect rail stays half in shot at the right edge, which is what a canvas actually looks like when you are working in it. / , _jsxruntime.jsx.call(void 0, _Split2.default, { nav: "Canvas", kicker: "The canvas" , title: "One file, from first frame to shipped code." , body: _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0 }, children: "Layers, auto layout, prototypes and inspect all live in the same document. Nothing is exported to be worked on somewhere else." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "18px 0 0" }, children: "Dev Mode, figma.com" }) ]}) , media: _jsxruntime.jsx.call(void 0, 'img', { src: "/gallery/figma/canvas.webp", alt: "A design file open in Figma with the layers, annotations and inspect panels visible" , style: { width: "100%", height: "100%", objectFit: "cover", objectPosition: "2% 50%", display: "block" },} ) ,} ) / This deck's one 3D moment, and a slide that is quietly about itself: the paragraph quotes Figma on WebGL in the browser, and the thing next to it is WebGL in a browser. / , _jsxruntime.jsx.call(void 0, _Split2.default, { nav: "Layers", flip: true, kicker: "Multiplayer", title: "The file is where the meeting happens." , body: _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [ _jsxruntime.jsx.call(void 0, 'p', { style: { margin: 0 }, children: "Figma describes itself as \"built for the browser with the power of WebGL\" so that everyone can work in the same document at the same time. So is the stack beside this sentence: five layers, drawn live, in this tab." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "18px 0 0" }, children: "Figma FY2025 Form 10-K, Item 1" }) ]}) , media: _jsxruntime.jsx.call(void 0, LayerStack, {} ),} ) / The screenshots ARE the argument of this slide, so they get the stage. Hand-rolled rather than (see the Surface helper above for why). Two columns: the headline and the hero share the left, the two supporting shots stack down the right and run the full height, so nothing floats and the type sits in the corner it belongs in rather than centred over a band of thumbnails. / , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Surfaces", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", boxSizing: "border-box", padding: "clamp(30px, 5vh, 50px) clamp(28px, 4.6vw, 58px)", display: "grid", gridTemplateColumns: "1.5fr 1fr", gridTemplateRows: "auto minmax(0, 1fr)", columnGap: "clamp(16px, 1.8vw, 24px)", rowGap: "clamp(14px, 2.2vh, 22px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'header', { style: { gridColumn: "1", gridRow: "1" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "Config 2026, 24 June 2026" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "12px 0 0", fontSize: "clamp(30px, 3.7vw, 50px)", maxWidth: "15ch" }, children: "New materials, same canvas." }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: "13px 0 0", maxWidth: "52ch" }, children: "Every caption here is the Figma blog's own description of the thing in the picture." }) ]}) , _jsxruntime.jsx.call(void 0, Surface, { style: { gridColumn: "1", gridRow: "2" }, src: "/gallery/figma/surface-code.webp", alt: "A design frame, a generated ticket booking flow and its React source side by side" , title: "Code layers" , body: "Any design layer, made interactive in one click" ,} ) , _jsxruntime.jsxs.call(void 0, 'div', { style: { gridColumn: "2", gridRow: "1 / span 2", minHeight: 0, display: "flex", flexDirection: "column", gap: "clamp(14px, 2.2vh, 22px)" }, children: [ _jsxruntime.jsx.call(void 0, Surface, { style: { flex: "1 1 0" }, src: "/gallery/figma/surface-motion.webp", alt: "A keyframe timeline under a generative artwork in Figma Motion" , title: "Figma Motion" , body: "Motion on the canvas, in the same file" ,} ) , _jsxruntime.jsx.call(void 0, Surface, { style: { flex: "1 1 0" }, src: "/gallery/figma/surface-weave.webp", alt: "A style transfer panel feeding a campaign workflow in Figma Weave" , title: "Figma Weave" , body: "AI workflows, published as team templates" ,} ) ]}) ]}) }) , _jsxruntime.jsxs.call(void 0, _Slide2.default, { nav: "Products", children: [ / Tabs carries no heading of its own, so it is hand-written above: one column, one axis, centred like the pill bar under it. TABS IS INTERACTIVE AND THIS SLIDE HAS TO SURVIVE WITHOUT IT. The thumbnail rail and every PDF and PPTX export render only the default tab, so tab 0 has to be a complete thought on its own. It is also the longest of the three, which is why ProductPanel declares one height for all three: without it the block under the bar changes size as you click and the whole slide jumps. / _jsxruntime.jsxs.call(void 0, 'div', { style: { textAlign: "center", maxWidth: 820, marginInline: "auto" }, children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "The product line, figma.com" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "10px 0 0" }, children: "Ten products, one canvas." }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { marginTop: "clamp(14px, 2.2vh, 24px)" }, children: _jsxruntime.jsx.call(void 0, _Tabs2.default, { defaultTab: 0, tabs: [ { label: "Design", content: ( _jsxruntime.jsx.call(void 0, ProductPanel, { items: [ { name: "Figma Design", blurb: "Design and prototype in one place", color: MARK[0] }, { name: "Figma Draw", blurb: "Illustrate with advanced vector tools", color: MARK[1] }, { name: "Figma Motion", blurb: "Animate your designs", color: MARK[2] }, { name: "FigJam", blurb: "Collaborate with a digital whiteboard", color: MARK[3] } ],} ) ) }, { label: "Build", content: ( _jsxruntime.jsx.call(void 0, ProductPanel, { items: [ { name: "Figma Make", blurb: "Prompt to code anything you can imagine", color: MARK[4] }, { name: "Dev Mode", blurb: "Translate designs into code", color: MARK[0] }, { name: "Figma Sites", blurb: "Publish fully responsive websites", color: MARK[1] } ],} ) ) }, { label: "Publish", content: ( _jsxruntime.jsx.call(void 0, ProductPanel, { items: [ { name: "Figma Weave", blurb: "AI workflows for imagery, video, audio, and more", color: MARK[2] }, { name: "Figma Buzz", blurb: "Produce on-brand assets at scale", color: MARK[3] }, { name: "Figma Slides", blurb: "Co-create presentations", color: MARK[4] } ],} ) ) } ],} ) }) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { textAlign: "center", marginTop: "clamp(12px, 2vh, 22px)" }, children: "Every gloss is Figma's own, transcribed from the products menu on figma.com." }) ]}) / Not . Three decks in this gallery already use it, and its centred column left a third of the stage empty on the contact sheet. This is the same words as a comment on a canvas: an attributed card that reaches both gutters and lets the sentence run at display size. One clause is painted in --accent-strong, which is the only place a gradient touches body-sized type in this deck. / , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Material", children: _jsxruntime.jsxs.call(void 0, 'div', { className: "mat", style: { width: "100%", padding: "clamp(26px, 3vw, 46px)", display: "flex", flexDirection: "column", gap: "clamp(18px, 2.8vh, 32px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", alignItems: "center", gap: 14 }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { width: 46, height: 46, borderRadius: 13, background: MARK[2], color: "#ffffff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-head)", fontWeight: 600, fontSize: 16, flex: "0 0 auto" }, children: "DF" }) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: "var(--font-head)", fontWeight: 600, fontSize: 19 }, children: "Dylan Field" }) , _jsxruntime.jsx.call(void 0, 'span', { style: { fontSize: 17, color: "var(--fg-muted)" }, children: "Co-founder and CEO" }) , _jsxruntime.jsx.call(void 0, 'span', { className: "chip", style: { marginLeft: "auto", alignSelf: "center" }, children: "Config 2026" }) ]}) , _jsxruntime.jsxs.call(void 0, 'p', { style: { margin: 0, fontFamily: "var(--font-head)", fontWeight: 600, fontSize: "clamp(32px, 6.4vw, 82px)", lineHeight: 1.06, letterSpacing: "-0.022em", maxWidth: "20ch" }, children: ["Design is a process. " , _jsxruntime.jsx.call(void 0, 'span', { className: "accent-text", children: "Code is material" }), ", just like images, vectors and design layers." ]}) , _jsxruntime.jsx.call(void 0, 'div', { className: "foot", style: { borderTop: "1px solid var(--hair-2)", paddingTop: 18 }, children: "Config 2026 keynote, 24 June 2026. figma.com/blog" }) ]}) }) / The four stages are not invented. The FY2025 10-K describes Figma as a platform that "houses everything from the initial brainstorm to the pitch deck to the design spec to the final implementation", which is four moments in Figma's own order and its own words. The bodies name which product serves each one. An earlier version of this slide was a generic ideate / design / build / ship, which said nothing the products slide had not already said. NOT . It is a good component and this deck used it correctly, but a headline over a thin horizontal band of numbered columns is the most repeated composition in the whole gallery, and its min-height: clamp(150px, 26vh, 240px) leaves the rest of the stage empty by construction. Same four moments, restructured as a spread: the 10-K sentence set large down the left with its own citation pinned to the foot of the column, and the four stages as ruled rows that divide the full height of the right column between them. Nothing here is centred and nothing floats. / , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Path", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", boxSizing: "border-box", padding: "clamp(34px, 6vh, 60px) clamp(28px, 6vw, 100px)", display: "grid", gridTemplateColumns: "0.86fr 1.14fr", columnGap: "clamp(28px, 4.4vw, 72px)" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", justifyContent: "space-between", minWidth: 0, gap: 24 }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'p', { className: "kicker", style: { margin: 0 }, children: "Figma's own description of itself" }) , _jsxruntime.jsx.call(void 0, 'h2', { className: "headline", style: { margin: "16px 0 0", fontSize: "clamp(32px, 4.2vw, 54px)", maxWidth: "14ch" }, children: "From the initial brainstorm to the final implementation." }) ]}) , _jsxruntime.jsx.call(void 0, 'p', { className: "foot", style: { margin: 0, maxWidth: "38ch" }, children: "FY2025 Form 10-K, Item 1: Figma \"houses everything from the initial brainstorm to the pitch deck to the design spec to the final implementation\"." }) ]}) , _jsxruntime.jsx.call(void 0, 'div', { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: [ { title: "The brainstorm", body: "FigJam, for the messy start of it, before anything is a decision." }, { title: "The pitch deck", body: "Figma Slides, co-created in the file rather than mailed around it." }, { title: "The design spec", body: "The canvas itself, with inspect and Code Connect open beside it." }, { title: "The implementation", body: "Dev Mode and Make, translating what has already been drawn." } ].map((stage, i, all) => ( _jsxruntime.jsxs.call(void 0, 'div', { style: { flex: "1 1 0", minHeight: 0, display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", columnGap: "clamp(16px, 1.9vw, 28px)", alignItems: "center", borderTop: "1px solid var(--hair-2)", borderBottom: i === all.length - 1 ? "1px solid var(--hair-2)" : "none" }, children: [ _jsxruntime.jsx.call(void 0, 'span', { style: { fontFamily: "var(--font-mono)", fontSize: "clamp(14px, 1.35vw, 17px)", letterSpacing: "0.04em", color: "var(--primary)", alignSelf: "center" }, children: `0${i + 1}` }) , _jsxruntime.jsxs.call(void 0, 'div', { children: [ _jsxruntime.jsx.call(void 0, 'h3', { style: { margin: 0, fontSize: "clamp(20px, 2.2vw, 28px)", lineHeight: 1.12 }, children: stage.title}) , _jsxruntime.jsx.call(void 0, 'p', { style: { margin: "8px 0 0", fontSize: "clamp(14px, 1.45vw, 18px)", color: "var(--fg-muted)", lineHeight: 1.4, maxWidth: "40ch" }, children: stage.body }) ]}) ]}, stage.title) )) }) ]}) }) / Reported two days before this deck was written. Every value is from that release; the revenue card prints $370m so all four land in the same size class, and the exact figure sits in its caption. / , _jsxruntime.jsx.call(void 0, _StatGrid2.default, { nav: "Numbers", kicker: "Q2 2026 results, reported 5 August 2026" , title: "A third straight quarter of accelerating growth." , stats: [ { value: "$370m", label: "Q2 2026 revenue", caption: "$370.1m, up 48% year over year" }, { value: "136%", label: "Net dollar retention", caption: "As of 30 June 2026" }, { value: "1,635", label: "Customers above $100k ARR", caption: "Up 46% year over year" }, { value: "15,964", label: "Customers above $10k ARR", caption: "Up 34% year over year" } ],} ) / The close, and the only slide in the gallery that is mostly solid colour. The deck opened on white with a photograph; it lands on the mark's five colours built into a wall, with Figma's own live headline knocked out of the purple. Nothing is centred and nothing floats. */ , _jsxruntime.jsx.call(void 0, _Slide2.default, { nav: "Close", full: true, children: _jsxruntime.jsxs.call(void 0, 'div', { style: { height: "100%", display: "grid", gridTemplateColumns: "1.66fr 1fr" }, children: [ _jsxruntime.jsxs.call(void 0, 'div', { style: { background: MARK[2], padding: "var(--gutter-y) var(--gutter)", display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 26 }, children: [ _jsxruntime.jsx.call(void 0, Wordmark, { height: 30, invert: true,} ) , _jsxruntime.jsx.call(void 0, 'h2', { className: "display", style: { margin: 0, color: "#ffffff", maxWidth: "13ch", letterSpacing: "-0.025em" }, children: "The intelligent canvas for infinite creativity." }) , _jsxruntime.jsx.call(void 0, 'div', { className: "foot", style: { color: "rgba(255,255,255,0.78)" }, children: "Figma's own headline, figma.com. NYSE: FIG" }) ]}) , _jsxruntime.jsxs.call(void 0, 'div', { style: { display: "grid", gridTemplateRows: "repeat(4, 1fr)" }, children: [ _jsxruntime.jsx.call(void 0, 'div', { style: { background: MARK[0] },} ) , _jsxruntime.jsx.call(void 0, 'div', { style: { background: MARK[1] },} ) , _jsxruntime.jsx.call(void 0, 'div', { style: { background: MARK[3] },} ) , _jsxruntime.jsx.call(void 0, 'div', { style: { background: MARK[4] },} ) ]}) ]}) }) ]}) ); } exports.default = App;

Figma: Two thirds of the people in Figma are not designers