Community
Forma Developer Forum
Welcome to Autodesk Forma Developer Forum. Share your knowledge, ask questions, and explore popular Forma API topics.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

How can i use @Weave design in a non React project

2 REPLIES 2
SOLVED
Reply
Message 1 of 3
iklimis
192 Views, 2 Replies

How can i use @Weave design in a non React project

Hello Forma Team,

I am reaching out with a proposal that I believe will mutually benefit both our user experiences and aesthetic coherence.

Context: Our extension is built in a non-React environment (and build using the Angular Framework). However, I am particularly interested in utilizing your platform's React-based component library Weave. The main reason for this is to maintain a consistent user interface style across both my extension and your platform's native UI, which is crucial for user familiarity and seamless integration.

I recently attempted to install the @weave-design/theme-data npm package, aiming to utilize the theme variables provided within it for our project. While this approach allows for some customization, I found that it requires creating the theme from scratch using these variables. This process can be time-intensive and complex, particularly when trying to ensure design consistency with the Autodesk Platform.

A more efficient and cohesive approach would be to have the UI library structured in a class-based manner, similar to frameworks like Bootstrap or Tailwind. If the UI library offered predefined CSS classes that embody the platform's theme, I could directly apply these to my elements. This would not only streamline the development process but also ensure a seamless visual integration, maintaining the same style and motif as the Autodesk Platform.

 

*Another topic for discussion could re-usability:  Since the Autodesk Forma already uses this library is it necessary for our extension to re-load it? Is there a possibility for our extension to reference the styles directly from the library already in use by Autodesk Forma?

Looking forward to your thoughts

Thanks







 

2 REPLIES 2
Message 2 of 3

Hi!

 

Have you had a chance to take a look at Forma's design system? Here we provide colors, fonts and a set of web components that are the same we use in app. These components are framework agnostic, so they should work out of the box with Angular. Our shadow study example extension uses these and can be a good place to start. To import the components and necessary styling you can do it like it's done here

 

Hopefully that helps! And if you have any more questions don't hesitate to ask.


Martin Nordby Johansen
Software engineer at Autodesk Forma
Message 3 of 3

@martin.nordby.johansen 
Thanks for your reply

I was not familiar with the specific Forma design system, just the Weave library thanks for bringing this to my attention. 

It seems very promising and appears to align closely with our requirements. However, I have a question though: instead of importing stylesheets through style links and each web component via a script tag (meaning if I would like to use 10 components must I insert 10 script tags?), is it possible to use an npm library for installation? 

I imagine this would help for maintenance on our side but it would increase our bundle size 
Would like to hear your thoughts on this

Can't find what you're looking for? Ask the community or share your knowledge.

Post to forums  

Autodesk Design & Make Report