LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page

Was this helpful?

  1. Fundamentals

Quest plugin for Figma Dev Mode

Using the Dev Mode vs Design Mode Quest Plugin for Figma

PreviousAnimations - build with React SpringNextPublish on Quest to a URL

Last updated 1 year ago

Was this helpful?

With the Dev Mode toggle in Figma, we now support 2 different plugin modes. This doc will help explain the benefits & differences. To use the Quest plugin for Design mode (original Figma) you will need to create an account with Quest on one of the plans including the Free plan.

Get the

to get access to the Design Mode plugin as well

To see the full power of the Dev Mode, grab the and try out some of the seeded complex Quest templates in the Dev Mode.

Using Quest - Figma Design vs Dev Mode

Features
Design Mode (Original Figma)
Dev Mode

Access without Quest Account

X

✓

Does not require read-access to file

X (duplicate file to fix)

✓

Inspect basic code (styling and structure)

✓

✓

View all code (breakpoints, business logic, theme files, full App)

✓

X

Manage App (source of all components, theme files, images & fonts)

✓

X

Sync to GitHub

✓

X

Download entire App as CRA or NextJS

✓

X

Support for MUI and Chakra UI components and design systems (For custom please contact us)

✓

X

Add features (Animations, grid, popovers, tooltips, etc.)

✓

X

Support for Light/Dark mode design system and component styling

✓

X

Handle variants as states or breakpoints

✓

X

AI Prompt to write business logic

✓

X

Quest Plugin for Figma
Sign-up for a Quest Account
Free Quest Design Kit