Fields: Use data from Figma node
Last updated
Last updated
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.
At this moment, there are three types of Fields:
Text
Property
Static Value
Instance Swap
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.
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’.
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.
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:
Then the placeholder can be swapped with any other component:
How to use the Instance Swap properties in Figmular: Components inside components with use of Instance Swap property
A new Figma Field can be created using the Fields tab in Figmular. There are three inputs needed:
Name - this value will be used in the configuration section
Type - one of the field types described above: Text, Property, Static Value, or Instance Swap
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.
Figmular generates a few assumptions regarding the Fields that might be useful for the selected node. Those fields are listed under the Suggestions section:
Simply click any of those fields to add them to the Configured Fields section and use them in your config.
Read more about Instance Swap properties here: .
