Design Tips and Tricks
Last updated
Last updated
If you’re using Auto layout to set up your designs, for the most part it is easy to make sure what you design will look exactly like it does in Quest. Using alignment, padding & space between items is important to ensure that your design matches modern CSS techniques and will translate to such accurately.
Because Quest displays React code from the Figma file, not every single thing in the Figma design will translate 100% perfectly as Figma hasn’t been fine tuned for it. Below are some additional tips and tricks to be aware of while designing to help you navigate some known issues and quirks to make sure your design exports stay perfect.
If your top level frames in Figma say Fill contents or Hug contents, they may still look correct in Figma exactly pixel perfect to how you’d want them to look. When you bring them into Quest, it is likely that the width will be off, as it may be trying to fill the screen in places or collapsing in others because those are relative constraints and now in Quest the React frame is measuring it differently.
If you’d like to make this fixed width be responsive, here are a few options:
You can either bind the width to “100vw” to span the width of the page OR you can bind it to “100%” to span the width of the parent component OR you can have the width passed as props to the component and bind the width to be props.width.
By using the Export Settings in Figma, you can control which elements in your design get what type of image export as well as setting the resolution. This can be a group, frame or Auto layout frame as all will simply be treated as a single image once exported to Quest. You can choose whatever resolution you want to use as well in order to optimize the page load. You can also choose either JPG or PNG depending on if you need an alpha channel or if you want to optimize for image size.
Additionally, if the layer or children or a group or frame are all vector elements, you can choose SVG in the Export settings. Quest will not automatically convert vector elements into SVGs so you will need to manually assign those that you wish them to be.
To confirm that your layer came through as a SVG, you will see the path icon in the layers to designate it as such.
Quest does not support PDF export settings.
By default, Quest will export all images in your design at 2X resolution, even if you don’t have the Export Settings turned on.
Export settings MUST be applied everywhere you need them. For instance, if you set up export settings on a custom component that is the main component and you use an instance of that component elsewhere, it will lose the export settings you have set on it. This will potentially cause an issue when you import to Quest.
For example, in this screenshot, you can see the custom switch has an Export Setting of 2x PNG applied because it has overlapping elements that are not easy to set up with Auto layout. When you copy and paste that “SignupSwitch” component to nest it into the “SignupPayment” component and export the “SignupPayment” component it will look incorrect if you don’t go back into that same switch graphic and assign the Export Setting of 2x PNG. Again, using instances of main components will not carry over the Export Settings you may have applied so if it looks incorrect in Quest, that would be the first thing you might want to look into.
Rotation is not supported in Quest. If you rotate an image in Figma for example, it will come in as non-rotated in Quest. Your best bet is to rotate it in Figma, then export it as rotated and then replace it in the design. If you are rotating a shape, you can simply flatten the shape so that the rotation property reads 0.
If you’re having issues with missing white space such as space that is collapsed, it is likely due to having your textbox set to Auto width or Auto height. Make sure that you use a Fixed Width type box if you want things to not collapse on white space.
Also, if you’re seeing text wrap in a way you don’t intend it to, the first thing to check to fix is to toggle different text Resizing options and to resync the component to see how it looks in Quest.
The term "multi-style" can apply to text that has various color styles, fonts, font weights or even various character spacings. Quest will accurately extract text boxes that have multiple styles applied. The term "multi-style" can apply to text that has various color styles, fonts, font weights or even various character spacings. However, if you're using manual line breaks with a hard return, this will not work unless all variants have the exact same line breaks. Otherwise, text may com in wrong and will generally match the main variant's version of the text.
Also, if you plan to have a URL or anchor link, it is sometimes best to combine 2 text fileds into one line manually with Auto layout.
Figma can sometimes display the incorrect Resizing for both vertical and horizontal options. If something is exported to Quest that looks very different from how it looks in Figma, try changing the resizing options around to see if your export is solved. Sometimes Figma will show Fill container when it is actually Fixed width and vice versa. It appears very rarely and randomly as we’ve yet to accurately reproduce the issue so something to keep in mind if things look off.
Sometimes, unnecessary padding for centered items can cause things to shift in Quest. Quest can’t always exactly translate Figma designs to React because some things like CSS Grid and padding can affect how layouts behave in the real world.
For instance in this screenshot, each of these frames contain a logo image that is centered vertically and horizontally. You can see that each is set to a Fixed width and Fixed height. If you were to set this to Hug contents it would shrink the frame to the size of the logo which would look wrong in Figma. But if you changed it to Fill container, it would not change in Figma at all, but it would look off if you brought it into Quest. This is because Figma is not really treating that decision to be based on all the parent and child hierarchy but if you bring it into Quest, React will do so and the frame will change size based on how it believes it should actually fill the container.
Also, if you were to set the padding on these logos to 200 px on both right and left sides, Figma would cancel that out and it would end up looking centered but in Quest, in React that 200 px will get applied and the box will end up looking much larger than it should.
A good rule is to make sure that when you’re centering content in an Auto layout frame, that you keep the padding to 0 on all sides. This will keep the frame from being distorted or circular containers to become ovals.
Changing Hug contents to Fill contents and vice versa can affect not just that Auto layout frame but also the parent above it depending on what Auto layout settings it has. Keep an eye on the snackbar alert that Figma will show at the bottom of the screen to tell you what may have changed as it can be easy to miss. This can affect things in different ways like removing responsiveness. It really depends on what you’re changing and how but just keep it in mind if you thought you set everything up and suddenly it isn’t looking right, it is likely due to some Auto layout change you touched that affected the parent or child inadvertently.
When you have multiple children of an Auto layout frame that you want to fill the space (not just be packed to the left, center, or right) it is best to choose the Space between option. This will evenly space all elements in the frame and this can be applied either horizontally or vertically.
A good example of using this would be if you had a navbar with multiple elements at the top that you’d like to fill the bar responsively.
There are 3 ways to do overlapping elements.
First, you can easily just group a bunch of elements together and then apply the export settings to create a PNG out of it. This can be a group, frame or Auto layout frame as all will simply be treated as a single image once exported to Quest. This is not ideal for text but good for complex vector shapes and images.
Second, you can use background image elements to create content that has other elements overlapping it. For instance, you can add an image fill to an aAuto layout frame and then have children like floating thumbnails, text, etc. inside that frame that will overlap the background image below it.
Lastly, you can simply use Auto layout and apply Absolute positioning to the element you want to use to overlap something or simply just don't use Auto layour and use a frame or group with absolute positioning. However, if you want things to be responsive, Auto layout will be needed.
To create a background image, you simply need to choose the “Image” option for a shape, frame or Auto layout frame’s Fill or simply drag an image from your desktop onto the fill swatch to replace it. This will export the entire image and not simply what you see so if you are using responsive resize for width or vertical flex, the background image may reveal more than what was first seen. You can adjust how it displays the background image by choosing either Fill or Fit inside of Figma.
If you choose either Crop or Tile, both of which Quest does not support, the background image will flatten along with everything inside of the frame so you may end up with some rasterized text and or content you didn’t intend to be baked into an image.
Quest only supports “Fill” and “Fit” image settings and will flatten “Crop” or “Tile”. This is especially important if you’re using a background image with Crop for instance, Quest will flatten the entire Auto layout frame with the background image so any text or other elements inside that frame will be rasterized and baked into it as a whole when you export the design.
If using images in variants, Quest will not extract a new image for each variant there is and instead only extract the first main variant's images. If you'd actually prefer to extract different images for different variants, perhaps you're swapping the image in a different variant, then you can prepend a tag on that image layer with by typing "img:" then the layer name. The layer name will need to be exactly the same across all variants but by doing this you'll be able to change the image fill in Figma and Quest will extract it as unique. See the screenshot as an example of how to exactly type it out.
Quest does not support Radial, Angular, or Diamond gradient types and will flatten them down to an image and in most cases will not appear correctly. The best thing to do if you desire a gradient other than Linear is to export it as a JPG or PNG and then use it as an image fill.
Also, when using the Linear gradient type, as of now, both end points of the gradient must be inside the shape or frame you are applying it to or the gradient will not export correctly. You can however, change the direction of the gradient and adjust colors and alpha channels as you see fit.
Quest does not support any prototyping features in Figma such as animations. Animations will be included in a future release but will be set up and triggered inside of Quest. We also do not have plans to support Interactions and Overflow scrolling from Figma but will include similar options inside Quest in a future release. You can set up onClick and hover bindings inside Quest right now though.
We will continue to update these as we change and update our code or if additional issues are brought to our attention.
