Product Updates
- 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.