Figmular - Export Figma to Angular
  • Introduction
  • Export components
    • Export with Angular Material
    • Export with My Design System
    • Export Figma to a new Angular component
  • Additional Configuration
    • Components inside components with use of Instance Swap property
    • Fields: Use data from Figma node
    • Share configuration with the team
Powered by GitBook
On this page
  • Intro
  • Example
  • Basic configuration
  • Imports
  • Customization
  • Result
  1. Export components

Export with My Design System

Last updated 1 year ago

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:

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

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;
}
Figmular
Custom Button component that will be exported as a Custom Angular Component
Starting configuration of a Custom Component
Basic configuration of a Custom Component including imports
Inserting a Figma Field into the component template
The complete configuration of a Custom Component with Figma Fields
Figma UI, represents a Custom Button component that will be exported as a Custom Angular Component
UI of the Figmular plugin, starting configuration of a Custom Component
UI of the Figmular plugin, basic configuration of a Custom Component including imports
UI of the Figmular plugin, it shows the complete configuration of a Custom Component with Figma Fields