Once you’ve completed the initial setup, you’re ready to start building your designs. Follow this process to create new pages and customise components efficiently. For more in-depth tutorials on creating designs in Figma, visit Figma’s Learning Centre.

Steps for Creating Designs: #

• Create a New Page
  • Start by creating a new page in your Figma file to work on.

• Select a Template Frame
  • Choose a template frame that aligns with the screen size you are designing for (e.g., desktop, tablet, or mobile).
  • Copy the template frame to your new page, ensuring your layout matches the target screen size.

• Choose Components, Template Parts, Blocks, or Patterns
  • Select components, template parts, blocks, or patterns from their respective pages in the file.
  • You can browse through the elements manually or use the Assets tab on the left panel to search for specific components.
  • Switch Variants: If a component has multiple variants, you can quickly toggle between them by using the dropdown in the right panel when the variant is selected.

• Build Your Page
  • Start assembling your page by placing the selected components and customising them as needed. Ensure that the layout remains consistent with your design goals and branding.
• Check Contrast & Accessibility
  • Throughout the design process, use the Stark Contrast & Accessibility Checker plugin to verify that your design meets accessibility standards.
  • If any issues arise, consider using a different shade from the colour palette or making adjustments to the Primitive colours.
  • If you change any main colours, update the associated colour shades using Supa Palette to ensure consistency throughout the design.
• Note on Structural Changes
  • If you need to alter components structurally, you will need to detach the specific instances from the main component.
  • Important: Detaching a component will prevent you from switching between variants for that instance in the future, so only detach when necessary.