# 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. {% hint style="info" %} Fields are unique for each Figma component {% endhint %} ###

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: . How to use the Instance Swap properties in Figmular: [Components inside components with use of Instance Swap property](/additional-configuration/components-inside-components-with-use-of-instance-swap-property.md) ## 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.figmular.com/additional-configuration/fields-use-data-from-figma-node.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.