Export with Angular Material

Intro

If you use Angular Material components in your application and want to take that into account, Figmular 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 Mapping tab

3. Select ‘Material’ in the Design System dropdown

4. Select a component you want in the Component dropdown

5. Click Save

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

Video Tutorial

Export of the mapped Angular Material components

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.

Export to Angular Material components

Tutorial: Mapping Angular Material components

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.

Mapping component to Angular Material components

Example

Basic configuration

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:

Button component that should be exported as Angular Material Button

This component has 20 variants and three properties:

• color

• type

• Label

Now let’s open Figmular, select our button component, and switch to the Mapping 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:

Basic configuration of a component that will be exported as Angular Material button

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

Creating Fields in Figmular is covered in a separate article: Fields: Use data from Figma node, so here we just use some existing fields.

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:

Configuration of Angular Material button with mapped fields

Now that hit Save to submit the changes.

Testing

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

Test frame that uses 20 different variants of the Button component

Figmular produces the following Angular component for this frame:

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>

TypeScript

CSS

This is how it looks in CodeSandbox:

Button component exported as Angular Material button, rendered in CodeSandbox