LogoLogo
Quest HomeSign Up
  • 😀Welcome to Quest
  • Getting Started
    • Quest Overview
    • Helpful Resources
    • Quick Start - Build your first component from Figma
    • Quick Start - Build your first component from a Wireframe
    • AI Prompt
  • Fundamentals
    • Customizing & Using the UI Kit
    • Designing Custom Components in Figma
    • Easily Sync Designs without Losing Work
    • Setting Up Props & Bindings
    • Exporting Code
    • Push to your Repository
    • Creating Responsive Components
    • Nesting Components
    • Workspaces & Apps
    • Code & Preview Mode
    • Prototypes/Wireframes
    • Animations - build with React Spring
    • Quest plugin for Figma Dev Mode
    • Publish on Quest to a URL
  • Features
    • Working with Variants & States
    • Naming Conventions
    • Previewing with Custom Fonts
    • Light & Dark Mode
    • Creating a custom Tooltip
    • Creating a Floating Popover
    • Creating a Dialog pop-up
    • Radio Group
    • Using the MUI Data Grid & Table
    • Data & List Bindings
    • Dynamic Bindings
    • Grid
    • File Upload
    • Design System Tab and Theme Import
    • How-to use a Theme in your Application
    • Accessibility Support
    • Design Tips and Tricks
    • Video
    • Lazy Loading
    • Sticky Position
    • Link
    • Custom Breakpoints
    • Min / Max Width
    • Supported Quest UI Kit Components & How-to Make Edits in Figma
    • Supported Chakra Components & How-to Make Edits in Figma
  • Advanced Tutorials
    • Setting up Bindings and Features on the MUI Button
    • Display Repeating Components based on a Dynamic List
    • How-to Pass Values from Parent to Nested Components
    • How-to Invoke a modal Dialog Box from a Button Click
    • How to Setup a popover
  • 🔍Help
    • Product Updates
    • FAQs
    • Plugin Warnings / Alerts
  • 💡Support
    • Why does my design look different in Quest than Figma?
    • Can I keep making changes in Figma without affecting code?
    • What are some best practices?
    • Does Quest support more than Figma and React?
    • How do I manage users?
    • What is the refund process?
    • How do I get in touch with Quest?
    • Do I have to use MUI if I'm using Quest?
Powered by GitBook
On this page
  • How it works
  • Using the Pin buttons to easily set Min / Max
  • Min / Max with Breakpoints

Was this helpful?

  1. Features

Min / Max Width

PreviousCustom BreakpointsNextSupported Quest UI Kit Components & How-to Make Edits in Figma

Last updated 2 years ago

Was this helpful?

How it works

If you use "Fill" horizontal on your Auto Layout frames in Figma, when you export your component, in Quest you can additionally set the minimum and maximum width for that layer, group or frame.

To find this, simply click on a layer and you will see the Min / Max Width settings in the right-side panel. This can be done on any level in the component and sometimes easiest to set the entire component to have a minimum and maximum value on the top level overall. But if you'd prefer fine-tune controls, you can choose any child/layer in the component and set the values individually.

To set Min / Max Width, you can either press the Pin icons or type in the exact values you're looking for. Using the Pin icons will save you a lot of time and guess work. More on that below.

Using the Pin buttons to easily set Min / Max

When dragging the responsive handles, you optionally press the Pin icons to set the value for the Min and Max without having to know or guess what the exact pixel amount is. This is the easiest way to test and try your minimum and maximum width visually directly in the Editor. If you'd like to make sure your values are exactly the amount you're looking for you can always change the pixel value after pressing the Pin button. However, if you'd like to use the Pin button again, you'll want to press the X button on the rightside to remove what you've previously set.

Min / Max with Breakpoints

If the component you're setting up is using , it is important to note that each breakpoint has it's own Min / Max value for each layer. For instance, if you're setting the max width of the component overall and you're on a Desktop screensize, that value will not carry over to Mobile. You will need to go into each breakpoint and set up the Min / Max for all that you'd like to have it. If you're using the "Variants as States" option, this is not the case and settings Min / Max values on any variants/state will be applied to all in the component.

Breakpoints