COMPONENTS LIBRARY

Building a Design Library Synchronized to React Code

Year: 2023  Type: User Interface, Interaction Design.

Team: 5 UI Desginers, 7 Developers, 1 Project Manager, 1 Director

COMPONENTS LIBRARY

Building a Design Library Synchronized to React Code

Year: 2023  Type: User Interface, Interaction Design.

Team: 5 UI Designers, 7 Developers, 1 Project Manager, 1 Director

Armed with a strong design library in both code and Figma, which matches the brand, covers a wide range of needs, and syncs with coded Material UI components, we’re ready to go. Because our Figma designs are based on coded Material UI parts, we know our design system can handle complex needs.

The
Challenge

Previous software solutions have displayed a lack of professional rigor, falling short of meeting intricate universal requisites, and demonstrating suboptimal performance.

  • The development process is unable to faithfully implement or construct the original designs
  • The resulting products lack accessibility, hindering their usability
  • The progress of development is impeded by the burdensome need to create individualized versions for both mobile and desktop platforms
  • The software solutions are not compatible with older browsers, limiting their accessibility across diverse user groups
  • The performance of the software products is impaired due to an accumulation of unplanned patches and workarounds during the development phase
  • Despite being developed on robust, professional frameworks like React Material UI and React Bootstrap, which are designed to accommodate complex requirements such as accessibility and responsiveness, these essential features are conspicuously
  • Product language localization is not considered until the final stages of development where it creates considerable issues

Our
Solution

Our solution involves developing a robust design system based on Material-UI (MUI) to enhance app development efficiency and ensure consistency. We begin by analyzing project requirements and establishing a comprehensive design language, including color palettes, typography, and spacing guidelines. Each Material-UI component is meticulously recreated in Figma, with attention to detail in shadows, borders, and interactions, organized into a Figma library. To cater to different use cases, we design various component states and variants. Thorough documentation outlines component usage, responsiveness, accessibility, and behavior. Collaboration with developers ensures practicality and feasibility during the design process. Version control is implemented to manage updates, and design tokens are extracted for direct use in the code. With our solution, designers and developers can work harmoniously, producing consistent, high-quality apps with ease and efficiency.

Synchronizing Design and
Development with a Theme

We are starting with the corporate look and feel. We need to create a theme for our React Material UI library. Our goal is to work with development so that we can have a completed Material UI theme IN CODE based on the following design theme.
Because the design is closely integrated with the development, developers can efficiently build, modify, and maintain our application. This synchronization frees up time to focus on critical features. In the context of our trucker application, most engineering effort will be dedicated to the AI chatbot and the real-time status of the truck and load.

Production-ready
Components

Custom
Components

Fully Responsive

Back

Back Home

Next

Let’s get
in touch

If you have a project in mind, want to ask for a quote or even just to say hi!, do not hesitate in fill the form. But, if you’re not a big fan of forms you can reach me out in any of the following social media available.😉

hello@jpoydesign.com

Dribbble Behance Linkedin

From Buenos Aires,

to the world.

(+54) 9 11 5809 5369

hello@jpoydesign.com