Fable product screens examples

Fable

Sign-in screen where the user authenticates with Google or via email and password.

• Sign In

Fable

Authentication screen where the user requests a password reset link by entering their email address in a modal overlaying the main sign-in view.

• Forgot Password
• Confirmation

Fable

Signup screen where the user creates an account using Google or an email and password.

• Sign Up

Fable

Signup screen where the user is creating an account with their email and password, currently showing an active loading state after submission.

• Sign Up
• Loading

Fable

Verification screen where the user is instructed to check their inbox to confirm their email address, with an option to resend the link.

• Verification
• Account Setup

Fable

Onboarding step where the user provides their full name and selects their role to complete account setup.

• Account Setup
• Profile

Fable

Onboarding step where the user selects their professional role from a dropdown list including options like Motion Designer, Animator, and UX/UI/Product Designer.

• Account Setup
• Profile

Fable

Dashboard empty state where the user is prompted to start their journey by choosing a starter file like a loading wheel or scissors, or by creating a blank project.

• Empty State
• Add & Create

Fable

Motion graphics editor where the user animates a loading wheel with rotation and scale keyframes on a timeline.

• Design Editor
• Media Editor

Fable

Design editor where the user is animating a loading wheel composed of colored circles, with a context menu open to copy or duplicate elements.

• Design Editor
• Media Editor

Fable

Motion design editor where the user is animating a loading wheel with multiple rotating and scaling ellipses on a timeline.

• Design Editor
• Media Editor

Fable

Design editor where the user animates a loading wheel graphic and text layer, using a properties inspector for styling and a bottom timeline for keyframing.

• Design Editor
• AI Editing