Figma
Bring the same loading patterns into your design files. Each component includes editable vectors, three sizes, two tones, and still and looping prototype states.
Download
Get the complete library, or download a single component from its homepage card or component page. Downloads are ZIP kits containing a Figma generator and static SVGs.
Installation
Use Figma desktop to install the generator once. It creates reusable Figma components automatically inside the file you choose.
- Download a kit and extract the ZIP into a folder. Keep
manifest.jsonandcode.jstogether. - Open a Figma Design file in the desktop app.
- Choose Plugins → Development → Import plugin from manifest and select the extracted
manifest.json. - Run Loading Design from the Development menu. The kit name identifies the component or complete library.
- Find the new Loading Design page in your file. It contains the component sets and a Preview frame.
For a quick static import, drag an SVG from the kit’s svg folder onto your canvas. Use the generator when you want reusable variants and prototype loops.
Using components
Open Assets and insert a Loading Design component, or copy an instance from its component set. Use the properties in the right sidebar to choose its appearance.
| Property | Options |
|---|---|
| Size | Spinners: 20, 36, 48px. Thinking Dots: 4, 6, 8px dot diameter. Text Skeleton: 160, 240, 320px width. |
| Tone | Ink for light surfaces. Paper for dark surfaces. |
| Motion | Still for static layouts and reduced motion. Loop for prototypes. |
| Phase | Start at 01. The remaining phases form the animation loop. |
Edit the Artwork layer’s vector fills and strokes in the main components to use your brand colors. Apply the same changes across the loop’s phases for consistent animation. Use Figma’s Scale tool for other sizes. Text Skeleton is a three-line preset with a 68% final line.
Prototype motion
Select the Preview frame and click Present to see the loops. In your own prototype, place a component instance inside a frame and set Motion to Loop and Phase to 01. The design canvas displays a static state.
Loops sample twelve vector states per cycle. Ring uses a 0.8-second cycle, the other spinners and Thinking Dots use 1.2 seconds, and Text Skeleton uses 2 seconds. Actual prototype timing can vary. Dual Arc’s inner speed is approximated for a seamless loop, and dashed-border spacing may differ from the browser version.
Sharing and updates
Keep the main components in a shared design file. If your workspace supports team libraries, publish that file so designers can insert instances from Assets.
To update, download the latest kit and run its generator again. Each run creates a new page. Review the new components and replace existing instances when ready.
If installation fails, confirm you are using Figma desktop, have extracted the ZIP, and selected the manifest rather than the JavaScript file. Keep the whole extracted folder on your computer while the development plugin is installed.