# Export with My Design System

## Intro

We have already covered the scenario when a team uses an existing UI framework as Angular Material here: [export-with-angular-material](https://docs.figmular.com/export-components/export-with-angular-material "mention"), but what if they don’t? What if they use their own Design System and component library? [Figmular ](https://www.figmular.com/)allows you to configure a Figma component as a ‘custom’ component so that the Figma component will be exported to Angular as an instance of your existing design library component. No duplication, no plain HTML export, just production-ready usage of your component library. Let’s see how to achieve that!

In general, the workflow can be described in the following steps:

1. Select a component (or an instance of a component) that you want to export as a custom component
2. Open **Figmular** plugin, go to the <mark style="color:blue;">**Mapping**</mark> tab
3. Select ‘***My Design System***’ in the **Design System** dropdown
4. Specify the Component Template
5. Add component Imports if needed
6. Click Save

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

Let's say we have a component in Figma called '**Custom Button**', and we use instances of this component in our Figma designs. But also we already have this component in our project or in the design system library, so we already can use it in our Angular code by inserting the following tag into HTML:

> \<my-fancy-button>Button\</my-fancy-button>

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

Let's start configuring a simple component that visualizes our custom button. It supports two colors, two shapes, and the property to change the text:

<figure><img src="https://115132725-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTXznemzQ2CLRPHEr6Hj%2Fuploads%2Ffu593LSaR2Rz5ekNgaNc%2Fimage.png?alt=media&#x26;token=3550d180-382a-47ab-b479-61f292b82729" alt="Figma UI, represents a Custom Button component that will be exported as a Custom Angular Component"><figcaption><p>Custom Button component that will be exported as a Custom Angular Component</p></figcaption></figure>

Now let’s open **Figmular**, select our button component, and switch to the <mark style="color:blue;">**Mapping**</mark> tab. For the **Design System** dropdown, we select ‘**My Design System**’ and jump to the template:

<figure><img src="https://115132725-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTXznemzQ2CLRPHEr6Hj%2Fuploads%2FyJ233NaRXnXHvjAKl2ut%2FCustom%20-%201.png?alt=media&#x26;token=0eab6e14-85f8-4ca0-b5a0-8e3c8a023132" alt="UI of the Figmular plugin, starting configuration of a Custom Component"><figcaption><p>Starting configuration of a Custom Component</p></figcaption></figure>

The basic option of the template can be just:&#x20;

> \<my-fancy-button>\</my-fancy-button>

### Imports

Then let's take a look at the **Imports** section. Let’s say ***my-fancy-button*** exists in a specific module of your component library and the name of the module is ***fancyButtons**,* so you would need to import this module into your code before you could start using the button. To cover that, let’s add a new import: ***fancyButtonsModule*** from ***@our-company/our-library/button***:

<figure><img src="https://115132725-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTXznemzQ2CLRPHEr6Hj%2Fuploads%2F1rJrmF962jd5IXCOxPnO%2FCustom%20-%202.png?alt=media&#x26;token=560eaa72-de49-4a8c-853a-f520b2990356" alt="UI of the Figmular plugin, basic configuration of a Custom Component including imports"><figcaption><p>Basic configuration of a Custom Component including imports</p></figcaption></figure>

For now, this configuration is enough to insert the specified template instead of generating a plain HTML for this component, but we can do more. Let’s add some customization!

### Customization

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

The key element of the customization is Fields. They can read some values from Figma nodes and pass them to the code-generating templates. For this example, we have created three Fields: **Text**, **Color**, and **Shape**.

To use Figma Fields in your template, just press **@** to open the list of the available fields:

<figure><img src="https://115132725-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTXznemzQ2CLRPHEr6Hj%2Fuploads%2F0BuXdFSXcVBYcDvFqLA7%2FCustom%20-%203.png?alt=media&#x26;token=be66435c-15b9-479c-9da0-020ad9585c2f" alt=""><figcaption><p>Inserting a Figma Field into the component template</p></figcaption></figure>

After you select a Field from this list, it becomes an inline tag that will be replaced by an actual value during export. The completed template will look like this:

<figure><img src="https://115132725-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyTXznemzQ2CLRPHEr6Hj%2Fuploads%2F0Bs8C7oN1tDBjrGqRXrV%2FCustom%20-%204.png?alt=media&#x26;token=bf9a9287-d081-4b47-b794-fec9b868f3b5" alt="UI of the Figmular plugin, it shows the complete configuration of a Custom Component with Figma Fields"><figcaption><p>The complete configuration of a Custom Component with Figma Fields</p></figcaption></figure>

### Result

The exported Angular code for a frame with a few usages of that component will look like this:

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

```html
// custom-button-frame.component.html
<div class="custom-button-frame_18-297">
  <my-fancy-button
    [color]="'primary'"
    [text]="'Button'"
    [shape]="'square'"
  ></my-fancy-button>
  <my-fancy-button
    [color]="'accent'"
    [text]="'Button'"
    [shape]="'square'"
  ></my-fancy-button>
  <my-fancy-button
    [color]="'primary'"
    [text]="'Button'"
    [shape]="'round'"
  ></my-fancy-button>
  <my-fancy-button
    [color]="'accent'"
    [text]="'Button'"
    [shape]="'round'"
  ></my-fancy-button>
</div>
```

{% endtab %}

{% tab title="TypeScript" %}

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

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

{% endtab %}

{% tab title="CSS" %}

```scss
// custom-button-frame.component.scss
.custom-button-frame_18-297 {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
}
```

{% endtab %}
{% endtabs %}