Figma line, pattern and divider components

These are the pieces you reach for after the layout already works. The grid is set, the type scale is right, the sections are in order, and the page still reads flat, because nothing in it tells the eye where to go next. A texture behind the hero, a line between two sections, a scrawled circle around the one number in a case study that matters: small moves, and the only ones left once the structural work is done.

Four patterns, four different distances

The pattern component carries four styles and they are not interchangeable, mostly because of scale. Topographic is drawn at 800x800px, a contour map texture built to sit behind a hero or fill an empty half of a CTA section at full size.

Wavy lines at 360x360px is the mid-range option, big enough to read as a pattern behind a card cluster without turning into wallpaper. Dot cube is 80x80px, small enough to repeat along an edge or tuck behind a stat.

And the straight line pattern at 298x408px is the vertical one, the ruled texture that works down the side of a section rather than across it. Keep all four at a low opacity and behind the content, because a pattern that competes with a headline has stopped being a background.

Hand-drawn marks, and the discipline they need

The hand-drawn family is the loud part of this file: a long numbered run of arrows in every curve and angle you would draw on a whiteboard, underlines from a 201px tick up to a 564px sweep, a set of small accents like sparks, ticks, and asterisks, and a pen scribble group holding rough underlines and lassoed circles, the largest of them 414x164px. There is also a standalone hand-drawn circle at 372x400px and a 1,360px squiggle for running a line across a whole section.

One position, held firmly: one hand-drawn mark per screen. The style works because it looks like a person interrupted the layout to point at something, and that effect dies the moment there are four of them.

Nielsen Norman Group's research on scanning found that highlighting key terms measurably helps people find things, which is the honest argument for a circled word in a headline. It stops being an argument when everything is highlighted.

Circle the price, or the metric, or the one word the whole section turns on, and leave the rest alone. These are decoration for a public-facing page, incidentally, not documentation: if you are marking up a file for a developer, the design annotation components carry labels, measurements, and numbering that a scribbled arrow cannot.

The divider is 1440 and 375, and often unnecessary

The section divider is a zero-height line with two breakpoint variants, 1,440px for desktop and 375px for mobile, matching the artboard widths the rest of the kit uses, so it lands flush against the page margins instead of being eyeballed.

Useful, and also the component you should question most often. Most rules people draw between sections are compensating for spacing that is too tight, and adding 48px of air usually does the same job more quietly.

Where the divider does earn its place, remember it carries meaning in the build: a decorative rule should be hidden from assistive technology, while a genuine content break maps to a horizontal rule with the separator role.

Worth a note in handoff, since the visual result is identical and the screen reader result is not. For dividers inside a card or list rather than between page sections, the content divider components handle that job with labels and spacing built in.

Working with them in Figma

Every asset here exists twice in the file, once light and once dark, so a mark placed on a dark section does not need a hand-inverted copy that drifts out of sync. When you resize an arrow, scale it rather than stretch it, or the stroke weight goes thin at one end and the hand-drawn illusion collapses.

Recolor by selecting the vector inside the instance and changing its stroke, which keeps the link to the component intact. And place these on their own layer above the content, named for what they are, since these are the first things you will want to hide when the same frame has to serve as a clean product screenshot, or go into one of the portfolio mockup templates.