[DOCS] Document an example / demo using Anima with Theme Builder for end-to-end design

[PaulaPaul]

Problem/Concern

The goal of this issue is to research and document an example and simple demonstration of end-to-end design using Theme Builder and Anima

The outcome of this research should include:

• An initial evaluation of Anima and description of how Anima can support end to end design with Theme Builder
• A simple demonstration and step by step example using Anima with Theme Builder
• Notes for a potential blog post on the topic of end to end design using Theme Builder and Anima
• Thoughts on next steps and tasks that can be created to integrate Anima with Theme Builder for end to end design
• Issue(s) opened for any gaps in the end to end process that could be addressed by the Theme Builder team

Proposed Solution

Observations, suggestions and notes for blogs and potential next steps should be included as comments on this issue, for review by the Theme Builder core maintainers.

[ravjot07]

I am working on this

[ravjot07]

Proposed Solution for Enhancing Anima with Custom Design Tokens and Atomic Design Validation

1. Extend Anima's Plugin for Custom Design Tokens

Functionality Addition: Modify Anima’s existing design token functionality to support the import and use of custom design tokens defined in Theme Builder. This would involve:

• Developing an interface within Anima for users to import custom design tokens from Theme Builder.

2. Modify Design Token Validator to Support Atomic Design

Validator Redesign: Revamp the existing design token validator in Anima to not just validate tokens but to also ensure they conform to the principles of atomic design. This involves:

• Enhancing the validator to check not only the values of design tokens but also their implementation across different components (atoms, molecules, and organisms).
• Providing feedback or alerts if token usage deviates from atomic design methodologies, which could help maintain design system consistency

[ravjot07]

Other Solution Could be #533 figma plugin which allows user to develop design in accordance to design tokens and we can simply use anima thereafter

[aaronreed708]

Hi @ravjot07, so we don't want to burden you with our pre-conceived ideas of how this might work. You might come up with something that we haven't even considered!

But the goal is to improve designer + developer interactions. For example, today, a designer creates a design system in Figma (which may or may not be accessibility compliant), creates wireframes of designs that may include new components and hands this design over to a developer. The developer then has to implement the design which may or may not look/act exactly as the designer envisioned it. And without Theme Builder, may not even retain its accessibility compliance if the developer doesn't strictly follow the styling in the design.

So we are trying to envision how a developer or designer can define something in Theme Builder that is accessible, the designer imports it into Figma and designs a component with it and then the designer gives the component to the developer as a react component in a package that they know is wired to have the correct look/styling. This vision is where #533 and #541 play roles.

[lwnoble]

@ravjot07 https://github.com/ravjot07, I have made significant progress on this issue - we should set up time to discuss my progress and see what needs to be done next.

I can show you a demo and talk about the gaps needed to be tackled to make this all work.

On Wed, May 8, 2024 at 11:50 AM aaronreed708 @.***> wrote:

Hi @ravjot07 https://github.com/ravjot07, so we don't want to burden you with our pre-conceived ideas of how this might work. You might come up with something that we haven't even considered!

But the goal is to improve designer + developer interactions. For example, today, a designer creates a design system in Figma (which may or may not be accessibility compliant), creates wireframes of designs that may include new components and hands this design over to a developer. The developer then has to implement the design which may or may not look/act exactly as the designer envisioned it. And without Theme Builder, may not even retain its accessibility compliance if the developer doesn't strictly follow the styling in the design.

So we are trying to envision how a developer or designer can define something in Theme Builder that is accessible, the designer imports it into Figma and designs a component with it and then the designer gives the component to the developer as a react component in a package that they know is wired to have the correct look/styling. This vision is where #533 https://github.com/finos/a11y-theme-builder/issues/533 and #541 https://github.com/finos/a11y-theme-builder/issues/541 play roles.

— Reply to this email directly, view it on GitHub https://github.com/finos/a11y-theme-builder/issues/841#issuecomment-2100888008, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABPA7WBHFBQR7A2JEZPPK73ZBJCUTAVCNFSM6AAAAABHANT53CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBQHA4DQMBQHA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[ravjot07]

@ravjot07 https://github.com/ravjot07, I have made significant progress on this issue - we should set up time to discuss my progress and see what needs to be done next. I can show you a demo and talk about the gaps needed to be tackled to make this all work. … On Wed, May 8, 2024 at 11:50 AM aaronreed708 @.> wrote: Hi @ravjot07 https://github.com/ravjot07, so we don't want to burden you with our pre-conceived ideas of how this might work. You might come up with something that we haven't even considered! But the goal is to improve designer + developer interactions. For example, today, a designer creates a design system in Figma (which may or may not be accessibility compliant), creates wireframes of designs that may include new components and hands this design over to a developer. The developer then has to implement the design which may or may not look/act exactly as the designer envisioned it. And without Theme Builder, may not even retain its accessibility compliance if the developer doesn't strictly follow the styling in the design. So we are trying to envision how a developer or designer can define something in Theme Builder that is accessible, the designer imports it into Figma and designs a component with it and then the designer gives the component to the developer as a react component in a package that they know is wired to have the correct look/styling. This vision is where #533 <#533> and #541 <#541> play roles. — Reply to this email directly, view it on GitHub <#841 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABPA7WBHFBQR7A2JEZPPK73ZBJCUTAVCNFSM6AAAAABHANT53CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBQHA4DQMBQHA . You are receiving this because you are subscribed to this thread.Message ID: @.>

sure @Iwnoble we could set up a meet anytime i am ok with it

[ravjot07]

Hi @ravjot07, so we don't want to burden you with our pre-conceived ideas of how this might work. You might come up with something that we haven't even considered!

But the goal is to improve designer + developer interactions. For example, today, a designer creates a design system in Figma (which may or may not be accessibility compliant), creates wireframes of designs that may include new components and hands this design over to a developer. The developer then has to implement the design which may or may not look/act exactly as the designer envisioned it. And without Theme Builder, may not even retain its accessibility compliance if the developer doesn't strictly follow the styling in the design.

So we are trying to envision how a developer or designer can define something in Theme Builder that is accessible, the designer imports it into Figma and designs a component with it and then the designer gives the component to the developer as a react component in a package that they know is wired to have the correct look/styling. This vision is where #533 and #541 play roles.

sure @aaronreed708 i will look more into this and collaborate with @Iwnoble on this

[aaronreed708]

We are going to use #829 to capture the challenges that will solidify and verify the new JSON approaches with Figma

[ravjot07]

My gmail - ravu2004@gmail.com

[budhathokipramin]

My email - budhathokipramin@gmail.com

[omesh-omg]

Email id: kumawatomesh4022@gmail.com