Perfect Freehand
Turn vector lines into freehand strokes.QuickstartSelect the Pencil Tool (Shift + P).Draw or write something on the canvas.Select your pencil lines.In this plugin, click the Apply button.To revert a stroke to its original shape, click the Reset button.OptionsYou can use the plugin's options to change the appearance of a mark. See the Options section below for more information on each option.SizeSets the base width for the stroke.ThinningSets the effect of pressure on the stroke's width.SmoothingReduces the overall number of points. A higher value will produce a smoother stroke.Taper StartTapers the beginning of the stroke.Taper EndTapers the end of the stroke.EasingApplies an easing curve to the line's simulated pressure.TipsYou 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 & ContributionIf 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 Preview
About this plugin
Turn vector lines into freehand strokes.QuickstartSelect the Pencil Tool (Shift + P).Draw or write something on the canvas.Select your pencil lines.In this plugin, click the Apply button.To revert a stroke to its original shape, click the Reset button.OptionsYou can use the plugin's options to change the appearance of a mark. See the Options section below for more information on each option.SizeSets the base width for the stroke.ThinningSets the effect of pressure on the stroke's width.SmoothingReduces the overall number of points. A higher value will produce a smoother stroke.Taper StartTapers the beginning of the stroke.Taper EndTapers the end of the stroke.EasingApplies an easing curve to the line's simulated pressure.TipsYou 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 & ContributionIf 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
| Version | 10 |
|---|---|
| Created | March 8, 2021 |
| Last Updated | May 5, 2021 |
| Category | Software development |
| Creator | Steve Ruiz |
| Stats | 8333 installs, 329 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/plugin.js
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.