Quick Start - Build your first component from Figma
Step by step instructions on building your first component in Quest coming from Figma.
Last updated
Step by step instructions on building your first component in Quest coming from Figma.
Last updated
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.
Open Figma and install the Quest Figma plugin. You'll use your Quest account from step 1 to login to the plugin.
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.
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.
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.
After the export is done, click "View in Quest" button to open the component editor in your Quest account.
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.
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.
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".
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.
You can repeat the process for all the text elements that are dynamic.
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.
Now, select the "Image" element on the left panel, and add a "backgroundImage" binding of "props.hotel.image" as shown in the screenshot below.
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.
