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
  • This layer has export settings turned on only in some variants
  • This layer has a different number of children across the variants
  • This layer has differently named children or children in the wrong sequence across the variants
  • Processing all variants and nodes in this components may require excessive amount of memory and may abort plugin runtime.
  • Parent frames cannot be set to "hug" vertically, horizontally or both if its children are ONLY set to absolute
  • Unable to export nested component because it is in a separate file. Please export this component directly from its file.

Was this helpful?

  1. Help

Plugin Warnings / Alerts

PreviousFAQsNextWhy does my design look different in Quest than Figma?

Last updated 2 years ago

Was this helpful?

When setting up your designs in Figma, the Quest plugin will alert you to any potential issues with the design setup. Below are the issues and how to resolve them.

These are broken up into:

Warnings

These are important recomendations about your design setup that will help improve code quality as well as feature & binding set up. For instance, if you don't match the exact layer order or naming across variants, we will merge them and create more layers than may be needed and thus you may need to setup features and bindings in multiple places in different states.

Alerts

These are things to be aware of that might cause certain things in Quest to look different than your design. In most cases no action is needed.

This layer has export settings turned on only in some variants

All layers in variants need to be the same type. If you have some that are complex shapes made up of several different shapes, sometimes it is best to flatten them. If you do this, this message is to alert you to do this for all variants or else we will merge them for you making multiple layers in your component.

Simply make sure you have all layers flattened in all variants by choosing the flatten option from the menu.

This layer has a different number of children across the variants

You can use components with variants in Figma for two reasons: to design for different component states or to design for different breakpoints / screensizes.

When setting up variants you should be sure that all variants share the exact same layers and layer names. All layers must be in the same order. You can change anything about that layer, such as auto-layout direction, size, color, effects, etc. as long as the order and naming of the layers are retained.

If you absolutely cannot style things between variants based on the same layers, you can simply create two versions of that auto-layout frame that looks different and turn off the versions you don't want to see. In the image example above, you can see there are 2 main variants, each for different screen sizes. When looking at the footer, both versions are there in the variant for the "footer" but in the desktop version, the phone version is hidden and in the phone version, the desktop version is hidden. This will map things correctly in the code but only show what you want the user to see.

If you don't match things exactly you will see a Warning about this but we will still export the component as is. In Quest you may not notice the issue if checking the different variants but in the exported code you may notice the merge. This may lead to code that is less streamlined and you may need to setup features and bindings more frequently but your mileage may vary and it is ultimately up to you what works best in your process.

This layer has differently named children or children in the wrong sequence across the variants

Processing all variants and nodes in this components may require excessive amount of memory and may abort plugin runtime.

Figma can sometimes abort the plugin processing if too much memory is used. This can vary drastically based on how many variants you have and your computer's memory. This is simply to warn you that this may happen as it may process without issue.

If it does fail, turn off the "w/ Nested Component Instances" checkbox and instead export things individually.

Parent frames cannot be set to "hug" vertically, horizontally or both if its children are ONLY set to absolute

In Figma you can have "hug" set on things and it will display as fixed. But in React, this would cause it to collapse on itself. So in cases where unwanted behaviors may occur, we will try to fix the issue. In this case, we set vertical and horizontal planes on this layer to “fixed” to avoid this problem for you.

Unable to export nested component because it is in a separate file. Please export this component directly from its file.

This is simply an alert to tell you that we could not process a nested component from a different file. You can either move it to your current Figma file or export it individually later to fix the issue. We will remember the link to it but we just won't create a component in Quest since the plugin won't have access to it.

This issue is similar to "". Because the names do not match, Quest will merge the layers. In Quest you may not notice the issue if checking the different variants but in the exported code you may notice the merge. This may lead to code that is less streamlined and you may need to setup features and bindings more frequently but your mileage may vary and it is ultimately up to you what works best in your process.

🔍
This layer has a different number of children across the variants