Getting Started
Fundamentals
Features
💡
Support
Quest Overview
Build React + MUI from your Figma Design
Video transcript:
Quest brings your Design and Dev teams together to build the highest quality products, faster than ever thought possible. In this video we’re going to show you how you can build this custom card component that was designed in Figma and converted automatically into a React component with Quest.
This card is a part of our free templates called Quest Components in the Figma community. In it we have a growing list of starting components built responsively with Auto layout that you can just use to build your React product or website. We seed the MUI community design kit for you when you join Quest. This free kit will allow you to copy and paste select components into your custom designs to get React code. For total customization and all the MUI components, we encourage you to buy the official MUI for Figma Material-Components kit which you can make your own. However, there’s no limit to what kind of custom components you can create and convert into React.
We’ll start in Figma where you can see how we designed this Product Card. It’s a pretty simple setup, using auto layout and padding to position everything as needed. The button is an instance of the button component from the Quest Design Kit so when it is exported into Quest, it automatically gets converted into the corresponding MUI button.
To bring it into Quest, we’ll use the Quest plugin for Figma. It should only take a moment to process and you can hit “View in Quest”.
Now in Quest, you’ve brought in the custom component and you’re able to see your design rendered as a working React component. Quest lives completely in the browser and what we see in the middle of the Quest editor here is a live React component. This is not an image or a screenshot but live code which will look the same in your product or webpage.
Now that the static presentation layer is done, we can make this dynamic by setting up an interface to the backend. If you are not a developer, this is where you invite your developer to come into Quest to set this up.
Next, you will be ready to set up Props and Bindings. By clicking on the top-level layer called “Component” we’re able to add Props. For this “Card” demo we’ll add a property for “product” and for “buyClicked” which is a function to deal with the pressing of the button.
Now, we’ll add our Bindings. So clicking on the “Item Name” layer, we’ll add a text binding to say the text should come from the description property. Then, for price, we’ll use a function to get the price for the item. Finally, we’ll go to the button component layer and bind the “onClick” to “buyClicked” that was setup.
Now we’ll export this component and take a look at the .zip file that it creates.
As you can see, we have an assets folder for any images that were in the component. We also have two JS files which we’ll take a look at. First file is your presentation component with all the styling. Every aspect of design is styled and it references the design system as we were using it for fonts, colors and the button. It also sets up all the properties and bindings and handles the “onClick”.
In the other file, this is where you write any code for your business logic, call custom functions and APIs. Here, we’ll just add some custom code into what was already generated for us.
By having one file for structure and styling & one for logic, this allows the designer to iterate on design and resync without it ever overwriting anything. Start building without worrying that you’ll have to do redundant work.
Now here’s an example of the component nested inside of a sample page. You can nest components within each other and build full-fledged apps of any complexity. Like this dashboard app, which has 8 components nested inside.
Using Quest, you can add new components to your existing React application. You don’t have to start over from scratch. Let your team use the tools they love and simply upgrade your team’s workflow. Eliminate design and dev back and forth and start building your product faster than you thought possible, saving days of frontend dev time. We can’t wait to see what you build.
Last modified 1mo ago
Copy link