Getting Started
Install the plugin
Open Figma and go to the Community tab. Search for Skletons and click Install.
Direct install linkSelect frames
Select one or more frames or components on the canvas. The plugin shows the selection in the preview. Valid selections: frames, components, instances, component sets.
Set options and convert
Configure Content Preservation and Style Options. Click Convert to Skeleton. The plugin creates a skeleton frame to the right of the original.
Content Preservation
Control what stays and what becomes a grey placeholder.
Preserve Text
When on, text layers with # in the name stay as text. Others become grey bars. Add # to layer names for labels you want to keep (e.g. "Title #").
Preserve Images
When on, image fills stay. When off, images become grey rectangles.
Preserve Colors
When on, non-neutral fill colors (e.g. brand colors) stay. Grey, white, black become skeleton greys.
Style Options
Change how placeholders look.
Squiggly Text
Uses Redacted Script font for text placeholders instead of straight bars. Falls back to Inter if Redacted Script is not available.
Sketchy Style
Draws rough, hand-drawn shapes instead of clean rectangles. Good for wireframe or sketch mockups.
Preserve Shadows
When on, drop shadows and effects stay on converted shapes.
Corner Radius
Slider from Auto (-1) to 24px. Auto preserves the original corner radius per element. A fixed value applies to all skeleton shapes.
Tips
Use # for labels
Add # to layer names for text you want to keep (e.g. "Title #", "CTA #"). Preserve Text must be on.
Multiple frames
Select several frames and click Convert. The plugin creates one skeleton per frame, stacked to the right.
Skeleton greys
The plugin uses subtle greys: containers, text bars, image placeholders, shapes, buttons. Preserve Colors overrides for non-neutral fills.
Nested components
Works on frames, components, instances, and component sets. Converts recursively.
Questions or feedback?
Leave a review on the Figma Community plugin page.