Quest Overview

Video transcript:

Quest helps product teams build full-stack React Apps faster than ever thought possible. In this video, we're going to show you an example of how we can convert a custom card component designed in Figma and generate a React component automatically. We'll then take a look at some of the amazing features of Quest, such as GitHub integration, animations, breakpoints, and Chakra and MUI design system support.

In this example, we have a card component and a grid component with the card instance nested inside of it. We'll use the Quest plugin for Figma to export both components at once and bring them into Quest. In the Quest editor, we can see that this component is responsive. It's also using an MUI button that we copied and pasted from the official MUI kit. What you see here is live React code in an iframe, and this is exactly how it will look in your final product.

First, we'll add a hover animation to the child card.

Then, I'll add some bindings.

Next, I'll go to the grid design and add a grid feature.

We can test this out in preview mode, where we see it as fully responsive and it even animates the child card as I hover over them.

Next, I can sync this component to GitHub or download the code in TS or JS.

I'll download the code to take a quick look at VS Code.

Here we have the presentation layer generated in clean code as if hand coded, and additionally, we have a file for business logic so developers can write any custom logic they need. By separating the files, we let designers iterate in designs without overriding any business logic developers would write. Quest works great to export individual components or, additionally, you can export your entire app for Create React App or Next.js. Every account gets at least two apps to try, and you can choose either MUI or Chakra UI as your component library.

Design Systems sync for colors, fonts, and shadows comes from your MUI or Chakra UI Figma kit. Make changes and sync the kit to change the styling of all your components in your app. We have accessibility support with Aria labels and HTML tags, and you can create fully responsive components when setting up design with auto layout. Also, Quest uses variants in Figma to create states when exported. Use those states for things like hover and click states or even make full web pages with variants for different screen sizes that come into Quest as breakpoints automatically.

We also have two different animation features - animate elements and animate states. Animating states is similar to Figma's smart animate feature and uses CSS animations to transition between the two or more states. You can also easily work with nested components, passing props to nest to children. And we have very fast load times, as you can probably tell by checking out the Quest homepage.

All new customers get a risk-free 14-day trial. Try it out or book a free onboarding call. We can't wait to see what you build.