File Structure

An overview of how the component libraries are configured

Overview

This document explains how Figma libraries are organised for designers working with the Compound component libraries.

The libraries are stored in separate Figma projects, but they share standard foundations, including design tokens, iconography, and pictograms.

Diagram of how the foundational component links to the Compound UI libraries

Figma Library Structure - Diagram of how the foundational component links to the Compound UI libraries

Compound UI for Web

Web components are organised into separate Figma files to make them easier to manage across a larger team.

Dividing files allows designers to branch and explore ideas within a single component file without affecting other files.

A collection of files inside a Figma Project interface

Screenshot of the Web Component library in Figma

Compound UI for React Native

The React Native component library changes less often, so it is managed within a single Figma file.
Each component has its own dedicated page, making it easy to view, maintain, and update as needed.