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

Nesting Components

PreviousCreating Responsive ComponentsNextWorkspaces & Apps

Last updated 2 years ago

Was this helpful?

Quest doesn’t just allow you to work with individual components but also allows you to nest components into unlimited parents and so you can build robust and complex web pages and apps. When adding components inside other components and exporting the parent, Quest will export code that references each of those components accordingly so not only will it look correct, it will handle the correct code setup as well. At the core level, you’ll still need to import every component you want to be dynamic or reusable but it’s easy to create that structure and see how all things fit together.

Example Dashboard built with Quest using nested components

For example, this dashboard was built by combining several custom Figma components together such as the sidebar, the welcome card, the site views card, the location views card, the date picker, the events list and the table. Each of those inside this design are instances of a main component somewhere else in the design file. By exporting the entire design to Quest, the entire design will come through even if those components don’t exist yet in Quest. Each one of them will get a reference to the component in Figma and Quest will give it the reference when you export your code.

For example, say you want to export this dashboard first then later come back and set up the sidebar navigation system to have working links and rollovers. You aren’t locked into a particular flow, so you can export the dashboard first just to see how it will look as a working React component. Then you can go back and export your sidebar into Quest, set up props and bindings and export that code. Now that reference to a non-existent component does exist because everything is based on the source of truth which is the Figma file. So you’re free to work in whatever order you’d choose to, exporting the dashboard code first or the sidebar first or iterating on one or the other, it doesn’t matter. As long as you nest components properly in Figma, Quest will read that and set up the code correctly.

One important thing to keep in mind while nesting is that in Figma, an instance of a main component can be changed with overrides, so you can make it visually different from the main component. However, this will not be honored in the code when you bring it into Quest and export the original state of the main component so if you need to make an edit to an instance, be sure that you understand that edit will not come through in the code.

Nested prop values

In any component you can pass prop values for its nested components. In the nested prop values section you provide the list of prop value combinations that will be passed down to the nested component as indicated in the screenshot below: