Product Updates

All the product launches and updates to Quest.

Aug 24, 2023

Publish your App on Quest

Now you can choose to publish your App on Quest. By setting up page routes for components, we now let you create a website and publish it in the new Publish App tab. Create landing pages, full dynamic websites, or just publish modules you can use in other places. All hosted in Quest for free.

Plus, bug fixes and lots of refinements.

Jul 19, 2023

Quest UI Kit, Custom themes, new templates, and more

Support for Quest UI Kit - pre-installed Quest kit out of the box (based on MUI).

New Theme tab - Upload your own custom theme files, download or reset current theme file. Supports both dark and light modes.

New templates to easily get started - lots of them! To build whatever components you need.

As always, bug fixes and lots of other refinements.

Jun 16, 2023

Introducing our Free Plan

We now let users signup for a free plan. This plan will let you try out all the features of Quest but with a limit of 20 components. With this new plan we've also remove the 14 day trial so users can try Quest for as long as needed and scale up when ready.

This realease also includes various bug fixes and quality of life improvements.

Jun 1, 2023

Import screenshots with AI, generate business logic with ChatGPT, In-Browser Code Editor & Templates

This is our biggest release since we started building the product with the inclusion of AI and code editor right in the browser.

1. Import Wireframes and Prototypes: Quest now lets you import more than Figma designs as we've rolled out the ability to import wireframes as well. Import a screenshot of a hand drawn sketch or screenshot of a low-fidelity prototype such as in FigJam or Miro and Quest will convert it into a responsive ReactJS component. Our AI models detect text, components such as text fields and buttons, and image placeholders. This feature is currently in Beta. Learn More

2. AI Prompt powered by ChatGPT: We've added a text prompt so you can code your business logic and component functionality simply by asking the prompt in natural language. You can ask it to validate forms, write functions or connect with databases endpoints. This will create bindings for the appropriate layers as well as write code in the hook file which you can see in the new Code & Preview Mode. Learn More

3. Code & Preview Mode: This new mode replaces the older Preview mode which simply allowed you to preview your components, mainly for breakpoints and animations. This new mode does that as well but also allows you to see the code that was generated immediately. Additionally, you can code in the browser if you'd like to and then press the "Run" button to see how the results. You can change styling as well which helps if you've started from a Wireframe or Template. Learn More

4. Templates: You can now go to the "New Components" tab and choose to start using a component by cloning it from Quest without having to import from Figma. Currently these components are setup to be responsive and in some cases also use breakpoints.

Mar 29, 2023

Quest Design System Framework now with support for Chakra UI

Chakra UI Support: We now support Chakra UI as the design system for your App. Starting a new App in Quest will ask if you'd like to use MUI or Chakra and setup your App for your choice. Use the free Chakra Community UI Kit to use component instances in your custom designs to convert them into working, live Charka UI components in your ReactJS Apps.

New Sign-up: We've improved and streamlined our sign-up process. Customers can now add their credit card details with multi-country support in addition to the choice for us to send an invoice.

Additional App added for all Tiers: We now allow 2 Apps per Workspace for all tiers so you can test out your App with either MUI or Chakra.

Mar 17, 2023

Various bug fixes & improvements.

Mar 3, 2023

New Quest Design System Framework with support for MUI Kit 5.11 & New Alert Panel

Support for latest Design Systems: We now support MUI's Figma kit 5.11 along with 5.9 and 5.2 to include 30 components (up from 12 that were supported before). More to come with support for additional design systems. Stay tuned!

Alert Panel: The new alert panel will show any alerts that you may have had in the Figma plugin as well as any other potential issues like missing fonts.

In addition to alerts, this panel will now show at a quick glance all the bindings and features that have been created for the component as a whole so no more digging through all the layers to find them making collaboration much easier.

Streamlined Onboarding: We've updated and moved the onboarding checklist to the side panel to make it easier for new users to follow and refer to it.

Feb 10, 2023

Intelligent Variant Merging

We now allow any layer order or layer naming structure in your variants. We will smartly merge variants to streamline the export from Figma to Quest. Effectively, this eliminates all previous errors that would stop a user during export with instructions to correct the designs. Quest is now even more magical ;)

Jan 17, 2023

Breakpoints & Min/Max Width

