Back to Plugins
Perfect Freehand

Perfect Freehand

<p>Turn vector lines into freehand strokes.</p><p><br></p><h2>Quickstart</h2><p><br></p><ol><li>Select the <strong>Pencil Tool </strong>(Shift + P).</li><li>Draw or write something on the canvas.</li><li>Select your pencil lines.</li><li>In this plugin, click the&nbsp;<strong>Apply</strong>&nbsp;button.</li></ol><p><br></p><p>To revert a stroke to its original shape, click the&nbsp;<strong>Reset</strong>&nbsp;button.</p><p><br></p><h2>Options</h2><p><br></p><p>You can use the plugin's options to change the appearance of a mark. See the&nbsp;<strong>Options</strong>&nbsp;section below for more information on each option.</p><p><br></p><p><strong>Size</strong></p><p>Sets the base width for the stroke.</p><p><br></p><p><strong>Thinning</strong></p><p>Sets the effect of pressure on the stroke's width.</p><p><br></p><p><strong>Smoothing</strong></p><p>Reduces the overall number of points. A higher value will produce a smoother stroke.</p><p><br></p><p><strong>Taper Start</strong></p><p>Tapers the beginning of the stroke.</p><p><br></p><p><strong>Taper End</strong></p><p>Tapers the end of the stroke.</p><p><br></p><p><strong>Easing</strong></p><p>Applies an easing curve to the line's simulated pressure.</p><p><br></p><h2>Tips</h2><p><br></p><p>You can continue adjusting a stroke's options after applying the effect.</p><p><br></p><p>Setting a negative&nbsp;<strong>Thinning</strong>&nbsp;value will cause the stroke to become thicker at minimum pressure.</p><p><br></p><p>In general, areas with more vector nodes will result in greater pressure and so a thicker stroke, while areas with less detail will result in less simulated pressure and a thinner stroke. To force a mark to be thicker, try adding extra nodes yourself.</p><p><br></p><p>If you'd like a better drawing experience—including real stylus pressure as well as better simulated pressure—try&nbsp;<a href="https://perfect-freehand-example.vercel.app/" rel="noreferrer noopener nofollow" target="_blank">this link</a>, a demo for the&nbsp;<a href="https://github.com/steveruizok/perfect-freehand" rel="noreferrer noopener nofollow" target="_blank">perfect-freehand</a>&nbsp;library used by this plugin. You can copy your drawing from there and paste it into Figma.</p><p><br></p><h2>Feedback &amp; Contribution</h2><p><br></p><p>If you would like to reach the author, you can tweet me at&nbsp;<a href="https://twitter.com/steveruizok" rel="noreferrer noopener nofollow" target="_blank">@steveruizok</a>.</p><p><br></p><p>The source code for this plugin is available&nbsp;<a href="https://github.com/steveruizok/figma-plugin-perfect-freehand/issues/new" rel="noreferrer noopener nofollow" target="_blank">on Github</a>. If you would like to contribute to the project's code, that's the best place to start.</p><p><br></p><p>If you think you've found a bug in the plugin, please create an issue&nbsp;<a href="https://github.com/steveruizok/figma-plugin-perfect-freehand/issues/new" rel="noreferrer noopener nofollow" target="_blank">here</a>.</p><p><br></p><p>If you have ideas about how to make the plugin better, or for any other concern not mentioned above, post on the&nbsp;<a href="https://github.com/steveruizok/figma-plugin-perfect-freehand/discussions" rel="noreferrer noopener nofollow" target="_blank">Discussions board</a>.</p>

handwritingtextdrawinginkstrokelettering

Plugin Preview

Perfect Freehand preview

About this plugin

Turn vector lines into freehand strokes.


Quickstart


  1. Select the Pencil Tool (Shift + P).
  2. Draw or write something on the canvas.
  3. Select your pencil lines.
  4. In this plugin, click the Apply button.


To revert a stroke to its original shape, click the Reset button.


Options


You can use the plugin's options to change the appearance of a mark. See the Options section below for more information on each option.


Size

Sets the base width for the stroke.


Thinning

Sets the effect of pressure on the stroke's width.


Smoothing

Reduces the overall number of points. A higher value will produce a smoother stroke.


Taper Start

Tapers the beginning of the stroke.


Taper End

Tapers the end of the stroke.


Easing

Applies an easing curve to the line's simulated pressure.


Tips


You can continue adjusting a stroke's options after applying the effect.


Setting a negative Thinning value will cause the stroke to become thicker at minimum pressure.


In general, areas with more vector nodes will result in greater pressure and so a thicker stroke, while areas with less detail will result in less simulated pressure and a thinner stroke. To force a mark to be thicker, try adding extra nodes yourself.


If you'd like a better drawing experience—including real stylus pressure as well as better simulated pressure—try this link, a demo for the perfect-freehand library used by this plugin. You can copy your drawing from there and paste it into Figma.


Feedback & Contribution


If you would like to reach the author, you can tweet me at @steveruizok.


The source code for this plugin is available on Github. If you would like to contribute to the project's code, that's the best place to start.


If you think you've found a bug in the plugin, please create an issue here.


If you have ideas about how to make the plugin better, or for any other concern not mentioned above, post on the Discussions board.

Plugin Details

Version10
CreatedMarch 8, 2021
Last UpdatedMay 5, 2021
CategorySoftware development
CreatorSteve Ruiz
Stats8020 installs, 291 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/plugin.js