Mantis MUI React
v3.2.0
v3.2.0
  • Documentation
  • Pre-requisites
  • Quick Start
  • Folder Structure
  • State Management
  • Internationalization
  • Authentication
    • Switch to Auth0
    • Switch to Firebase
    • Switch to AWS Cognito
  • Axios API Calls
  • Routing
  • Project Configuration
  • Color Presets
  • Theme/Style Configuration
  • How to
    • Login as First Page
    • Remove menu render from Backend
    • Remove Authentication
      • Vite
      • NextJS
  • Figma
  • Integration
    • Seed
    • To Existing Project
    • Comparison
  • Components
    • Avatar
    • BreadCrumb
    • Button
    • Dot
    • Main Card
    • Progress
    • SnackBar
    • Tooltip
    • Transitions
  • Dependencies
    • Vite js
    • Next js
  • Roadmap
  • Support
  • Changelog
  • Mantis Eco System
  • FAQ
Powered by GitBook
On this page

Figma

Mantis Figma FAQs

PreviousNextJSNextIntegration

Last updated 11 months ago

How to apply Dark/Light colors using Themer Plugins

Video Tutorial -

Setup the Themer Plugin

  1. Import & Open Mantis-color-palette.fig file into Figma.

  2. Goto Menu -> Libraries -> Find and Publish Mantis-color-palette -> Publish styles

  3. Try out the free figma Themer Plugins from .

  4. Open Themer Plugin Dialog and follow below steps.

    • Save JSONBin API key after setting up account from

    • Create a theme

      • step1 - Select Color styles

      • step2 - Select Local styles

      • step3 - Checkmark the "Create multiple themes from ....."

      • Hit Create theme button.

Troubleshoot

Problem - None of the styles are published. Publish them to continue.

Resolution - Follow Step 2. Problem - Stuck in Themer Plugin?

Resolution - Reset Themer from Dialog Settings -> Reset Themer and follow step 4

How to apply Dark/Light colors?

  1. Import & Open Mantis.fig into Figma.

  2. Goto Menu -> Libraries -> Find and Activate Mantis-color-palette libraries.

  3. Open Themer Plugins Menu -> Plugins -> Themer

  4. Remain Open the Themer Dialog.

    1. Select any existing frame(s)/layer(s)

    2. From Themer Dialog select Night and hit Apply to selection button for Dark Layout.

    3. From Themer Dialog select Day and hit Apply to selection button for Light Layout.

It may take longer loading time to apply styles using Themer Plugins depends upon the selected amount of frames/layers.

http://bit.ly/3UBiRR9
Figma Community
jasonbin.io