Figmular - Export Figma to Angular
  • Introduction
  • Export components
    • Export with Angular Material
    • Export with My Design System
    • Export Figma to a new Angular component
  • Additional Configuration
    • Components inside components with use of Instance Swap property
    • Fields: Use data from Figma node
    • Share configuration with the team
Powered by GitBook
On this page
  • Intro
  • Types of Fields
  • Text field
  • Property field
  • Static Value
  • Instance Swap
  • Creating a Figma Field
  • Suggested fields
  1. Additional Configuration

Fields: Use data from Figma node

Last updated 1 year ago

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

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:

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

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.

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:

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: .

https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties#h_01G2Q5FYN2ADEDQ3ZSB1KKY8Z0
Fieds tab of Figmular plugin
Component with an Instance Swap property
Placeholder is replaced with another component
Form to create a new Figma Field
Suggested Fields
UI of Figmular, demonstrates the Fields tab
UI of Figmular plugin, demonstrates a form to create a new Figma Field
UI of Figmular, demonstrates the list of Suggested Fields