How to use Dynamic Layer

1. Setup your Figma File

‍

After you download the Free or Pro version, you will receive a folder containing all the necessary files and information.

‍

1.1 Upload the Figma File

‍

First, you need to import the included Figma file into your dashboard. Follow these steps:

1. Click on Drafts.
2. Click on Import in the upper right corner.
3. Select the Figma file from the Downloads folder and upload it (this step may take a few minutes).

After you have completed the steps, open the file.

2. Get an overview

‍

To get a first impression of everything included in Dynamic Layer, you can go through the navigation.

‍

2.1 Navigate through the different pages

‍

On the left side you will find a list of all included components, templates and styles. They are divided into different groups to make it as easy as possible for you to find what you're looking for.

3. Edit components to suit your needs

‍

All components are fully customizable. No matter what font or color you need, you can easily adjust everything.

‍

3.1 Well structured components

‍

All included components provide the perfect foundation for building your own design system. Of course, you can also use all components as they are. They are accessible and comply with current usability guidelines for mobile apps.

4. Adjust the stored variables

‍

To adapt the design system to your needs, you can edit the stored variables. Whether you want to adjust the colors, fonts, or spacing.

‍

4.1 Make Dynamic Layers your design system

‍

Every project you work on has different needs. Each project requires individual colors, a unique font, or square rather than rounded components. You can adjust all these settings in the stored variables. Your changes will then be applied to the entire file and updated automatically. This allows you to modify the file with just a few clicks.

‍

Read this article if you want to learn more about variables.