Fields: Use data from Figma node

Intro

To export a Figma component to Angular more accurately, we need to be able to get some data from Figma nodes. It can be the properties of a Figma component or text. Figmular has a feature for that purpose that we call Fields.

Fields are variables that get their value from a Figma node and can be used in the Export process. For example, if you want to have your Figma component exported as an Angular Material button, you probably want to export the button label as well. To do that, you can create a Figma field that reads the ‘Text’ property of your Figma component, or another field that finds a text node with the name ‘Label' and reads its content.

Fields are unique for each Figma component

UI of Figmular, demonstrates the Fields tab
Fieds tab of Figmular plugin

Types of Fields

At this moment, there are three types of Fields:

  1. Text

  2. Property

  3. Static Value

  4. Instance Swap

Text field

The purpose of this type of field is to get the content of a text node that matches the selector. Technically we find all the text nodes whose names in lowercase include the selector in lowercase and get the first match if there are multiple matches.

Property field

This field tries to find a property of a Figma node with the name that matches the selector. We use ‘include’ or ‘contains’ methods here, so partial matches will work too: selector ‘text’ will match the property ‘Display Text’.

Static Value

Sometimes we do not need to read a value from Figma, but still want to pass a parameter to our export template. For that, we have the type called ‘static value'. You can put any string value there to utilize it in your template mappings later: true, false, mat-stroked-button, primary, or anything else.

Instance Swap

This type of property allows to use an entire instance of a component as a value. For example, if you have a card component that is designed to have content inside, you can bind the content placeholder to an Instance Swap property:

Component with an Instance Swap property

Then the placeholder can be swapped with any other component:

Placeholder is replaced with another component

Read more about Instance Swap properties here: https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties#h_01G2Q5FYN2ADEDQ3ZSB1KKY8Z0.

How to use the Instance Swap properties in Figmular: Components inside components with use of Instance Swap property

Creating a Figma Field

A new Figma Field can be created using the Fields tab in Figmular. There are three inputs needed:

  1. Name - this value will be used in the configuration section

  2. Type - one of the field types described above: Text, Property, Static Value, or Instance Swap

  3. Selector - a string that will be used to find a text node or a property using a partial match

If the type of a Figma Field is 'Static Value', the Selector input is hidden and the Value input is shown instead. Anything can be put into the Value input, just remember that it will be treated as a string.

UI of Figmular plugin, demonstrates a form to create a new Figma Field
Form to create a new Figma Field

Suggested fields

Figmular generates a few assumptions regarding the Fields that might be useful for the selected node. Those fields are listed under the Suggestions section:

UI of Figmular, demonstrates the list of Suggested Fields
Suggested Fields

Simply click any of those fields to add them to the Configured Fields section and use them in your config.

Last updated