Distort edges

About this plugin

A personal experiment replicating Adobe Illustrator’s Distort Edges Filter on Figma. Select a shape or vector layer to apply Distort Edges to.

Variable Distortion Distance

When enabled, distortion offset will be randomised, producing a “roughened” effect.

Maximum Distortion Offset Distance

Specifies how much distance the distortion will go. When Variable Distortion Distance has been enabled, the distortion will not go further than this distance.

Variable Distances Between Points

When enabled, each distorted point (apex) will be applied a randomised distance apart from each other, producing an even more natural “roughened” effect.

Distance Between Points (Minimum, Maximum, Single)

If variable distances between points has been enabled, specifies the minimum and maximum limits the randomised distance should fall between. Otherwise, specifies the uniform distance apart each apex should be from each other.

Peak / Trough Roundness

Specify how round or sharp the apexes going outwards and inwards should be.

Keep Layer Dimensions

When enabled, forces the distortion to keep within the original dimensions of the shape.

Force Distortion On Small Distances

An additional setting to force distortion on path segments that measure less than the specified Distance Between Points. By default the script skips these segments as the distortions can result in “unnaturally spiky” micro-segments.

Applying Distort Edges to multiple smaller complex paths is faster than applying it to a single large complex path merged from the multiple paths.

Online sampler here.

Examples Timer / Solar / Linework / Rotation

JS script for the distortion here.

Source code here.