If you use components in your application and want to take that into account, 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:
Select a component (or an instance of a component) that you want to be marked as an Angular Material component
Open the Figmular plugin, go to the Mapping tab
Select ‘Material’ in the Design System dropdown
Select a component you want in the Component dropdown
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.
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.
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:
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:
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:
Label field that reads the value of the Label property of the Figma component
Color field that gets its value from the color property of the Figma component
Type field that represents the value of the type property of the Figma component
We use them in the Fields mapping section:
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:
Figmular produces the following Angular component for this frame:
