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. Getting Started

Quick Start - Build your first component from Figma

Step by step instructions on building your first component in Quest coming from Figma.

PreviousHelpful ResourcesNextQuick Start - Build your first component from a Wireframe

Last updated 1 year ago

Was this helpful?

Follow these steps to get started with Quest and build your first component. We will use a component from our design template for this activity. Once you get the hang of it, you can build with your own design files.

Quick Start Guide

  1. Create your Quest account from the . If you are joining a team account, please request your admin to send you an invitation to Quest.

  2. Open Figma and install the Quest Figma . You'll use your Quest account from step 1 to login to the plugin.

  3. Now let's build a React component for a simple card. We'll use a card from - a free design resource with 100's of components set up with auto layout. Open the templates file and duplicate it into your Figma account.

  4. Select the "Card" item from the list of Pages on the left. Then select "Card-2" frame. Copy the frame into a new file and select it.

  5. Open your Quest plugin. Check that the selected frame (Card-2) shows up in the plugin (see screenshot). Then click "Export Component". If the Export Component button is disabled, you just have to select the frame and hit the "Component" icon in Figma to make it into a component. This will enable the Export Component button.

  6. After the export is done, click "View in Quest" button to open the component editor in your Quest account.

  7. In the Quest component editor, you will see the card you exported. What you see is the React component automatically generated by Quest from the design. It should be pixel perfect to the design. You can always update you design and sync it back to Quest to automatically update the code component.

  8. This completes the presentation part of the UI. The next steps are about setting up props & bindings so you can connect to any back-end of CMS systems. The next steps are typically done by a developer, but for this exercise they are easy enough for anyone to attempt.

  9. Now let's setup props. With "Component" selected in the left panel, add a new prop on the right panel by clicking the "+". Enter prop name as "hotel".

  10. Next, let's setup the bindings for various elements that are dynamically updated from the backend. For example, select the "property title" text layer on the left panel by navigating through the layer groups. Then, on the right panel, create a binding by selecting the "Text" item from the "+" options. Enter binding name as "props.hotel.title" as shown in the screenshot below.

  11. You can repeat the process for all the text elements that are dynamic.

  12. Next, let's setup a function for the button. Select the "Button/Contained" layer on the left panel. On the right panel, add an "OnClick" binding and enter "fns.bookNowClicked" as shown in the screenshot below. This creates a hook to add your custom function code.

  13. Now, select the "Image" element on the left panel, and add a "backgroundImage" binding of "props.hotel.image" as shown in the screenshot below.

  14. With the presentation layer pixel-perfect to the design, and the props & bindings setup, you can now view the code in the Code & Preview Mode or export the code components. For this example, we'll choose to export. To do that, click the download icon at the top. You will download a zip file with assets folder and two .js files - Card2.js and useCard2.js. Card2.js is the presentation aspect of the module representing the visual design. You do not need to edit this file. If an updated design is synced, this code is update automatically. So your designer can iterate with little or no developer intervention. useCard2.js is the hook. It has the stub for your custom code. You can call your backend APIs or add any business logic. After you add your custom code, you can now add the component to your react app in the appropriate location and run it. Refer to the doc for detailed instructions on how to export and run your React/NextJS app.

sign-up page
plugin
Quest Component Templates
Exporting Code