Figmular: Export Figma to Angular components

About this plugin

Dramatically simplify and speed up your Angular front-end development by effortlessly converting Figma designs to Angular components with just a few clicks. Save countless hours and eliminate the tedious task of manually coding your UI elements.

Are you developing a new page? Building a design system? Using an existing framework like PrimeNG, Angular Material or NG-Zorro (Ant-Design)? Figmular gets you covered!

Now supports Dev Mode and VS Code!

With Figmular you can:

Generate Angular components with the usage of PrimeNG, Angular Material or NG-Zorro (Ant-Design)

1. If a project is built using PrimeNG, Material Design or NG-Zorro (Ant-Design), Figma components can be configured as components from those libraries. So instead of generating a new code, they will just reference existing components from PrimeNG, Angular Material or NG-Zorro libraries
2. Design System components have parameters like color, label, type, or others, so Figmular allows to customize their values by reading attributes from the Figma component using Figmular’s Figma Fields. For example, the Figma property ‘Display Text’ can be configured to be a button’s label, or the property ‘Type’ can set one of the button types (mat-button, mat-raised-button, mat-stroked-button, etc.)
3. … and actually, the Figma designs do not really need to visually match PrimeNG, Material Design or NG-Zorro for Figmular to work. Any hand-drawn sketch or a rectangle can be configured as an Angular Material component!

Export with components from any custom design system, including your own

1. Figma design can represent an existing component from a third-party design system or even an in-house design system. Such components can be configured in a ‘custom’ way, by providing the template code that represents the component
2. The custom components can also be customized by using Figma Fields in the template
3. The configuration is stored in a component itself, so it needs to be configured only once to cover all its instances

Convert components from Figma to Angular

1. Components from Figma can be exported to Angular components that include HTML, CSS, and TypeScript code
2. When one Figma component uses instances of other components, those other components will be properly exported and referenced with parameters
3. Even if a Figma component has multiple variants with different properties, it will be exported as a single Angular component with visibility (*ngIf) and class (ngClass) conditions

And of course, any Figma frame or node can be converted to plain HTML and CSS for Angular.

The resulting Angular code can be simply copy-pasted, downloaded in a zip archive, or uploaded to CodeSandbox.

Have questions? Check out our Docs or contact us [email protected]