Building a Responsive Web Page with Quest AI and Figma
By: Soliudeen Ogunsola
Tags: Responsive Design, Figma, No Code, Design, Tutorial

Quest AI enables you to convert your original designs into pixel-perfect, interactive web experiences easily. The technology that powers Quest is uniquely developed for digital designers. Using the strengths of AI, digital design is made repeatedly easier — growing continuously alongside designers and their creative needs.

So, what can you build with Quest AI? Practically anything you want. The type of experience you will learn to build here are responsive web pages which is a web page that scales elegantly across various screen sizes. You can build your business websites, landing pages, or anything else you need.

Overview

In this tutorial, you will learn;

How to set up your Figma project

Connecting your Figma account to Quest

Creating a new project in Quest

Publishing your project in Quest

Setting up your Figma project

In this section, you will design a separate frame with a different layout for each of the screen breakpoints you want to design for in Figma. That is, if you are designing a landing page, you will need to create another frame with a different layout for other screens like tablets and mobile. This enables Quest to detect the device and browser size of each breakpoint layout you have designed, you can design as many frames you like but it is recommended to use the standard dimension of each frame in Figma.

You can check out this Figma file as a guide 🎨

Connecting your Figma account to Quest

When building a project with Quest and Figma, you need to get the Personal Access Token associated with your Figma account in order to access your own data via the Figma API.

The following steps show how to connect your Figma account to Quest

Step 1: Go to the Account settings page in Figma.

Step 2: In the personal access token section, click on “Create a new personal access token”.

Step 3: Copy the token generated and proceed to the next section below.

Creating a new project in Quest

Once you have set up your project in Figma and also copy the personal access token, the next step is to create a new project in Quest.

Step 1: Create an account on Quest if you haven’t created any before and log in.

Step 2: Click on the “+ New project” in the top left, choose the first option which is “Responsive Web Pages” and press the select button to proceed.

Step 3: Import your design by choosing Figma from the option of the design tool, you will see two input field, paste your personal access token to the second input field and go to your Figma project to copy the file URL and paste to the first input field.

Step 4: Quest will display the frames available in your Figma project with different width, select all the frames by clicking on each checkbox to continue. This should take about 30 seconds to import into the Quest editor.

Publishing your project in Quest

After you have imported the project into Quest, you will only see one frame at a time. Take a look at the project and make sure everything looks right.

Use the top drop-down to view the different responsive layouts that were set up as a frame in your project file, the UI elements will display on the left side panel but will only show the elements that are included in each of the frames you are currently viewing.

If all you want to do is set up a static page, you’re done and you can click the Build button at the top of the project to view it in a new tab.

While viewing the page, drag your browser to view its responsiveness and Quest automatically determines the average width between the frames.

Conclusion

You have learned how to set up your Figma project, connecting your Figma account to Quest, creating a new project and publishing your project in Quest. Hit the publish button at the top right (rocket icon) to publish your project to a unique URL and a new tab where you can see your project live will open. That URL in that tab can be used anywhere you’d like.

From here, you can also proceed to an advanced level by adding video components, create animated buttons, set up links with the URL component or write custom code in the code view. For now, you will have to set these up on all different sizes/frames so if you animate something on the desktop, you need to clone that timeline and retarget the elements for mobile as well. Similarly, you will also have to set up links on the same buttons for all the frames as they won’t carry over just yet. Linking elements across frames are coming soon.

View the demo in your browser 🚀