Export Figma to a new Angular component

Intro

Figma node can be exported to a new Angular component even with no configuration at all. There are 3 simple steps to achieve that:

1. Open Figmular

2. Select a Figma node

3. Copy the result, download it, or deploy it to CodeSanbox

For the best results, we recommend using Figma's auto-layout where possible

There are three examples on this page:

Example #1 - Export a simple Frame

Example #2 - Export a component with variants or building your design system

Example #3 - Export a Frame with Components

Example #1 - Export a simple Frame

First, let's try to export a simple frame that has no other components inside. Our test frame looks like this:

Simple frame with no components inside

Now let's open Figmular and select the Notifications frame. It should generate the following code:

Html

// notifications.component.html
<div class="notifications__1-59">
  <div class="tags-panel__1-50">
    <span class="text-tags-__1-49">Tags:</span>
    <div class="simple-chip__1-43">
      <span class="text-tag-1__1-44">Tag 1</span>
    </div>
    <div class="simple-chip__1-45">
      <span class="text-tag-2__1-46">Tag 2</span>
    </div>
    <div class="simple-chip__1-47">
      <span class="text-tag-3__1-48">Tag 3</span>
    </div>
  </div>
  <div class="text-info__1-51">
    <span class="text-header__1-52">Header</span>
    <span class="text-desc__1-60"
      >Long description for this block. This text should be wrapped to fit info
      the width</span
    >
  </div>
</div>

TypeScript

CSS

The rendered result looks like this:

The result rendered in CodeSandbox

Example #2 - Export a component with variants or building your design system

In the next case, our designer has created a new component that should be used across all our projects, so it should become a part of our design system library.

Here is our component:

Component with variant

Our component has 6 variants and 3 properties:

• IsRemovable that can be 'true' or 'false'

• Shape that can be 'Round', 'Square', or 'Semi'

• Text that is bonded to the label value

Let's see how Figmular exports our Angular components for this frame:

Html

// simple-chip.component.html
<div
  class="root_base"
  [ngClass]="{
    root_Shape_is_Round: Shape === 'Round',
    root_Shape_is_Square: Shape === 'Square',
    root_Shape_is_Semi: Shape === 'Semi'
  }"
>
  <span class="chip_base">{{Text}}</span>
  <div *ngIf="isRemovable === 'true'" class="union_isRemovable_is_true">
    <svg
      width="16"
      height="16"
      viewBox="0 0 16 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
        fill="#D9D9D9"
      />
      <path
        d="M5.23344 11.6889L8.11454 8.58222L11 11.6975L11.7337 11.018L8.79649 7.84687L11.7334 4.67999L11.0002 4L8.11501 7.1111L5.23365 4.00023L4.5 4.67976L7.43306 7.84645L4.50021 11.0089L5.23344 11.6889Z"
        fill="#4D4D4D"
      />
    </svg>
  </div>
</div>/

TypeScript

CSS

In the result we can see that:

• Figmular used conditions to change the layout based on the input parameters

• The TypeScript file contains correct input fields and their possible values

• SVG icon has been exported in the process

Now you can just copy those files into your project, or into your design system library and start using the SimpleChipComponent.

Example #3 - Export a Frame with Components

In this example, we will use an updated frame from Example #1 - Export a simple Frame where the plain chips are replaced with instances of our new component Simple Chip with different properties:

Frame with components

As developers, we would like to export this frame to a new Angular component, so we need to have the Simple Chip component exported as well. Let's generate Angular code for this frame using Figmular and see what we get:

Html

// notifications-with-components.component.html
<div class="notifications-with-components_4-74">
  <div class="tags-panel_4-75">
    <span class="text-tags-_4-76">Tags:</span>
    <app-simple-chip
      [text]="'Tag 1'"
      [isRemovable]="false"
      [shape]="'Round'"
    ></app-simple-chip>
    <app-simple-chip
      [text]="'Tag 2'"
      [isRemovable]="false"
      [shape]="'Square'"
    ></app-simple-chip>
    <app-simple-chip
      [text]="'Tag 3'"
      [isRemovable]="true"
      [shape]="'Semi'"
    ></app-simple-chip>
  </div>
  <div class="text-info_4-83">
    <span class="text-header_4-84">Header</span>
    <span class="text-desc_4-85"
      >Long description for this block. This text should be wrapped to fit info
      the width</span
    >
  </div>
</div>

TypeScript

CSS

First, we see a new dropdown below the code export section. This dropdown shows all the components involved in the current export operation:

Figmular - Exported Components dropdown

That means that SimpleChipComponent is exported as a part of the package as well. And we can see its usage in the frame's component like this:

// Usage of SimpleChipComponent component in NotificationsWithComponentsComponent 
<app-simple-chip
      [Text]="'Tag 1'"
      [isRemovable]="'false'"
      [Shape]="'Round'"
    ></app-simple-chip>

Here is the final result rendered in CodeSandbox:

Rendered frame

Summary

In all these examples, we just exported Figma to Angular components with plain HTML, TypeScript, and CSS using Figmular. If you want to use components from an existing design system such as Angular Material or even components from your own design system in the export process, see the following pages:

• Export with Angular Material

• Export with My Design System