Component Building for the DIGIT Design System

[Taherabharmal]

Description

The DIGIT Design System is the foundational UI framework for a diverse range of digital products and services used by various stakeholders within the Government, Communities, and Citizens, totaling an impressive 200 million users. To ensure consistency, efficiency, and scalability across this vast ecosystem, it is essential to maintain a well-structured and comprehensive library of components. This concept note outlines an initiative to design, build, test, and publish all components, including their variants, within the DIGIT Design System.

The DIGIT Design System follows the principles of atomic design, with components organized into three key categories: atoms, molecules, and organisms. These components are extensively used across numerous products and platforms. Currently, the system comprises over 30 atoms, 20 molecules, and 10 organisms, each with multiple variants, forming the building blocks for various user interfaces.

Goals

• Consistency: Ensuring all products adhere to the DIGIT Design System, maintaining a consistent and cohesive user experience across the entire ecosystem.
• Efficiency: Providing reusable and well-documented components will expedite product development, reducing the need for custom code and development time.
• Scalability: Empowering teams to create new products with ease using pre-built components will enable the DIGIT ecosystem to scale rapidly, in line with the objectives of the DIGIT+ model, which enables building solutions and addressing different use-cases by the ecosystem partners and the community.

Expected Outcome

Availability of all components in a centralized and easily accessible Storybook / DIGIT Library and the DIGIT Design system website, facilitating exposure to the UI Building blocks of DIGIT and an opening to build new solutions on DIGIT.

Acceptance Criteria

• To be defined as per component
• Availability of Documentation
• Publishing component on Storybook/DIGTI Library

Implementation Details

The implementation will consist of the following activities:

1. Component Building: Design, Develop, refine, and standardize all atoms, molecules, organisms, and their respective variants as defined in the DIGIT Design System on React and Flutter.
2. Testing: Rigorously test each component for functionality, responsiveness, and accessibility to ensure a user-friendly user interface.
3. Documentation: Create detailed documentation for each component, including usage guidelines, best practices, and code examples.
4. Publication: Publish the components in a centralized and easily accessible Storybook / DIGIT Library and the DIGIT Design system website, facilitating exposure to the UI Building blocks of DIGIT and an opening to build new solutions on DIGIT.

Mockups / Wireframes

N/A

---

Product Name

[Product Name: DIGIT Design System

Project Name

Component Building for the DIGIT Design System

Organization Name:

eGovernments Foundation

Domain

Core Platform: DIGIT

Tech Skills Needed:

React, Flutter, Design on FIGMA

Mentor(s)

@taherabharmal @andrew

Complexity

Medium

Category

[UI/UX/Design], [Feature], [Documentation], [Deployment], [Test], [Development]

Sub-Category

[Frontend Component Design]

[Abro0058T]

@Taherabharmal Can you assign me this issue ?

[Praneetha29]

@Taherabharmal Can you please assign me this issue? I have experience designing using Figma, and developing using ReactJS, and Flutter.

[priyakumari02]

Hi @Taherabharmal , Can I work on this issue?

[bhav-khurana]

Hello @Taherabharmal I'm Bhav Khurana, a pre final year student at IIT (BHU), Varanasi. I have experience in Flutter app development and designing using Figma. I have gone through the issue thoroughly and would love to work on it. Can you please assign it to me?

[Antriksh1305]

Hello @Taherabharmal I am Antrikesh Gupta, I have gone through the issue and would like to work on it. Can you please assign this to me?

[AryanSarafDev]

Hello @Taherabharmal I am Aryan Saraf, I am a Flutter developer and will be excited to take on this issue if its assigned to me!

[AnayaChoudhari]

Hey @Taherabharmal I am Anaya Choudhari, I have experience in flutter, firebase, figma & React. Can I work on this issues?

[shashank-lol]

Hi @Taherabharmal Can you assign this issue to me. I have experience with figma, flutter and firebase

[ptripathi2002]

Hi @Taherabharmal, I am a final year B.Tech Computer Science student, having a decent level of experience in React.js. Can you please assign this issue to me? I would love to contribute to it.

Regards, Prashant Tripathi

[Taherabharmal]

Hello,

This is on pause for now. will let you know if this reopens.

[Taherabharmal]

This is on pause for now. will let you know if this reopens.

[kapilchanaba]

@Taherabharmal Can you assign this issue to me? I would love to contribute to it.

[YasinzHyper]

Is this still paused? I am interested in contributing.

[Yash-Sajwan24]

@Taherabharmal I understand the problem, and I believe I have the necessary skills. Could I have the opportunity to work on this?

[Yash-Sajwan24]

@Taherabharmal I understand the problem, and I believe I have the necessary skills. Could I have the opportunity to work on this?

[mohitpraja]

@Taherabharmal I am Mohit Prajapati, I am a Flutter developer and will be excited to take on this issue if its assigned to me!

[ShubhAgarwal0704]

@Taherabharmal I am Shubh Agarwal, I am a flutter developer, I found the above PS really intresting and want to work on it. Kindly assign me this issue

[r4ravikumar-dev]

@Taherabharmal @andrew I'm Ravi Kumar pre-final B.tech Student at HNBGU, I've experience in UI/UX Designing with Figma and other prototyping and wireframing tools. I have gone through the problem statement and am willing to work on it. Can you please assign me this issue? I would love to contribute to it.

[pradnya809]

Hi @Taherabharmal @andrew I am Pradnya Deshmuk, a working professional with 6 months of experience in java, and did some internships in college in flutter. Can you please assign me an the any issue, I am excited to contribute.

[KumarVivekPathak]

Hi @Taherabharmal I am Vivek Pathak, I have worked with react to create web app and components as well I am interested to be a contributor of the DIGIT and I have experience in building custom components and reusable components. using react on front end. Could you please provide me more knowledge and requirements of the project so that i can start working on that and I would like to be a part of DMP 2024 with DIGIT.

[rupss14]

hello @Taherabharmal ,I would love to work on this issue. I have experience in flutter.

[LavanyaaCSE]

Hello @Taherabharmal , I am interested in working on this issue; could you please assign it to me? I have prior experience working with React and Flutter. It would be a great opportunity for me to contribute to this issue. Can you please assign me a task

[Vi-shub]

Hi @Taherabharmal ,

I've prepared a comprehensive proposal for implementing the DIGIT Design System components in React and Flutter. Here are the key details:

Component Building: ->Design, develop, and standardize all atoms, molecules, organisms, and variants according to DIGIT Design System guidelines.Ensure responsiveness, accessibility, and functionality of each component. ->Testing:Rigorous testing to guarantee a user-friendly interface and seamless functionality across platforms. ->Documentation:Create detailed documentation for each component, including usage guidelines, best practices, and code examples. ->Publication:Publish components on Storybook/DIGIT Library and the DIGIT Design system website for easy accessibility and exposure.

This initiative aims to enhance consistency, efficiency, and scalability within the DIGIT ecosystem, benefiting millions of users and stakeholders.

Looking forward to your feedback and approval to proceed with this implementation.

[VedantKhairnar]

Hello @Vi-shub Are you currently open to contributing to this issue? Thanks.

[NishchayRajput]

@Taherabharmal Can I work on this issue? Please assign me this.