Loplat Design System, Loplat UI

An internal design system project to ensure design consistency across products and improve development productivity.

As the project lead, I was responsible for architecture design, deployment setup, and building core components.

Period

Sep 2021, 4 weeks

Tech Stack

React, Typescript, React-Testing-Library, Rollup, ESLint, Prettier, storybook, gcp-artifacts-registry

Internal Review

• Received positive feedback: "Beautifully built. I was impressed by how many edge cases were considered during development."
• "Enabled flexible yet consistent UI implementation in real products like Loplat X Mobile and the Loplat Homepage, while also reducing development time."

Work

Core, Component

• Built Typography, Grid System, Button, Toast, RadioButton, Icon, Help, Badge, Input, and more.
  • Followed semantic HTML tags.
  • Used Tuple Type for stable management of various style values.
• Used svgr (opens in a new tab) to easily generate components from SVG files.
  • Also automated generation of export and storybook related code to improve developer experience.

Test Code

• Introduced Jest-based React-Testing-Library to ensure component integrity and verify that designer intent was properly reflected.

Communication with Designers

• Set up Bitbucket pipeline (yml) to automatically build and deploy Storybook on commit, with a Slack bot notifying the team of changes. This improved communication between designers and developers.