Figma’s Beta Component Property Authoring Feature

Surfacing Component Properties to the Art-board Level

You’re new to an existing client project that a fellow coworker has been working on for months. Here comes that all-too familiar thought: how was the Figma file built? You can feel your palms getting clammy. Thus begins your grueling journey to clicking around various art boards, components, chips, and sifting through the wall of meticulously-crafted colors, fonts, and various other patterns.

I’m probably not alone in feeling that there’s got to be a better way of navigating a new-to-you Figma file in order to provide value to both your team and the client.

Gone are the days, not really but follow me for kicks, of needing to have your finger on the command and click on buttons, cards, and various other components on layouts in order to make quick changes. We’re probably all guilty of this; even in our own files.

Figma released a feature that allows you to author component properties which allows you to expose nested instances. To put it plainly, you are now—if you have successfully set your components up—able to click on an art board and see more useful adjustable properties on the right panel of all components that exist inside of an art board.

I’ve recently created a template for Request for Proposals (RFPs) and will be using it here to help illustrate how to get started with authoring component properties; how to set up various properties of components; and then how to expose those properties at the highest level.

How to Get Started with Authoring Component Properties

• Go to your account settings
• Select the account tab
• Find Component Properties (Beta)
• Turn on Try new component property authoring features toggle

Layout Planning — Page Layouts and Components

This section is merely to illustrate how you could be thinking of elements in your layout as components and how they might be used as a system even from the planning/wire frame phase.

At this point, you should explore layouts by creating wire frames either in Figma or drawing—in this case, I drew out my wireframes.

The layouts represented below aren’t all of the possible options for a product such as an RFP template but for the sake of making this a more bite-sized article I’ll just be providing some examples that was explored.

From this layout exploration, you’ll notice that there are a lot of common aspects that are present such as treatment for light and dark as well as the anticipation for there being variants for components such as logos, symbols, header and body text, imagery and backgrounds. All of these take into account consideration for how versatile the template could be for contrast of foreground color and background color.

Cover page diagram

Now, let’s fast forward to having all finalized layouts completed. At this point, we’ve created light and dark variants for all necessary components but we also need to take into account variants for background images, text, etc. that can be driven at the art-board level. How might we do this, you ask?

Overview page diagram

How to Set Up Component Properties

In this component example, light and dark variants were created but the text layers haven’t been created as component properties yet. Component Properties are one of the keys to surfacing booleans, variants, instances, and text to the top level.

After having created the component for the eyebrow, we then need to target the text on the component so that we can nominate it as an editable property.

• Click on the text layer
• Click on the Content button that is circled below
• Create a Name for the property and a Value for the default text
• Press Create property to confirm

Once this is done, we are then able to quickly edit the text on the right panel by clicking on any component instance of the eyebrow. Now that you have created the Label component property, let’s test how it’s working so far.

How to Author Component Properties at the Highest Level

Depending on the need, you might have a container that holds multiple components and all of the contained components might all have properties that you’ll want to have authored. To do this, you’ll have to go to Properties and click the + button then you should see the Expose properties from Nested instances .

If you don’t see this option in the dropdown there aren’t any nested instances with component properties in the selected component or you’ve selected an instance vs the main component.

Now, at this point, we have nested components contained within a component that contains a series of other component instances as well—but still isn’t the final layout just yet. In order to allow these properties to move forward to the top, we will need to go back into the properties menu and select the nested properties that we would like to be exposed.

Component Properties from Art Board Level

Let’s review: we have created components that have properties and have been added to a parent component that contains other component instances that are all composed in a fashion to our liking. We now then need to add that top level component—let’s just call it the foreground component—and add it to a final layout that already contains our background image component.

At this point, these are the final steps you’ll need to take in order to expose your component properties:

• Add an instance of the foreground component to the final layout
• Click on the final layout component and expose the properties of the foreground component
• Create an instance of the final layout
• You are now able to see all of the exposed component properties

These steps may all seem complicated and a bit nuanced, but I think that if the end result is eliminating having to remember how a Figma file is structured prior to being able to add value, this feature will help enable that.