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

Was this helpful?

  1. Fundamentals

Easily Sync Designs without Losing Work

PreviousDesigning Custom Components in FigmaNextSetting Up Props & Bindings

Last updated 2 years ago

Was this helpful?

When you first export a component from Figma to Quest using the plugin, you'll be taken to the Quest Editor where you can start to add features, props, state triggers and bindings.

One of the biggest benefits of using Quest is we do our best to compliment your workflow instead of a being a simple tool to convert designs to code (like our competitors). What this means for designers is you can continue to work and update designs and Sync back to Quest without asking developers to redo their work. Once you export your design to Quest, you can easily make edits to it and then Sync it back to Quest without fear of breaking anything.

Quest uses the internal GUID that Figma provides for each layer that is extracted. When you add a feature or binding to that layer in Quest, we always remember the link to that layer. This makes it easy to continue to iterate on your design without the fear or losing that set up in Quest.

You can update the following without fear of breaking features or bindings in Quest:

  • Layer names

  • Layer orders

  • Layer properties such as font, text, color, fills, roundness, etc.

For instance, if you already exported a component, and you want to add a new text field and button, you do that in Figma, use Quest plugin to "Sync Component" and then in Quest, you set up props/bindings for the new text and button, then export the Component or export the App. Once exported, replace the component file BUT don't replace the logic file you already have logic in, just add the additional parts you added to the original file. So if component were called "Card" you'd export it and replace the "Card.js" and merge the "useCard.js" file. No need to start from scratch with a new component, just always Sync the component you're updating back to Quest.

Sync Component any time after you first export it