
.png)
.png)

Step-1: Design your Figma mockup screens and custom theme using our Figma Angular Material UI Kit
Easily create Angular Material compliant mockup screens and custom theme and make it easier for your front-end developers to implement them in Angular/Angular Material code.
Step-2: Login to UI & Theme Builder and import your mockup screens and custom theme
Register, if you haven’t, and login to the UI & Theme Builder. Create a project and import the Figma mockup screens as Angular components and the Figma custom theme as an Angular Material theme.

.png)
.png)

Step-4: Preview on devices of various sizes
Preview mockups on various device screen sizes to verify their responsive behavior. Convert your Figma responsive mockup screens to responsive Angular components whether you are using a single variant per mockup with Figma constraints or multiple variants per mockup with a different variant for a set of device screen sizes.
Step-3: Optionally make changes to mockups and custom theme
Optionally make changes to the properties, styles, and events of the imported mockups using the UI Builder and colors and typography of the custom theme using the theme builder. Bind components to either static data sources such as pre-defined values or dynamic data sources such as ReST APIs.
.png)

.png)
.png)

Step-5: Export the Angular code
Export each mockup screen as an Angular component. Export the custom theme as Angular Material theme. Export any global styles and typescript services that you may have defined.

Benefits
.png)
Customization
Post-conversion, customize the properties, styles, and events of Angular components and create services and variables to bind components to static and dynamic data sources. Customize the imported theme.
.png)
Large Time Savings
Instead of manually re-implementing the mockup screen designs and custom theme from scratch in Angular, save time by using the UI & Theme builder to automatically import Figma mockup screens as Angular components and Figma theme as an Angular Material theme. Export code.
.png)
Convenience
Using the Figma UI Kit, design Angular Material specific mockup screens and custom themes, making it easier for your front-end developers to manually implement the mockup designs and custom themes in Angular using the Angular Material UI component library.


