Quick Start - Build your first component from Figma

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

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 sign-up page. 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 plugin. 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 Quest Component Templates - 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. After the export is done, click "View in Quest" button to open the component editor in your Quest account.

  5. 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.

  6. 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.

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

  8. 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 Exporting Code doc for detailed instructions on how to export and run your React/NextJS app.

Last updated