The LSX Design System allows you to create fully interactive prototypes that simulate real user journeys and test functionality before moving into development. You can utilise pre-configured variables and components, including buttons with multiple states, sliders, dropdowns, and more. This guide provides comprehensive instructions for building effective prototypes with the LSX Design System, helping you streamline the testing and refinement process.

Steps for Prototyping: #

• Create a New Page for Prototyping
  • Begin by creating a new page in your Figma file specifically for prototyping. This page will serve as the workspace where you link interactions and simulate user flows.

• Copy Page Designs to the Prototyping Page
  • Copy the page designs or components you want to prototype into this new page. You can copy full-page designs (e.g., Home, Product, or Checkout pages) or specific elements you want to focus on, such as buttons or navigation menus.

• Use Pre-Configured Prototype Variables
  • Leverage the pre-configured prototype variables included in the LSX Design System. These variables cover button states, dropdowns, sliders, text inputs, and more, allowing you to quickly build prototypes without needing to create interactive elements from scratch.
  • Simply apply these variables to components in your design to test various states and interactions.

• Using Button Components for Prototyping
  • Grab Instances of Button States: In the design system, button components come with multiple pre-built states such as Default, Hover, Active, and Disabled. Select instances of each state to create a dynamic button interaction.
  • Create a Component Set: Once you have instances of each button state, create a component set by selecting all the button states and using the Combine as Variants option. This will allow you to manage the button’s different states in one component set.
  • Assign Interactions:
    • Set the hover interaction by selecting the default button and using the Prototype tab to link it to the hover state. Use a Mouse Enter trigger to switch to the hover variant.
    • Set the click interaction by linking the hover state to the active state using the On Click trigger. You can also link the active state back to the default state using a Mouse Leave trigger.
  • With this setup, the button will simulate real-time interactions, changing states as the user hovers over or clicks the button.

• Creating Interactive Forms and Inputs
  • For forms and text inputs, use the pre-built input fields from the LSX Design System. These components come with states such as Focused, Typing, and Disabled.
  • You can link these states to simulate user interactions. For instance, when a user clicks on the text input, switch to the Focused state, and then link to a Typing state when input is detected.
• Build Prototype-Specific Components
  • If your prototype requires additional prototype-specific components (e.g., sliders, galleries, accordions), use the LSX Design System’s components, which are designed for easy integration into interactive flows.
  • For sliders and galleries, you can set up interactions that allow users to drag or click through images, making use of Drag or On Click triggers in the Prototype tab.
• Link Components Using Figma’s Prototyping Features
  • Use Figma’s prototyping functionalities to link all the interactive components and create smooth user flows. For example, you can link a button to navigate from the home page to the product page or trigger a dropdown to open when clicked.
  • Set up triggers, transitions, and actions to simulate how users will interact with the design:
    • Triggers: Choose from a variety of triggers such as On Click, Mouse Enter, Hover, or Drag.
    • Transitions: Use transitions like Smart Animate for smooth transitions between button states or page navigation.
    • Actions: Define what happens after an interaction, such as opening a new screen, changing a component state, or navigating to another page.

• Previewing the Prototype
  • Use the Prototype mode in Figma to preview your interactive design in real-time. Click through the buttons, test form submissions, and simulate user flows to ensure everything functions as expected.
  • Adjust interactions, transitions, or timing as needed to refine the user experience.
• Test Prototypes on Different Screen Sizes
  • If you’re building responsive designs, test your prototype across various screen sizes such as desktop, tablet, and mobile. Use Figma’s device frames to preview how your interactions behave on different devices.
  • You can also link components between different screen sizes, allowing users to switch views in your prototype.
• Iterate and Refine the Prototype
  • As you gather feedback from users or stakeholders, continue to iterate and refine your prototype. You can quickly update components, interactions, or flows without rebuilding the entire design, thanks to the modular structure of the LSX Design System.
  • Use the Prototype tab to adjust transitions, timings, or triggers based on the feedback you receive.

Explore Pre-Built Prototypes #

To help you get started, explore these fully interactive prototypes built using the LSX Design System. Each prototype simulates different types of websites and stores, allowing you to see how the design system handles real-world user journeys. The prototypes include fully navigable pages and functional interactions that simulate a live website experience.

Basic WordPress Website Prototype

A simple website prototype designed to simulate a basic WordPress site with essential pages and user interactions. This prototype is perfect for showcasing smaller websites with a straightforward navigation flow.

• Included Pages:
  • Home
  • About
  • Services
  • Solution
  • Contact
  • Contact Thank You

• Functionality:
  • All pages are fully navigable, and elements such as buttons, menus, and links are clickable. The contact form is functional, with a typable input field and an interactive submit button that redirects to a Contact Thank You page.

Standard WordPress Website Prototype

This prototype is a more comprehensive website build, simulating a full WordPress experience with additional pages for content-heavy websites. This is ideal for agencies, portfolios, or blogs that require more detailed navigation.

• Included Pages:
  • Home
  • About
  • Services
  • Solutions
  • Contact
  • Testimonial
  • Blog Landing
  • Blog Category
  • Single Blog Post
  • Portfolio Landing
  • Single Portfolio Page

• Functionality:
  • Users can navigate through a variety of content types, including blog posts and portfolio items. The blog pages allow users to click through categories and read individual posts, while the portfolio section provides an interactive display of projects. All links and buttons are functional, providing a realistic user flow across the site

WooCommerce Store Prototype

A fully interactive WooCommerce store prototype that simulates an online retail experience. This prototype is perfect for eCommerce store owners who want to visualise the entire shopping journey, from browsing products to completing a purchase.

• Included Pages:
  • Home
  • Shop
  • Category Pages
  • 8 Single Product Pages
  • Cart
  • Checkout
  • Order Confirmation

• Functionality:
  • The shopping experience is fully simulated, allowing users to browse through categories, view detailed product pages, add items to the cart, and proceed through the checkout process. The cart page allows users to adjust quantities and see total prices update dynamically. After completing a purchase, users are taken to the Order Confirmation page, completing the full eCommerce journey.

Additional Tips for Prototyping Success: #

• Use Auto Layout: Components with Auto Layout will dynamically adjust their size based on content changes, so use this feature to create flexible, responsive components in your prototype.
• Smart Animate: Use Smart Animate for smooth transitions between states, especially for hover effects, dropdowns, and sliders. This will give your prototype a polished and professional feel.
• Organise Pages: Keep your prototyping page organised by grouping interactions by flow or component type. This makes it easier to manage complex prototypes.
• Naming Variants: Clearly name variants within your component sets to easily identify and link them in the Prototype tab.