1. Breakpoints: Bringing in variants with different widths will now allow you to set up Breakpoints that will switch based on your browser's width or screen size. This allow you to create different versions of your component for different screen sizes automatically. It is often useful for setting up webpages but can be used for nested children components as well. Learn more here
2. Min / Max Width: You can now set the minimum and maximum width of components and any of their children individually. Use the new Pin icons to set the values visually while using the responsive handles to get things in the exact position you want. Learn more here
3. Layer Order Swap: We swapped the layer order to match the direction of your Figma file.

Dec 19, 2022

Website Features & Dynamic Bindings

Check out all these useful new features:

1. Dynamic Binding: In addition to all the contextual , recommended bindings on elements in your project, you can now add any custom, dynamic binding. Use it in case you don't see the binding you want to use listed or to override CSS in the presentation file that Quest generates. Learn more here
2. Video: Copy and paste any Youtube or Vimeo URL and use placeholders in your designs to become working video players. Learn more here
3. Link: You can now add a clickable link feature to any elements in your component: sections, images, text, etc. Learn more here
4. Sticky Position: Use this feature to stick anything to top or bottom as you scroll. This is a great way to create a sticky navbar. Learn more here
5. Lazy Loading: Now, by default, all images will have the lazy loading set up so your webpages will load much faster. Learn more here
6. Better Accessibility with Semantic Tags: Now you can assign all available semantic tags to any element in your component or page. This will allow your components to work with screen readers and the ability to tab through with a keyboard.

7. Prettier Formatting: Quest now uses Prettier to format code to adhere to the Airbnb style guide.

Dec 6, 2022

Import multiple components from Figma to Quest all at once

Now you can use the checkbox in the plugin to choose to Export a Component with Nested Component Instances. By doing so, you'll add the component you choose and all children as components to Quest which you can find in the Components tab. No more individually importing everything.

We also finished another round of bug fixes and workflow improvements to make Quest even easier to use.

Nov 23, 2022

UI / Workflow improvements & bug fixes

1. Link in Editor to nested components and status to show if they’ve been imported to Quest yet

2. We now honor the height settings for top-level of component as set in Figma

3. Nested components now reflect the state that is set in Figma for any top-level states you’re currently viewing

4. Various bug fixes

Nov 17, 2022

Animations, CSS Grid and more

Check out these fun new features:

1. State Animations: Similar to Smart Animate in Figma, create 2 or more variants in your Figma components and animate between the states inside of Quest. Do things like create a stunning hover animation on a card. The easiest way to create super complex animations that animate multiple CSS values between different properties. This is best for moving between 2 states and for creating robust, complex animations. Learn more here
2. Element Animations: Animate any layer or layer group by choosing how to trigger the animation and the timing. Do things like slide hero text into place when the page loads. This is best for layering animations without using variants and simulating timeline based animations. Learn more here

3. Grid Feature: Similar to our list feature, you can now create a responsive grid of wrapping items. Set how you want it responsive, adjust the padding between items and see it working in Preview Mode before deploying with real data.

4. New User Dashboard: We've made onboarding easier for new users and help them to customize their experience in Quest.

Oct 20, 2022

Preview Mode & SVG support

Some super useful updates this release:

Preview Mode: You can now press the new Preview button in the Editor to see how your component will look in a live environment. Preview features such as list or tooltip rollovers directly in in your browser without having to build your React App. Use the Preview Values in all bindings to test out sample data in the Preview Mode as well to easily battle test your Figma designs. In Preview Mode you can additionally try all variants / state options in the main and any nested components.

SVG support: You can now choose the Export setting in Figma for SVG (previously only allowed for PNG & JPG). This will convert any vector elements in your files into SVG to save file size and get crisp, resolution-independent graphics.

Oct 03, 2022

Enhanced App Export, Accessibility Support and more

Lots of goodies in this release. Here're some highlights:

1. Enhanced full app and component export: The exported code now follows a more standardized file and folder structure for easy integration and launch. Components now get their own folders within apps, images and fonts are added to relevant folders, and more options to set path structure for your app. Learn more here: https://docs.quest.ai/react/fundamentals/exporting-code
2. App Shell for quick preview of components: When you export code for a single component, you can choose to include an app shell with it. So seeing your component in action is now as simple as exporting it from Quest, and running "npm i" and "npm start"!

