FIGR / UI TEMPLATE
Connect courses, skill gates and learning goals into a clear progression path.
This builder template covers digital learning & assessment workflows inside an existing product. All people, records and metrics shown are fictional.
BUILD ON THIS
Explore this screen, then bring in your own product and design system to shape the next version.
Builder
Save learning path
builder workflow
Default, Selected, Filtered, Empty, Warning, Success
Independent product UI reference; no external / 1mg design system
Connect courses, skill gates and learning goals into a clear progression path. The user needs to save learning path without losing context.
Product areas: Learning Overview, Courses, Assessments, Students, Credentials. Task fields: Digital Learning record, Assigned owner, Product area, Review status. Example metrics: Active records, Items needing review, Within policy, Upcoming deadlines.
Default, Selected, Filtered, Empty, Warning, Success. Also cover restricted access, interrupted saves and missing or stale data when relevant.
Learning Overview → Learning Path Prerequisite Builder → Save learning path
builder, filters, status, record details, review actions
Make rule dependencies explicit, preview effects, and allow users to review before saving.
Review save learning path with a case such as PATH-101 · foundational modules. Make room for empty, warning, permission-denied and failed-save states.
Adapt Learning Path Prerequisite Builder to my existing product and design system. Keep our current screens, components and role rules. Explore default, selected, filtered, empty, warning, success and relevant edge cases before generating editable Figma-ready UI.
KEEP EXPLORING
Browse other product UI examples, compare patterns, and pick the direction that suits your product.