Line Shader

Draw a line, get a shaded ribbon that looks three-dimensional. Use it in your browser, or shade a pen path without leaving Figma.

Using the studio

1. Open the studio and pick a shape from the left.
2. Drag the white dots to reshape it. The small ones bend the curve.
3. Click empty canvas to hide the dots and see the line on its own. Click again to edit.
4. Set colour, weight and light on the right.
5. Export: SVG · shaded to place it, SVG · spine only to edit the curve in Figma, or PNG at 1–3×.

Installing the Figma plugin

1. Download the plugin and unzip it.
2. Move the folder somewhere permanent — Documents, not Downloads. Figma reads these files every time, so if the folder moves the plugin stops working.
3. In Figma: Plugins → Development → Import plugin from manifest…
4. Choose plugin/manifest.json inside that folder.

It now lives under Plugins → Development → Line Shader. You only do this once.

Using it

1. Draw a line with the pen tool (P).
2. Select it.
3. Run the plugin, pick a colour and weight, press Apply.

Three controls do everything: Colour, Weight, Light. The rest is already set up and tucked into Advanced.

After it exists

Select the ribbon	The panel reloads that ribbon's settings
Change → Update	Rebuilds it in place
Drag it	Your curve travels inside it, so Update stays put
Edit spine	Unlocks your curve to reshape. Then press Apply
Delete	Removes the ribbon and gives your curve back

Delete hands the curve back rather than destroying it — you drew it.

If something looks wrong

A pale band across the ribbon

Open Advanced and raise Smooth ramp to 5 or 6. The brand colours were sampled off artwork and a couple of samples are washed out; at large sizes they show as a stripe. Smoothing evens them out.

It looks rougher on the canvas than in the preview

Someone has ticked Advanced → Vectors. That form is made of ~96 separate shapes and Figma draws them one at a time. Untick it and press Update.

Blurry when printed large

Advanced → Raster, raise it. 4× is the default, 8× is the most it will do.

The plugin vanished from Figma

The folder moved or was deleted. Unzip it again somewhere permanent and re-import the manifest.