A six-lesson course in line work
Figma’s agent now draws in strokes, so the line weight stays yours
Generated icons and illustrations now keep their line work as strokes, so weight and end caps change without a redraw. Six short lessons on what shipped and how to keep a line live on your own pages.
Drag the weight. Every line on this page follows.
The Line Weight Course
An online course page on pale lilac, with a step path drawn in carmine over non-photo blue.
A course page sells a sequence, so the outline does the selling. The enrolment card stays in view with the price, the facts and the one action, and a step path ties the lessons together so a visitor can see how far the page runs. Here that path is drawn the way a comic artist works: a blue construction line first, inked in carmine as you read.
Strokes, not fills, for generated line work
Figma's agent got a round of improvements to the vector illustrations and icons it generates. The detail for anyone who has inherited a generated icon set: line work now comes as strokes, so stroke weight and end caps change without a redraw.
Layers arrive independent and grouped by function. You can attach your own illustrations as a style reference and ask for more components or on-brand icons at scale, which extends the example-led briefing from October. The same structure lets you or the agent animate the result in Figma Motion.
A stroke keeps the decision open. An outline makes it for you.
- Shipped
- November 5, 2026
- Where
- Figma Design, through the agent
- Editable after generation
- Stroke weight and end caps
- Also new
- Style references, grouped layers
Also this week
Shaders go out at 4096px
In the November 2 note, shaders render and export at up to 4096px and can travel with a design through build this with code. They play inside a code layer when it is set to Play. Shaders first left the canvas as React in September.
Keep the line live on the page too
An inline SVG drawn with strokes takes its weight and its ends from CSS. Set the stroke to currentColor, hold the width in a custom property, and one icon serves every size and theme. The stroke-linecap property sets the ends, and the non-scaling-stroke value holds the line at one width however far the icon scales.
.icon {
fill: none;
stroke: currentColor;
stroke-width: var(--line);
stroke-linecap: round;
stroke-linejoin: round;
}
.icon * { vector-effect: non-scaling-stroke; }
Outline a stroke only at handoff, when a logo needs a fixed silhouette. Penpot added that command in September, and it belongs at the end of the job.
Also this week
Servo 0.7.0 adds new colour and type syntax
The September roundup lists the alpha() function, the font-width property, CSS typed arithmetic and the progress element. Servo is an experimental engine, so read this as a sign of where the syntax is spreading and check support before you depend on it.
From a code layer to frames and back
Figma's Workflow Lab walkthrough, published November 4, follows a designer through a map view in a code layer, leaving the original unchanged so two versions can be previewed side by side on the canvas. Code layers are in open beta for all users.
Extract, edit, send it back
Extract designs turns a screen, an element or a recorded flow into editable layers. After working on them with the usual tools, Update code layer sends the edits to the running prototype. The extract half arrived in October; the return trip is the part to try.
A spec that flags the expensive parts
The walkthrough closes with a technical spec that asks the agent to flag changes with implementation consequences, such as backend work or API calls, for review with a developer. Copy that line into your own handoff prompt.
One line token for the whole page
Hold line weight in one custom property and point icons, rules, borders and step markers at it. It suits any site with a drawn icon set: course pages, docs, product tours. It stays honest while the icons are strokes all the way down to the file you ship.
- Ship icons as strokes with currentColor, never as expanded outlines.
- Derive every line from the token with calc(), so a hairline stays a fixed share of a heavy rule.
- Set the token against your body text weight, so icons and type read as one colour on the page.
- Keep outlined art for logos, where the silhouette is the point.
- Pencil
- Leaf
- Envelope
- Eye
- Bolt
- Steps
:root {
--w: 14;
--line: calc(var(--w) * .14px);
}
.rule { border-top: var(--line) solid; }
.icon { stroke-width: calc(var(--w) * .13); }
The assignment: build the course page
Build a one-page online course landing page for [course name], a short paid or free course taught by [teacher]. It is a real page a client would pay for. It should feel like a calm product surface, with one live control that proves what the course teaches. Layout, desktop: - A slim top bar on the ground: course brand on the left, three text links on the right. - Two columns under it: a wide main column and a fixed 340px enrolment card on the right. The card is sticky and stays in view for the whole page. - The enrolment card holds, top to bottom: a preview image, the price set large, a labelled list of facts (lessons, length, level, last updated), one solid button, then the course outline as numbered links. Highlight the outline item for the lesson on screen with an IntersectionObserver, and let the button name the next lesson. - The main column opens with a small label, a large headline of no more than two or three lines, and a two-sentence deck. - Under the hero, a try-it panel: a range input and three radio buttons, with two drawings side by side beneath them. Whatever the course teaches, let the visitor change it here before reading a word. - Each lesson is a separate white card. A 64px gutter runs down the left of the cards, with a numbered circle beside each card, joined by one SVG path that curves gently between circles and shows on the ground between cards. - Draw that path twice: pale blue for the whole length, and carmine over it, revealed with stroke-dashoffset as the visitor scrolls. Finish it free in the gutter so its end cap shows. - Each lesson card opens with a filled label (Lesson 1 of 6), a plain kind label (Tooling) and a right-aligned duration, then a heading and a reading column of about 66 characters. - One card is an assignment sheet on pale blue, with a copy button if it holds copyable text. - End with a three-part pager and a short colophon. Mobile: the enrolment card stops being sticky. The gutter narrows to 36px with smaller circles. The try-it panel comes before the enrolment card, the two drawings stay side by side and the controls stay full width. The one control that matters: hold line weight in a single custom property on the root. Point every SVG icon, rule, border and step marker at it with calc(). Use real SVG strokes with stroke="currentColor", never outlined shapes, so the range input moves every line on the page at once. Palette: pale cool lilac ground #E4E0EC, near-white cards #FBFAFD, oxblood ink #27101A, deep oxblood panel #4A0C20, one carmine accent #B90F36, non-photo blue #2F86B0 for construction lines and a pale blue #DCEBF3 for the assignment sheet, cool grey #5A5666 for labels. Ground pattern: zigzag hairlines in non-photo blue at about 20 percent, flat, like a stroked polyline. No gradients. Type: a rounded monoline display such as Dosis at 800 for headings, a readable text serif such as Faustina for body, Fragment Mono only for labels and code. Rounded line ends in the display type should echo the round caps on the icons. Images: one or two two-colour linocut prints in carmine and oxblood on lilac paper, with no readable text in them. Use one as the card's preview image. Guardrails: body text at least 19px with line height at least 1.65. Lines of 60 to 75 characters. Small labels pass WCAG AA on the surface they actually sit on. Native range and radio inputs with visible focus states. Hover and focus transitions around 150ms and a prefers-reduced-motion guard. Card radius 10px at most, no pill shapes except the numbered circles, no accent left borders, no neon, no glow, no stock photos, no fake ratings, no invented student counts or testimonials. Works in: Beaver Builder AI, Claude Code, Figma Make, Framer AI, v0, Lovable.