How to Make a Skeleton Loader in Figma

A skeleton loader is a low-detail version of a screen that shows while real content loads. It uses grey shapes in the same positions as the text, images, and buttons that will appear, so the layout is visible before the data arrives. You see them in feeds, dashboards, product grids, and profile pages.

The point is layout stability. When content replaces the skeleton, nothing jumps, because every block already reserved its space. That is also why a skeleton has to match the real layout closely. A generic grey page that doesn't line up with the final screen causes the same shift you were trying to avoid.

Use a skeleton when you know the shape of what is coming. A list of cards, an article, a table with a known column count, a user profile. Use a spinner or progress bar when you don't know the shape, when the wait is very short, or when the action is a single operation like saving a form.

• Skeleton: full-page or section loads, lists and grids, anything that takes longer than a moment and has a predictable structure.
• Spinner: button submits, small inline refreshes, uploads with no known layout.
• Progress bar: long operations where you can report a percentage, like file exports.
• Nothing: loads that finish before a person would notice. Flashing a skeleton for a split second is worse than showing no loader.

Keep skeletons simpler than the real UI. You don't need a bar for every tiny label or a block for every icon. Headline, two or three body lines, the image, and the primary button are usually enough to communicate the layout.

The steps above are the short version. Here is what matters at each stage when you do it manually.

Keep the auto layout from the real component

Start from a duplicate of the loaded design, not a blank frame. If your card uses auto layout with 16 px padding and 8 px gaps, the skeleton gets the same values for free. Delete text layers only after you've placed the replacement rectangle in the same auto layout slot, or the stack collapses.

Size the bars from the text, not the text box

A 16 px font with a 24 px line height should become a bar around 10 to 12 px tall, with the remaining space kept as gap. If you make the bars as tall as the text box, the skeleton looks heavy and blocky. Set the bars to Fill container width and shorten the last bar in a paragraph to around 60% so it reads as text.

Corner radius and color

Match the radius of the real elements for cards, images, and buttons. For text bars, 4 px is a common default, and fully rounded pills also work. For color, a base like #E5E7EB on white with a highlight around #F3F4F6 gives enough contrast without looking like disabled UI. Put both in variables and add a dark mode value, so the same component works on both themes.

Turn it into a component with variants

Select the skeleton and create a component, then add a second variant. Name the property something like State with values Base and Shimmer. If the loaded card is already a component, you can add the skeleton as a Loading variant of that same component set, which keeps it next to the real states in your library. For help naming and organizing variants, see how to set up component variants.

The shimmer is a light band sliding across the grey blocks. In Figma there are two ways to build it.

Smart Animate between two variants

1. In the Base variant, add a rectangle on top of the skeleton with a linear gradient fill: transparent, then white at around 60% opacity in the middle, then transparent again. Place it just outside the left edge.
2. Turn on Clip content on the variant frame so the band is hidden outside the card.
3. In the Shimmer variant, move the same band just past the right edge. The layer name must be identical in both variants, or Smart Animate won't match them.
4. Open the Prototype tab. Connect Base to Shimmer with the After delay trigger, the Change to action, and Smart animate at around 800 to 1,200 ms with an ease-in-out curve.
5. Connect Shimmer back to Base the same way, with a short duration. Now every instance loops in prototype mode.

Figma Motion keyframes

Figma Motion, announced at Config 2026 and in open beta, adds a timeline with keyframes to Figma Design. You can keyframe the band's position from left to right and set playback to loop. Because it is still in beta, check it on your plan before relying on it for team handoff, and keep the Smart Animate version as a fallback.

The slow part of the manual method is replacing layers one by one. On a dense dashboard that can be a hundred text layers. Skletons does that replacement for you. Select one or more frames, components, instances, or component sets and click Convert to Skeleton. The plugin puts a skeleton copy to the right of each original, with text as grey bars and images and shapes as grey rectangles. Layout and structure stay the same.

A few options decide what survives the conversion:

• Preserve Text keeps any text layer with # in its name, like Title #. Useful for section headers or a button label you want to stay readable.
• Preserve Images and Preserve Colors keep image fills and non-neutral brand colors instead of greying them out.
• Corner radius is a slider from Auto to 24 px. Auto keeps each element's original radius.
• Sketchy style and Squiggly text give a hand-drawn look, which suits wireframes more than production loaders.
• Lines, vectors, and gradients are always kept as they are.

Skletons makes the static skeleton. It doesn't add the shimmer, so use the Smart Animate steps above on the result. If you haven't used plugins before, here's how to install a Figma plugin. Other plugins in the Community, such as Skeleton Craft and Lazy Load, take a similar select-and-generate approach, so try more than one if your layouts are unusual.

Engineers usually build skeletons from CSS, not from your exported shapes, so the useful handoff details are the numbers. Note the base and highlight colors (or the variable names), the bar heights and radius, the shimmer duration and easing, and which elements are left out. Put the skeleton variant next to the loaded state so the positions can be compared. For more on documenting that kind of detail, see the guide on writing Figma design specs.