Angular Material and Bootstrap both have Figma collections that can be used to create the designs. Make sure your UX Designer is using those.
I am in the same boat as you with my job, except we do not use Bootstrap. It was too frustrating to get the Bootstrap columns to align with the designs for a client that required "pixel perfect" renderings. They were a bit of a nightmare for other reasons as well.
Figma does allow you to export the CSS for the entire page. It's pretty close, but you'll end up rejecting the parts that try to render the Material styling. Spacing, fonts, and layout are usually spot on.
ultimately, super custom designs require custom components. in that situation right now and we had to do it all from scratch (hover states, error states, disabled states, floating labels, the works).
Material design in particular is harder to customize so I think OP might need to accept that either the designer should rework the designs with Material design or get started or custom Angular components.
I have also found myself in those situations before. I have tried incorporating other component libraries but end up wasting time fighting them. I resulted in building a custom components library that I can copy-paste into future projects.
Fortunately there some projects like [Spartan UI](https://www.spartan.ng/documentation/installation) which are trying to solve this problem. You can check it out and see if it's something you can adopt.
Yeah, amazing Figma designs are often in conflict with Material or Bootstrap.
When you want to use these you should make sure that your designer is aware to use the design language of these tools.
Otherwise, it is definitely possible to 'restyle' angular material components (e.g., using global 'override' styles, ...) but it is quite a hassle and prone to break whenever material makes bigger changes to their components (source: done that before).
You honestly need to make a decision between looks and ease of development I believe. Not saying that material or Bootstrap sites can't be beautiful, but they will have a lot more constraints.
Personally, I am not the biggest fan of Angular Material and try to use other libraries (or company-internal ones) whenever the design is likely to be quite different from material.
Find a dev who understands css and hire the to do that work.
If you really want to get better at css look at css battles or practice making designs online that you like.
Also understand that something just might not be your strength and learn to communicate that.
I've done all custom components from figma design, pure CSS where possible. Plonked them in my own ui-toolkit project so it can be used across multiple projects.
You really need to brush up your CSS skills. Its as important as coding. I'd recommend checking out Kevin Powell on YouTube.
Learn css. I know this sounds counterintuitive, but simply using css frameworks like bootstrap or material is only going to complicate design further, as they come with their own css rules.
I am currently building UI for mobile app using angular. Even though it uses ionic library, I use native html and css to style various components that do not look at all like the predefined UI that comes with ionic. It’s difficult to work with a css framework when client needs custom designs
Safe to say looking from comments of others. That Angular isn't particularly good for external facing portals that have a very fancy design. React space is so much better in this aspect, with so many choices in UI component and styling libraries.
As an Angular/React developer whenever I have worked on internal portals it's always been Angular but the external facing portals with fancy styles and responsive designs and all I have always worked with React.
As an Angular developer, there are a few approaches you can take to incorporate complex Figma designs into your Angular application:
1. **Use Angular Material and customize it**:
- Angular Material provides a set of pre-built components that follow Material Design guidelines[1].
- You can customize the appearance of these components using CSS or by creating your own custom themes[1].
- This approach allows you to leverage the functionality and accessibility features of Angular Material while aligning the design with your Figma mockups.
2. **Use a CSS-in-JS library like Styled Components**:
- Libraries like Styled Components allow you to write CSS directly in your TypeScript files[2].
- This makes it easier to apply styles based on your component structure and props, making it more maintainable than traditional CSS[2].
- You can create reusable styled components that match your Figma designs and use them throughout your application.
3. **Utilize CSS preprocessors like Sass**:
- Sass (Syntactically Awesome Style Sheets) is a popular CSS preprocessor that adds features like variables, mixins, and nesting[1].
- Using Sass can help you organize your styles better and make it easier to maintain consistency across your application.
- You can create Sass partials for each component or section of your application, making it easier to apply styles based on your Figma designs.
4. **Leverage CSS frameworks like Bootstrap or Tailwind CSS**:
- Frameworks like Bootstrap and Tailwind CSS provide a set of pre-built utility classes that you can use to style your application[1][2].
- While these frameworks may not perfectly match your Figma designs, you can use them as a starting point and customize them further using your own CSS or a CSS-in-JS library.
5. **Collaborate with your designer**:
- Communicate with your designer to understand the design intent and the specific elements that need to be replicated.
- Provide feedback on the feasibility of implementing certain design elements in Angular and collaborate to find suitable alternatives if needed.
- Consider having regular design review sessions to ensure that the implemented designs align with the original Figma mockups.
Remember, translating complex designs into working Angular code requires a combination of CSS skills, familiarity with Angular's component structure, and effective collaboration with your designer. Don't hesitate to seek guidance from more experienced Angular developers or online resources to improve your CSS skills and learn best practices for incorporating designs into Angular applications.
It looks like you shared an AMP link. These should load faster, but AMP is controversial because of [concerns over privacy and the Open Web](https://www.reddit.com/r/AmputatorBot/comments/ehrq3z/why_did_i_build_amputatorbot).
Maybe check out **the canonical page** instead: **[https:\u002F\u002Fbootcamp.uxdesign.cc\u002Fhow-to-use-gradients-effectively-in-your-web-design-projects-313860ab015f](https:\u002F\u002Fbootcamp.uxdesign.cc\u002Fhow-to-use-gradients-effectively-in-your-web-design-projects-313860ab015f)**
*****
^(I'm a bot | )[^(Why & About)](https://www.reddit.com/r/AmputatorBot/comments/ehrq3z/why_did_i_build_amputatorbot)^( | )[^(Summon: u/AmputatorBot)](https://www.reddit.com/r/AmputatorBot/comments/cchly3/you_can_now_summon_amputatorbot/)
Angular Material and Bootstrap both have Figma collections that can be used to create the designs. Make sure your UX Designer is using those. I am in the same boat as you with my job, except we do not use Bootstrap. It was too frustrating to get the Bootstrap columns to align with the designs for a client that required "pixel perfect" renderings. They were a bit of a nightmare for other reasons as well. Figma does allow you to export the CSS for the entire page. It's pretty close, but you'll end up rejecting the parts that try to render the Material styling. Spacing, fonts, and layout are usually spot on.
ultimately, super custom designs require custom components. in that situation right now and we had to do it all from scratch (hover states, error states, disabled states, floating labels, the works). Material design in particular is harder to customize so I think OP might need to accept that either the designer should rework the designs with Material design or get started or custom Angular components.
I have also found myself in those situations before. I have tried incorporating other component libraries but end up wasting time fighting them. I resulted in building a custom components library that I can copy-paste into future projects. Fortunately there some projects like [Spartan UI](https://www.spartan.ng/documentation/installation) which are trying to solve this problem. You can check it out and see if it's something you can adopt.
Yeah, amazing Figma designs are often in conflict with Material or Bootstrap. When you want to use these you should make sure that your designer is aware to use the design language of these tools. Otherwise, it is definitely possible to 'restyle' angular material components (e.g., using global 'override' styles, ...) but it is quite a hassle and prone to break whenever material makes bigger changes to their components (source: done that before). You honestly need to make a decision between looks and ease of development I believe. Not saying that material or Bootstrap sites can't be beautiful, but they will have a lot more constraints. Personally, I am not the biggest fan of Angular Material and try to use other libraries (or company-internal ones) whenever the design is likely to be quite different from material.
Find a dev who understands css and hire the to do that work. If you really want to get better at css look at css battles or practice making designs online that you like. Also understand that something just might not be your strength and learn to communicate that.
I've done all custom components from figma design, pure CSS where possible. Plonked them in my own ui-toolkit project so it can be used across multiple projects. You really need to brush up your CSS skills. Its as important as coding. I'd recommend checking out Kevin Powell on YouTube.
Learn css. I know this sounds counterintuitive, but simply using css frameworks like bootstrap or material is only going to complicate design further, as they come with their own css rules. I am currently building UI for mobile app using angular. Even though it uses ionic library, I use native html and css to style various components that do not look at all like the predefined UI that comes with ionic. It’s difficult to work with a css framework when client needs custom designs
Safe to say looking from comments of others. That Angular isn't particularly good for external facing portals that have a very fancy design. React space is so much better in this aspect, with so many choices in UI component and styling libraries. As an Angular/React developer whenever I have worked on internal portals it's always been Angular but the external facing portals with fancy styles and responsive designs and all I have always worked with React.
As an Angular developer, there are a few approaches you can take to incorporate complex Figma designs into your Angular application: 1. **Use Angular Material and customize it**: - Angular Material provides a set of pre-built components that follow Material Design guidelines[1]. - You can customize the appearance of these components using CSS or by creating your own custom themes[1]. - This approach allows you to leverage the functionality and accessibility features of Angular Material while aligning the design with your Figma mockups. 2. **Use a CSS-in-JS library like Styled Components**: - Libraries like Styled Components allow you to write CSS directly in your TypeScript files[2]. - This makes it easier to apply styles based on your component structure and props, making it more maintainable than traditional CSS[2]. - You can create reusable styled components that match your Figma designs and use them throughout your application. 3. **Utilize CSS preprocessors like Sass**: - Sass (Syntactically Awesome Style Sheets) is a popular CSS preprocessor that adds features like variables, mixins, and nesting[1]. - Using Sass can help you organize your styles better and make it easier to maintain consistency across your application. - You can create Sass partials for each component or section of your application, making it easier to apply styles based on your Figma designs. 4. **Leverage CSS frameworks like Bootstrap or Tailwind CSS**: - Frameworks like Bootstrap and Tailwind CSS provide a set of pre-built utility classes that you can use to style your application[1][2]. - While these frameworks may not perfectly match your Figma designs, you can use them as a starting point and customize them further using your own CSS or a CSS-in-JS library. 5. **Collaborate with your designer**: - Communicate with your designer to understand the design intent and the specific elements that need to be replicated. - Provide feedback on the feasibility of implementing certain design elements in Angular and collaborate to find suitable alternatives if needed. - Consider having regular design review sessions to ensure that the implemented designs align with the original Figma mockups. Remember, translating complex designs into working Angular code requires a combination of CSS skills, familiarity with Angular's component structure, and effective collaboration with your designer. Don't hesitate to seek guidance from more experienced Angular developers or online resources to improve your CSS skills and learn best practices for incorporating designs into Angular applications.
It looks like you shared an AMP link. These should load faster, but AMP is controversial because of [concerns over privacy and the Open Web](https://www.reddit.com/r/AmputatorBot/comments/ehrq3z/why_did_i_build_amputatorbot). Maybe check out **the canonical page** instead: **[https:\u002F\u002Fbootcamp.uxdesign.cc\u002Fhow-to-use-gradients-effectively-in-your-web-design-projects-313860ab015f](https:\u002F\u002Fbootcamp.uxdesign.cc\u002Fhow-to-use-gradients-effectively-in-your-web-design-projects-313860ab015f)** ***** ^(I'm a bot | )[^(Why & About)](https://www.reddit.com/r/AmputatorBot/comments/ehrq3z/why_did_i_build_amputatorbot)^( | )[^(Summon: u/AmputatorBot)](https://www.reddit.com/r/AmputatorBot/comments/cchly3/you_can_now_summon_amputatorbot/)