To get the most out of the LSX Design System, follow this step-by-step guide to set up your Figma file for customisation. 

For more information on using Figma, visit their learning centre: Figma Learning Centre.

Initial Setup: #

• Download the Design System File
  • Download the LSX Design System.
• Assign Main Colours
  • Open the Colours/Primitives variable folder.
  • Select and assign the main colours by either using the colour picker or filling in the hex values and matching them with their corresponding variables (e.g., Primary/Primary, Base/Base, CTA/CTA).
  • Ensure the correct assignment for each core colour to maintain consistency across your design.

• Configure Colour Shades Using Supa Palette
  • Search for Supa Palette in the plugin directory. Using Supa Palette, assign shades to your selected colours with the following steps:
    • 1. Fill in the correct variable name in the field at the top. Be mindful of case sensitivity in the text—make sure it exactly matches the variable name.
    • 2. Ensure the Update Variables option is selected.
    • 3. Copy the relevant hex value into the Hex field.
    • 4. Click the small arrow next to the Update Variables button at the bottom.
    • 5. Verify that the correct colour is being updated in the top bar, noting that the variable name is exactly as it appears in the variable file, and that the appropriate library (e.g., Colours/Primitives) is selected.
    • 6. Click Update Variables
    • 7. Continue until all colour shades are assigned.
  • Updated colours will automatically display in the Style Guide colour palette and any component using those colours, such as buttons.
  • Hide any unused colour values from the palette to maintain a clean workspace.

• Adjust Semantic Colours
  • If necessary, modify semantic colours (e.g., Disabled, Information, Success, etc.) in the Colours/Semantic variable folder to suit your project’s needs.
• Set Font Families
  • In the Typography variable folder, choose your Primary and Secondary font families.
  • Input the names of your selected font families into the Font-Families fields.
  • This will apply the fonts throughout the document and may take a few moments to update across all components.

• Modify Screen Sizes (Optional)
  • If necessary, modify semantic colours (e.g., Disabled, Information, Success, etc.) in the Colours/Semantic variable folder to suit your project’s needs.
• Customise Icons and Logos
  • Replace the default LSX Design icon and logo on the > Icons page and the Style Guide page with your own branding assets to ensure consistency throughout your project.

• Check for Additional Customisations
  • Review any other pre-built components or variables you may want to adjust, such as buttons, spacings, or effect styles, to match your unique project requirements.