Nesting Components
Last updated
Last updated
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.
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.
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:
