Importing Your First Design and Viewing it in Quest
Last updated
Last updated
To begin converting your design into Quest and making it a webpage, we’ll go over the following steps.
Installing the plugin
Selecting the frames/device views you want to combine into 1 webpage
Using the “Design Check” button in the plugin
Reviewing your work in Quest
Tips on potential issues and fixes
You will find the newest Quest plugin in the Figma community section.
Then, make sure you click on the “Plugins” section before you search at the top for “Quest” or you’ll be searching for Files instead of the plugin.
Press the install button to install it for your Figma account. It will now show up in the “Plugins” menu on the Figma Desktop version or from the left hamburger menu in the Plugins section.
Once you launch the Quest plugin for the first time, you’ll be asked to sign in or create an account. Setting up an account with Quest will take you to a browser but only take about 2 minutes. You can try Quest out for free with the free account and get access to basically all the features including 1 code download to test it out.
Quest lets you combine multiple frames into 1 webpage. You can then link pages together in Quest with URL links and manage the sitemap in the site section if you’d like. But when working in Quest, you’ll be working on 1 page at a time.
Your page can include as many as 5 frames (or designed device views) and as little as 1. For instance, you can have a frame for a mobile layout and a frame for a desktop layout. We encourage you to design at least a mobile and desktop version but for best results you may also want to include a tablet version as well. Having more frames to combine helps make the page look great on all devices. In the example image below, we have a desktop, tablet and mobile version using Figma’s recommended 1440px, 768px, and 320px respectively. You don’t need to follow those exact pixel dimensions if you have preferred settings.
To include all 3 frames into 1 page, Shift+Select the frames you want to use and you’ll see them included in the Plugin.
Before clicking the “Export” button, you should press the “Design Check” button, especially if this is the first time you’re exporting this design. This will give you a list of any potential issues that you should be aware of that might not carry over into Quest. In most cases, the check will show you the layer with the issue and how to fix it if you wish to. It’s a good idea to get into the habit of using the check when importing new designs but also if you make significant changes to existing page designs as well.
Once you’re ready to go and all things check out, hit the Export button to begin the import transfer from Figma to Quest. This process usually takes between 30 seconds and 1 minute depending on how big the file is and of course your internet connection as well.
All the layers that you have in your Figma file should be visible in the left-hand panel. You will notice that you only see 1 frame at a time. In order to review your designs for all frames / device view, click the icons at the top of the page to cycle through them. Quest will give an icon for all and any frames you included to import.
Text Wrapping
Sometimes text will wrap differently than you had it in the design. Sometimes browsers will render things a pixel or so differently depending on the font. To fix this, simply adjust the Max Width property in the properties panel if you need to adjust it in Quest.
Rotation Issues
We are unable to get the rotation of elements inside of Figma. In some cases, if you rotated something, it will not come in as rotated inside of Quest. You can either rotate it in Quest to fix it or you can go to that element in Figma and choose to flatten it to remove the rotation property and reset its values to its current position.
Design Overrides
If you want to make edits to your design, you can do so in the design doc and re-import the design. But if you made edits to certain things like property positions inside of Quest, when you re-import the design, that override will kick in and potentially some elements might look out of place. Skip ahead to the Overrides tutorial to learn more if this is happening to your design. An easy way to fix this is to right-click on the layer that is out of place with a “!” next to it and choose “Clear Override” from the drop-down menu.
Missing Custom Fonts
If you’re using custom fonts in your Figma file, they will not automatically transfer over in Quest. Currently Quest only supports Google Fonts which are the same as all the default fonts inside Figma. Custom font support is coming soon.
