# How to Create Dark & Light Mode with Variables in Figma? Tutorial3 minPublished on Jul 24, 2023Updated on ![images of a dark and light mode mockup on Figma](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6711560789c5f9aef85e2d7e_64bea7bcf45f8aa378e124b4_dark-light-mode-figma-variables.png)Table of contents [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Use AI to summarize this article[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Key pointsThe [new Variables feature in Figma ](/blog/figma-variables-revolution-advanced-design-mockup-process)takes web design possibilities to new heights. With these variables, you can create even more powerful prototypes by utilizing an integrated logic system. In this article, we will guide you step by step to **create a Dark & Light Mode using variables in **[**Figma**](/tools/figma). This will enable you to provide an optimal visual experience for your users based on their color preferences. ## 1. Adding Color Variables in Figma ![adding variables feature image in Figma](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6711560889c5f9aef85e2e6a_64bea5fae25f6a9e1b306817_ajout-variant-figma.png) Start by creating variants to define the different colors for your project. These variables will allow us to centralize all styles used in the prototype and change colors with just one click. From the design panel, follow these steps: - Click on "**Local Variables**" - In the variables table, click on "**Create variable**" - Choose the "**Color**" variable - In the Name column, **assign a name **to your color. For example, use numbers within the same color family, like 100 / 200 / 300 for different shades of gray. - In the Value column, **assign a value **to the color by adding a HEX code. - You can **group colors** from the same family by selecting the colors, right-clicking, and then clicking on "New group with section" - Left-click on the collections list, click on "Rename Collection," and **rename your collection "Colors"** ## 2. Create a Second Collection for Uniformity in the Prototype ![collection creation feature in Figma](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6711560889c5f9aef85e2e6d_64bea617ed46af522b5c85b2_cre%25CC%2581er-collection-figma.png) Now we will define how each of the colors will be used in our project. To maintain uniformity in the prototype, it's crucial to designate primary and secondary colors for each graphic element: texts, backgrounds, borders, etc. Therefore, we will create a new collection called "Tokens," where we will list the possible uses and connect the colors from our "Colors" collection. Follow these steps: - **Add variables for texts, backgrounds, and borders **by defining "Primary" and "Secondary" - Click on the color - Go to **"Libraries" **and choose the color from the "Colors" collection that you want to connect. - Group your Primary and Secondary for Texts, then for Backgrounds, and finally for Borders ## 3. Create a Second Mode in the Collection ![creating mode for Figma variables](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6711560889c5f9aef85e2e71_64bea62f9d3d1a01ba89fe2d_cre%25CC%2581er-mode-figma.png) You have just defined all the colors for your project and assigned them to specific uses. However, you have done this for only one mode. Now, you need to create a second mode where you will define new colors. Follow these steps: - From the "Tokens" collection, **click on the "+" icon in the top right** to add a new column and thus a new mode. - **Rename your two modes**, for example, "Light" for the first one and "Dark" for the second, by right-clicking on the header. - For each row in this new column, **customize the color **for your Dark mode ## 4. Connect the Variables to the Design ![connecting color variable feature in Figma](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6711560889c5f9aef85e2e75_64bea5aa3bce5f5c6f75dec3_connecter-variant-figma.png) Everything is ready in the collections! Now you need to connect these variables to your Figma design. To do this, you must: - **Select a component **from your prototype - **Access the variables **by opening the color panel of the component and clicking on "Libraries" if it is not set by default. - **Assign the color variables** from the "Tokens" collection to each component of the prototype ## 5. Switch from Dark to Light Mode ![Figma prototype in dark and light mode](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6711560889c5f9aef85e2e78_64bea54fae3d14eb8a53f8cd_dark-light-mode-figma.png) Your Dark & Light mode in Figma is ready! You just need to: - Go to the **layers features **in the design panel - Click on the **"Variable" icon** - Open the **"Tokens" collection** - **Select** one of the two modes, either Dark or Light mode Another option is to leave the layer in **auto mode**. In this case, the design will automatically take the mode of the frame it is integrated into. You can create two distinct frames, set one frame to Light and the other to Dark, and switch the design from one frame to the other to adapt. With the power of variables in Figma, you can now create prototypes in Dark & Light Mode more efficiently than ever. By following the steps outlined in this article, you can enhance the user experience by offering a color choice that suits everyone's preferences. Take advantage of this new feature to push the boundaries of web design and create visually captivating designs! [ ](#)![Thomas Labonne](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a45970e82f1635d9e4d7f_thomas-website%20(1).webp)Thomas LabonneCo-founder[ ](/team/thomas-labonne)[ ](https://fr.linkedin.com/in/thomas-labonne-digidop)[ ](#)+1200 readers ## Stay ahead of the curve! Subscribe now for expert insights. [Subscribe ](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter ](https://digidop.substack.com/) ## Suggested articles ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post ### Top 20 Web & Digital Agencies for B2B SaaS in 2026 [Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post ### Webflow launches Source. Our take on this shift. [Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post ### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers [Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles ](/blog)Every great website   starts with a conversation[Talk to an expert ](/contact)[Book a call ](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)