Designers

This guide will walk you through the process of integrating the component library into your Figma workflow, utilizing its components effectively, understanding the component structure, and making the most of the light and dark themes.

Loading the SL Design System Library

To access the Sanoma Learning Design System components in Figma, follow these steps:

  1. Open Figma: Launch your Figma application.
  2. Create or Open a Project: Start a new project or open an existing one where you want to integrate Sanoma Learning components.
  3. Navigate to the 'Assets' Tab: On the left sidebar, click on the 'Assets' tab.
  4. Add Libraries: In the 'Assets' tab, click the '+' icon next to 'Libraries.'
  5. Search for Sanoma Learning: In the search bar, type 'name of your product' and select it from the search results.
  6. Add to Your Project: Click 'Add to Your Project' to include the library in your workspace.

Using Components from the Library

Now that you've added the Sanoma Learning Design System library, let's learn how to use its components:

  1. Access the Components Panel: On the left sidebar, click on the 'Assets' tab again, and this time, select 'Components.' You'll find the Sanoma Learning components here.
  2. Drag and Drop: To use a component, simply drag and drop it onto your canvas. You can now customize it according to your design requirements.
  3. Instance Swap: You can easily swap instances of components by right-clicking and choosing 'Swap Instance.'\

Understanding Component Structure

Sanoma Learning Design System components are organized for clarity and ease of use. Familiarize yourself with the component structure:

  1. Hierarchical Structure: Components are organized hierarchically, with main components having variants or states nested within them. Explore these nested components to find the perfect fit for your design.
  2. Customization: Components often have customizable properties that you can adjust in the right-hand 'Properties' panel. Experiment with these to tailor components to your design needs.

Working with Light and Dark themes

The Sanoma Learning Design System supports both light and dark themes. To switch between them:

  1. Theme Toggle: In the 'View' menu, navigate to 'Themes.' Here, you can toggle between 'Light' and 'Dark' themes. Choose the one that aligns with your design or user preferences.

Congratulations! You're now equipped to seamlessly integrate the Sanoma Learning Design System components into your Figma projects. Whether you're creating educational materials or interactive interfaces, these components will empower you to design with consistency and efficiency. Happy designing!