Export with My Design System

Last updated 1 year ago

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, but what if they don’t? What if they use their own Design System and component library? 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:

Select a component (or an instance of a component) that you want to export as a custom component
Open Figmular plugin, go to the Mapping tab
Select ‘My Design System’ in the Design System dropdown
Specify the Component Template
Add component Imports if needed
Click Save

Example

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

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:

Now let’s open Figmular, select our button component, and switch to the Mapping tab. For the Design System dropdown, we select ‘My Design System’ and jump to the template:

The basic option of the template can be just:

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

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

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

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:

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:

Result

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

// 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>

// 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 {}

// 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;
}