Main UI

Top Bar

Primary navigation categories, and core application settings.

Search Bar

• Appearance: An input field with a search icon on the left and a placeholder for text input.
• Function: Allows users to quickly find specific tools, features, or help documentation within the plugin.

WaySpace & Tools Toggle

• Appearance: Two distinct buttons, Wayspace and Tools, indicating the UI user is on.
• Function: Allows users to switch between their Personalised Wayspace and all the tools Waysorted provides.

UI Style Toggle (Default / Glass)

• Appearance: Two distinct buttons, Default and Glass, indicating different UI visual styles. Glass is typically a translucent, modern look.
• Function: Allows users to switch between a standard opaque plugin UI and a "Liquid Glass Mode" for an immersive experience.

Left Panel (Credits & Account)

Manages user credits, which unlocks premium features & tools.

"Your credits" Section

• Appearance: A card element with a wallet/credit icon.
• Function: A view of credit usage, and ability to purchase more.

Credit Balance & Status

• Appearance: Displays the numerical amount of credits left with a button/label depending on the credit status.
• Function: Informs the user of their remaining credit balance. The Active button confirms the credits are usable. The Low button confirms the credits are low. The No credits left button shows that credit is exhausted.

"Get more credits" Button

• Appearance: A secondary action button.
• Function: Directs users to a page where they can purchase additional credits.

Central Panel (Wayspace - Customizable Hub)

Acts as the personalized dashboard where users can curate and access their favorite tools. Checkout Wayspace docs for more info.

Right Panel (Engagement & Communication)

Provides quick access to engagement features, community, and important updates.

Way Challenge

The flagship game of Waysorted's Figma plugin.