Designing Custom Components in Figma
This doc will walk you through how to create a custom component in Figma and sync it into Quest, and generate pixel perfect React components
Last updated
This doc will walk you through how to create a custom component in Figma and sync it into Quest, and generate pixel perfect React components
Last updated
While the Quest UI Kit and seeded Quest components are a great way to jump start your project, there’s always going to be a need to create quite a few custom components as well. To demo how to do this, we’ll be setting up a custom card component.
Having already added the Quest Design Kit library to your Figma project, we’ll simply start by designing the card. In this example, we will be making a responsive card with a large image at the top and text and button coming from the Design Kit.
To take a look at how this was made, check out this example in this Figma file at the "Card" page:
As you can see there’s not a lot of layers you need but the key to setting up all custom components is to use Auto layout. The purpose of this is to make sure things are exactly pixel perfect, responsive and lined up in sequence with padding the way a programmer would code it. If you do not use Auto layout, you may not always see alignment issues when you export the component to Quest, but you will lose any responsive behavior as everything will be absolute positioned and fixed height and width.
First we’ll make the card itself by adding a frame to your project. Added a corner radius to it of 6. Then, press the Style button in the Effects and choose “Elevation/Outlined Light” from the Quest Design Kit library. Rename this Frame to “Card”. In this example, the card is roughly 400px wide and 500px tall. We’ll adjust this a bit more in Auto layout later.
Next, we’ll add the image. To do this, we’ll add a frame as a child of the “Card” component. Draw this out to be the full width of the card and all the way to top similar to this screenshot. Name this frame “Image”.
Then replace the Fill with an image of your choice.
Next, add another frame underneath the image and call it “Text & Button”. Make this frame is a little less than the full width and give the top of it some padding as well.
Inside of that frame, add some placeholder text and make it that text layer the full width of the frame it is inside of.
Next go back to the Quest Design Kit and go to the “Button” page. From there, copy and paste a button from there and into this frame like the example above.
When you’re done, you can press the “+” button on “Auto layout” to convert the “Text & Button” frame into an Auto layout frame. This may shift things in the frame slightly. You can adjust things in the Auto layout settings such as space between or padding around the layers inside of it.
Before continuing, do the same thing to the “Image” frame as well making it an Auto layout frame even though it doesn’t have anything inside of it.
Also, for the Image you’ll want to be sure at least the horizontal is set to “Fill container”. Otherwise later when you export this, it will look collapsed if it is set to the default of “Hug contents” because it doesn’t contain any contents inside of it. You could optionally choose “Fixed width” but if you want it to be responsive later, it’s best to try to make things work with “Fill container” instead.
For the last step, click on the top level “Card” frame and do the same thing, making it an Auto layout frame. This will change the layout to look off, but let’s fix it.
Click on the “Text & Button” frame and adjust the padding to be 40px on Left, Right & Bottom.
Click on the “Card” frame and change the Auto layout setting for “spacing between items” to 30. This will likely push the text and button up a bit and give the whole card our final padding.
The final step is to convert this card into a Component in Figma. When importing components into Quest to make the React components they must first be components in Figma as well. Install the Quest Figma Plugin if you haven't already done it.
Now, you’ll be able to use the Quest plugin to export this component. Find it in the Plugins menu in Figma once you’ve already installed it.
Once it is done exporting, press the button to “View in Quest” to view what you’ve done as a live working React component. From there you can start setting up binding and props or have your developer log into Quest and fill in the remainder.
You can press the Export button to download the component to share with your developer directly as well but likely you’ll want to set things up in Quest itself.
By having both designer and developer contribute to the components inside of Quest, it serves as the connection in the workflow. Any design changes that are made can easily be synced again without losing the Props and Bindings that were written in Quest so designers are free to experiment as often as they like with the look of both the components and the design system itself.