3. Support for Accessibility: You can now add Accessibility to your apps built on Quest with our support for HTML Semantic Elements and WAI-ARIA labels. Learn more here: https://docs.quest.ai/react/features/accessibility-support
4. Discount for Educators and Early stage startups: Due to frequent requests from teachers and startup founders, we're excited to introduce a discounted plan for Educators and Early-stage Startup Founders. Learn more at: https://quest.ai/pricing. Here's why we're doing it.
5. Support for MUI Badge component: Quest now natively supports the MUI Badge component. So you can add it to your Figma file and set it up as a feature in Quest component Editor.
6. Various bug fixes and usability improvements: Fixed many of the little or big things that were annoying us about Quest.

Sep 12, 2022

Quest Editor Improvements and support for more MUI components

Once you import a component into Quest, you can now select layer / nodes from the left-side panel but also by hovering and clicking on elements and their parents in the center of the Quest Editor. In addition to making it easier to navigate and set up your components, you can also now use responsive handles to see how your component will look at different widths. This preview will demonstrate exactly how it will behave in your own App as the center content is working React code.

The responsive handles are also work with the new Component level width bindings. When clicking on the top-level "Component" layer, you can change the behavior of how you want your component to resize based on it being a child of another component or if it is the top-level in the browser.

Last, we've added better support for MUI components including Radio Buttons, Checkboxes and Switches. We now support all variants and layouts including non-autolayout. For Radio Button, we've created a new Radio Group feature which lets you control Radio Buttons as a whole.

Aug 23, 2022

Push your Components and Apps to GitHub

Quest now lets you push individual Components or your entire App to GitHub. Using your peronsal API Key from GitHub you can now merge your code seamlessly from Quest. This makes working with Quest end-to-end smoother and much faster.

We've also improved image conversions and implemented various bug fixes.

Aug 4, 2022

Support for Typescript, MUI design system 5.9 & more App Export controls

Quest now allows you to export as either Javascript or Typescript. Choose at the App or Component level. When exporting as Typescript, we provide an additional "types.ts" file with all props to be configured by the user.

Additionally, Quest now has additional options for what files you want to include while downloading your App with individual checkboxes for what you may need.

Also, we support the latest paid version of the MUI Figma file (5.9). It is seamless support so no additional work is required aside from syncing your desired design system, whatever version you prefer.

Jul 19, 2022

Added Workspaces with multiple Apps & Light/Dark mode support in the Editor

Quest now supports multiple Workspaces and multiple Apps per account. This makes it easy to build for multiple clients / internal projects and include only the necessary team members and stake holders. You can also set permissions to segment workspaces by users. Admins can assign and reassign users to only the Workspaces they need to see.

In addition, we've now included a Light/Dark mode toggle in the editor as well as a way to set your App settings to default to either Light or Dark mode. By using the light and dark styles from the MUI design system, you'll be able style any component in light mode that will get a corresponding dark mode counter style. This helps teams quickly visualize how things will look in both modes directly in the Quest editor before even having to run your React App.

Jun 14, 2022

Support for the new Auto layout & better plugin experience

Update to support the new Auto layout features announced at Config 2022:

1. Support for negative spacing between items. You can now overlap things in Auto layout.

2. Support for Canvas stacking order. Choose which direction you want to have overlapping elements overlap each other.

3. Support for absolute position in Auto layout. You can now choose to have items be placed anywhere in their frame, even on the edge or outside of their frame.

In addition to absolute position with Auto layout.... We now also allow NON-AUTOLAYOUT frames and groups to be exported into Quest. You are no longer required to put everything into Auto layout but we still recommend it to gain responsive behaviors. Non-auto layout frames and groups will automatically be converted into absolute position with a fixed height and width.

We've also fixed various plugin bugs and improved UX of the plugin overall to include more contextual hints and tips to help improve exporting in various cases.

May 24, 2022

Plugin improvements

Updated the plugin to better handle importing with contextual messages and suggestions as well as added onboarding to make the process easy to understand for new users.

May 11, 2022

Plugin error handling

Better error handling: When seeing an error in the plugin, you're now able to click it to navigate to the exact layer in Figma that the error is associated with.

Apr 28, 2022

Various bug fixes

Fixed various bugs reported from customers.

Apr 25, 2022

Quest Components is live

Our first release of Quest Components. This new Quest version allows users to export Figma components as React components. Also, using either the free or paid version of the MUI Kit for Figma, users are able to use MUI components in their custom design and modify their own design system.