Accessing The Design System

To begin using the VOIT Design System, follow these steps to access the design system file in Figma:

1. Import Files into Figma:

1. Open Figma and log into your account.

2. Import each file from the downloaded folder into Figma (check tutorial):

   • Click on the Import button in Figma.

   • Select the files (Foundation, Components, Miscellaneous, Icons, Blocks, Design Specs) from the downloaded folder.

   • Wait for the files to be uploaded and processed.

2. Set Up Libraries

1. After importing the files, create a new Figma file for your design project.

2. Add VOIT files as libraries (check tutorial):

   • Go to Assets in the left-hand panel.

   • Click on the Library icon.

   • Toggle on the VOIT files (Foundation, Components, Miscellaneous, Icons, Blocks, Design Specs) to enable them as libraries.

3. Using Components:

• Drag and Drop: Drag components from the Components page into your designs.

• Copy and Paste: Copy components from the VOIT libraries and paste them into your new design file.

• Customizing Components: Use Figma’s overrides feature to customize components without detaching them from the main component library.

• Updating Components: When updates are made to the main component library, your instances will automatically update, ensuring consistency.

• (Check Tutorial)