Figmular

Figmular is a plugin that exports Figma to Angular components. It can utilize existing design systems like Angular Material, Ant Design (NG-Zorro), or your custom design system. Generate Angular components with the usage of Angular Material or NG-Zorro (Ant-Design): - If a project is built using 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 the Angular Material or NG-Zorro libraries - 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.) - … and actually, the Figma designs do not really need to visually match the 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: - 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 - The custom components can also be customized by using Figma Fields in the template - The configuration is stored in a component itself, so it needs to be configured only once to cover all its instances!