Part 1: Introducing the Fauna Design System
In the rapidly growing web development field, the concept of a design system has emerged as a crucial tool for frontend developers and designers alike. A design system serves as a collection of reusable components, guidelines, and resources that enable teams to create cohesive and consistent user interfaces across various digital products and platforms.
Why are Design Systems Important?
Design systems help in streamlining the development process, fostering collaboration, and ensuring brand consistency within a web development team. By providing a shared language and set of standards, design systems empower teams to work more efficiently, reduce duplication of effort, and maintain a unified user experience.
Why Am I Creating the Fauna Design System?
For my capstone project as a frontend developer, I embarked on the journey of creating the Fauna Design System. My primary objectives were twofold: to deepen my understanding of building a design system from scratch and to improve and showcase my skills in creating intuitive and visually appealing user interfaces.
Drawing inspiration from renowned design systems such as the Carbon Design System, IBM's Design Language, and ShadCN-UI, I set out to develop an open-source design system that would serve as a foundational resource for web developers and designers.
Description of the Fauna Design System
The Fauna Design System aims to be a comprehensive open-source toolkit for creating cohesive and consistent user interfaces in web development. It encompasses a wide range of UI components, including buttons, forms, navigation elements, modals, and more. With a well-thought-out typography system, color palette, and spacing, the Fauna Design System provides the building blocks for crafting visually stunning and accessible web applications.
Open-Source Collaboration
One of the foundations on which the Fauna Design System is built is its commitment to open-source collaboration. By making the project accessible to the broader community, I aim to foster future contributions, feedback, and improvements from fellow developers and designers. Through collective effort and continuous iteration, the Fauna Design System can evolve and adapt to meet the evolving needs of the web development community.
Pre-Development Steps
Before diving into the development of the Fauna Design System, I conducted in-depth research on existing design systems, best practices, and emerging trends. This research phase provided valuable insights into the core components and principles that would shape the Fauna Design System.
Armed with this knowledge, I carefully curated a list of project components, including UI components such as buttons, alerts, input fields, cards, navigation, modals, accordions, sliders, tooltips, breadcrumbs, and pagination. Additionally, I defined the style guide to include typography, font sizes, heading styles, and a color palette that would form the foundation of the design system.
Design Phase
Utilizing Figma as my design tool of choice, I embarked on the design phase of the Fauna Design System. Figma's intuitive interface allowed me to iterate quickly, experiment with different design concepts, and refine the visual elements of the design system.
Throughout the design process, I focused on creating components that were not only visually appealing but also easy to use. By adhering to best practices in UI/UX design and incorporating feedback from usability testing, I ensured that the Fauna Design System would meet the needs of a diverse range of users.
Part 2: Building Fauna Design System Components
The first step towards developing Fauna Design System components was setting up the project environment. This involved installing essential tools and libraries to facilitate smooth development.
The project was initialized using React, Typescript, Vite, Tailwind CSS, and Storybook. These technologies were carefully chosen for their efficiency, flexibility, and ease of use. Additionally, the project repository was created on GitHub, enabling version control with Git.
Organizing the Project Structure
To maintain a clean and structured codebase, the project structure was meticulously organized. The tailwind.config.js file was configured to include all the color tokens, space, font size, etc. to ensure seamless integration with the project. A lib folder was created, housing a components directory where all UI components resided for better organization.
Below is an overview of what the project folder structure looks like: ├── storybook/ ├── lib/ │ ├── components/ ├── src/ │ ├── stories/ │ ├── main.tsx │ └── index.css ├── .gitignore ├── index.html ├── package.json ├── postcss.config.js ├── README.md ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts
Defining Component Variations
The first component built was the Button component, which is the fundamental building block of any user interface. It was crafted with various configurations, including different variants such as filled, hovered, and disabled. Additionally, the button was designed in a range of colors, which includes primary, secondary, and tertiary options, while also offering multiple sizes: small, medium, and large. The next step was to build out the rest of the components which contained their variations; Accordion, Alert, Breadcrumb, Card, Input, Modal, Navbar, Pagination, RangeSlider and Tooltip all ending with a .tsx extension.
Building Components with Storybook
Storybook provided an excellent platform for designing, developing, testing, and documenting UI components in isolation, known as stories. Stories for each component were created in the stories folder, all ending with a .stories.tsx extension.
You can view the stories here
Part 3: Testing with Storybook Runner and Deploying to Chromatic
In this section, I'll delve into the process I used for testing UI components using Storybook Test Runner and deploying them to Chromatic.
Testing with Storybook Runner
Upon conducting research on testing methods for components within Storybook, I discovered the Storybook Test Runner. This tool simplifies the process of running smoke tests on components without the need for separate test files.
The first step was to install the test runner using the command:
npm install -D @storybook/test-runner
Next, I added the following script to the package.json file:
"scripts": {
"test-storybook": "test-storybook"
}
Subsequently, I executed the following command in the terminal:
npm run test-storybook
This command initiated the test runner, which then performed smoke tests on the components within Storybook. The result of running the test can be seen in the image below.
Deploying to Chromatic
Chromatic is a platform designed to simplify the deployment and management of component libraries and design systems. It securely hosts your Storybook in the cloud, where it organizes, tracks, and versions each component. With Chromatic, you can leverage continuous integration (CI) workflows to gather team feedback and conduct UI testing efficiently.
As mentioned in Part 1, I utilized GitHub as the code repository for the Fauna Design System. Fortunately, Chromatic is automatically integrated upon installing Storybook, eliminating the need for separate installation steps.
In order to deploy the design system to Chromatic, I followed these steps:
Sign into Chromatic with GitHub: I accessed Chromatic and signed in using my GitHub account credentials.
Add a New Project from GitHub: Within Chromatic, I added a new project and linked it to the GitHub repository containing the Fauna Design System.
Generate Project Token: Chromatic automatically generated a project token for the Fauna Design System project.
Publish to Chromatic: Finally, I ran the command
npx chromatic <project-token>in the terminal, which publishes the project to Chromatic.
By utilizing Chromatic, I was able to gain insight into relevant UI changes across branches and commits of the Fauna Design System across different releases, all within a shared workspace, enhancing its overall quality and user experience.
Part 4: Publishing as an NPM Package and Testing in a Demo Blog App
To make it available as an npm package, the first step was to configure the project for vite library mode so that only the reusable components are bundled. This involves adjusting the vite.config.ts file to specify the entry point of our library and exclude external dependencies like React and ReactDOM.
The include array of the tsconfig.json file was updated to include the 'lib' folder for TypeScript compilation, as shown below:
"include": ["src", "lib"],
In the lib folder, I created a file named fauna-design-system.ts that contains all the exports that users of the library can import. This file serves as the entry point for the npm package. The file contains the following code:
import "../src/index.css"
import Accordion from "./components/Accordion";
import Alert from "./components/Alert";
import Breadcrumb from "./components/Breadcrumb";
import Button from "./components/Button";
import Card from "./components/Card";
import Input from "./components/Input";
import Modal from "./components/Modal";
import Navbar from "./components/Navbar";
import Pagination from "./components/Pagination";
import RangeSlider from "./components/RangeSlider";
import Tooltip from "./components/Tooltip";
export { Accordion, Alert, Breadcrumb, Button, Card, Input, Modal, Navbar, Pagination, RangeSlider, Tooltip };
Afterwards, the vite-plugin-dts plugin for type definitions was installed as a dev dependency to automatically generate type definitions for the library.
Then the system was built by running the command npm run build which generated an output dist folder. The package was published by running npm publish. I also set private: false in the package.json in order to make it available to the public.
This is the link to the published package
Testing the Published Package in a Demo Blog App
Upon publishing the design system as an npm package, I wanted to integrate it into a demo app to showcase its usage. The first step I took was to create a new React app named test-blog-app.
The next step was the installation of the published package in the demo blog app using the npm i fauna-design-system. Then, I imported and used the components from the design system within the blog app UI.
This is the link for the demo blog app. For more information on links regarding other aspects of the project, visit Fauna Design System. This is a link to the design file on figma
Conclusion
In conclusion, the Fauna Design System represents the culmination of my efforts to create a valuable resource for the web development community. With its emphasis on collaboration, accessibility, and usability, the Fauna Design System aims to empower developers and designers to build exceptional digital experiences.