# Export with Angular Material

## Intro

If you use [![](https://material.angular.io/assets/img/favicons/favicon-16x16.png?v=8.2.3)Angular Material](https://material.angular.io/) components in your application and want to take that into account, [Figmular ](https://www.figmular.com/)provides this ability.

To do that, a component needs to be marked as an Angular Material component using the **Mapping** tab. In short, the process is the following:

1. Select a component (or an instance of a component) that you want to be marked as an Angular Material component
2. Open the **Figmular** plugin, go to the <mark style="color:blue;">**Mapping**</mark> tab
3. Select ‘***Material***’ in the **Design System** dropdown
4. Select a component you want in the **Component** dropdown
5. Click <mark style="color:blue;">**Save**</mark>

{% hint style="info" %}
Useful tip: even a simple rectangle or sketch can be marked as a Material component, so sometimes you can save time by creating simpler versions of components in Figma
{% endhint %}

## Video Tutorial <a href="#example" id="example"></a>

### Export of the mapped Angular Material components <a href="#basic-configuration" id="basic-configuration"></a>

The video below demonstrates the process of exporting a Figma frame to a working Angular project with Angular Material components. The components in this video were mapped before so in the video the mapping part was skipped.

{% embed url="<https://youtu.be/9ais0yuxy4k>" %}
Export to Angular Material components
{% endembed %}

### Tutorial: Mapping Angular Material components <a href="#basic-configuration" id="basic-configuration"></a>

In this tutorial, we show the mapping process right from the beginning. It took only 10 minutes for all the components, and it's required to do that only once. Once you map a component, the configuration will be reused for all the instances in different frames.

{% embed url="<https://youtu.be/uGqWQT3pe8w>" %}
Mapping component to Angular Material components
{% endembed %}

## Example <a href="#example" id="example"></a>

### Basic configuration <a href="#basic-configuration" id="basic-configuration"></a>

Let’s try to configure a component that represents the Button component from Angular Material. It’s master component in our Figma file looks like this:

<figure><img src="/files/9p2mf0nY7vNJ9RrP5Clc" alt="Figma UI with Button component that will be exported as Angular Material button"><figcaption><p>Button component that should be exported as Angular Material Button</p></figcaption></figure>

This component has 20 variants and three properties:

* color
* type
* Label

Now let’s open **Figmular**, select our button component, and switch to the <mark style="color:blue;">**Mapping**</mark> tab. There we need to select **Material** in the **Design System** dropdown and then **Button** in the **Component** dropdown. At this point, we should get the following result:

<figure><img src="/files/shAcu46rqOFryYnulfCy" alt="UI of Figmular plugin, it shows the basic configuration of Angular Material button"><figcaption><p>Basic configuration of a component that will be exported as Angular Material button</p></figcaption></figure>

In case we save the changes right now, **the export will work, but all the exported buttons will look the same**: a basic Material button with a ‘primary’ color and the ‘Button’ label. So let’s go further and add some variations. There are entities that we call '**Fields'** that will help with this.

### Customization

{% hint style="info" %}
Creating Fields in Figmular is covered in a separate article: [Fields: Use data from Figma node](/additional-configuration/fields-use-data-from-figma-node.md), so here we just use some existing fields.
{% endhint %}

For the simplicity of this example, let's say we already have three Figma Fields:

1. **Label** field that reads the value of the **Label property** of the Figma component
2. **Color** field that gets its value from the **color property** of the Figma component
3. **Type** field that represents the value of the **type property** of the Figma component

We use them in the Fields mapping section:

<figure><img src="/files/netkzR9TbImItO2EZWGn" alt="UI of Figmular plugin, it shows the configuration of Angular Material button with mapped fields"><figcaption><p>Configuration of Angular Material button with mapped fields</p></figcaption></figure>

Now that hit <mark style="color:blue;">**Save**</mark> to submit the changes.&#x20;

### Testing

To test the configuration, let's prepare a frame with different instances of the **Button** component:

<figure><img src="/files/BCpgXcWntD1ItsI7nfZL" alt="Figma UI, shows an example Frame node that has 20 instances of the Button component in different variants "><figcaption><p>Test frame that uses 20 different variants of the Button component</p></figcaption></figure>

Figmular produces the following Angular component for this frame:

{% tabs %}
{% tab title="Html" %}

```html
// material-button.component.html
<div class="material-button_10-223">
  <div class="basic-button-row_10-183">
    <button mat-button [disabled]="false">Button</button>
    <button mat-button color="primary" [disabled]="false">Button</button>
    <button mat-button color="accent" [disabled]="false">Button</button>
    <button mat-button color="warn" [disabled]="false">Button</button>
    <button mat-button [disabled]="false">Button</button>
  </div>
  <div class="raised-button-row_10-207">
    <button mat-raised-button [disabled]="false">Button</button>
    <button mat-raised-button color="primary" [disabled]="false">Button</button>
    <button mat-raised-button color="accent" [disabled]="false">Button</button>
    <button mat-raised-button color="warn" [disabled]="false">Button</button>
    <button mat-raised-button [disabled]="false">Button</button>
  </div>
  <div class="stroked-button-row_10-234">
    <button mat-stroked-button [disabled]="false">Button</button>
    <button mat-stroked-button color="primary" [disabled]="false">
      Button
    </button>
    <button mat-stroked-button color="accent" [disabled]="false">Button</button>
    <button mat-stroked-button color="warn" [disabled]="false">Button</button>
    <button mat-stroked-button [disabled]="false">Button</button>
  </div>
  <div class="flat-button-row_10-250">
    <button mat-flat-button [disabled]="false">Button</button>
    <button mat-flat-button color="primary" [disabled]="false">Button</button>
    <button mat-flat-button color="accent" [disabled]="false">Button</button>
    <button mat-flat-button color="warn" [disabled]="false">Button</button>
    <button mat-flat-button [disabled]="false">Button</button>
  </div>
</div>

```

{% endtab %}

{% tab title="TypeScript" %}

```typescript
// material-button.component.ts
import { Component, Input } from "@angular/core";

@Component({
  selector: "app-material-button",
  templateUrl: "./material-button.component.html",
  styleUrls: ["./material-button.component.scss"],
})
export class MaterialButtonComponent {}
```

{% endtab %}

{% tab title="CSS" %}

```scss
// material-button.component.scss
.material-button_10-223 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0px;
  box-sizing: border-box;
}
.basic-button-row_10-183 {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

.raised-button-row_10-207 {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

.stroked-button-row_10-234 {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}

.flat-button-row_10-250 {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}
```

{% endtab %}
{% endtabs %}

This is how it looks in CodeSandbox:

<figure><img src="/files/TXyNHQOUQYH6GMYW0O4U" alt="Screenshot of the Button component from Figma exported as Angular Material button, rendered in CodeSandbox"><figcaption><p>Button component exported as Angular Material button, rendered in CodeSandbox</p></figcaption></figure>


---

# 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/export-components/export-with-angular-material.md?ask=<question>
```

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.