Figma Progress
Figma Progress
Preview
Figma Progress
Figma Progress Component
The Progress component displays the completion of a task using linear or circular indicators. Use Progress components for tasks exceeding 2–3 seconds. The Figma progress components include linear and circled variants.
Progress Anatomy
| Set | Variants | Properties | Copy to Figma |
|---|---|---|---|
| ProgressBar | 99 | Type Default, Top, BottomSize Large, Medium, SmallState 00%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% | |
| ProgressSegmented | 99 | Type Default, Top, BottomSize Large, Medium, SmallState 00%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% | |
| ProgressIndicator | 15 | Size Large, Medium, SmallState Default, Incomplete, Complete, Error, Indeterminate | |
| ProgressCircular | 9 | Size Large, Medium, SmallState Any%, Success, Error |
Compared to linear indicators, the circled progress bar can be easily integrated into buttons or other UI elements by nesting its instance without disrupting the overall design.
Figma Progress
Progress
progress bar
loading bar
progress component
Interactive component
