Developing Components

Atomic Patterns

I’m a fan of the Atomic Design Principals by Brad Frost. In my experience working on design systems, I’ve found this method is great for organization and for communicating component concepts with engineering product and teams. In short, Atomic design is a mental model for thinking about user interfaces as both a cohesive whole and a collection of parts.

In my past experience, I’ve used UI component libraries like Ant Design and JoyUI to serve as my Atoms. This enables me to prototype my ideas faster since I don’t have to develop components like Buttons and Inputs from scratch.

// Importing Atoms from a third-party lib
import { Button, Card, Statistic, Space } from 'antd';

// Constructing Molecules or Organizms
const AwesomeMolecule = (props) => {
    const { some_prop } = props

    // This could be a response from an API
    const statistics_data = [
        {title: 'Foo', amount: 100},
        {title: 'Bar', amount: 200},
        {title: 'Zap', amount: 300}]

    return (
        <section className="custom-class-added-for-scoping">
            <Card title="Awesome" >
                <div className="flex gap-4">
                    {statistics_data.map(({title, amount}) => {
                        return (<Statistic key={title} title={title} value={amount} />)
                    })}
                </div>
                <div>
                    <Space>
                        <Button type="primary">Action</Button>
                        <Button>Operation</Button>
                    </Space>
                    {some_prop} ... more Atoms
                </div>
            </Card>
        <section>
    )
}

So now you have a bunch of code as a result of your prototyping. If you’re working with a team (or working solo), abstracting your functionality into a reuseable component is a solid next step. The next level maneuver would be to incorporate a gallery using a tool like Storybook.

Working in this manner has improved how I collaborate with my teams - Design can realize a vision, product can verify that business objectives are being met, and engineering develop with confidence.