Product Updates
All the product launches and updates to Quest.
Various bug fixes & improvements.
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.
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 ;)
- 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.
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.
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.
- 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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Fixed various bugs reported from customers.
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.