Forma 36 - The Contentful Design System
Forma 36 is an open-source design system by Contentful created with the intent to reduce the overhead of creating UI by providing tools and guidance for digital teams building and extending Contentful products
Table of contents
- Table of contents
- Development
- Commits & releases
- Deprecation process
- Figma Code Connect
- Testing with your own project locally
- Get involved
- Reach out to us
- License
- Code of Conduct
- Contributors
Creating new packages
We use Plop to create scripts that help you to scaffold new packages. In the root of the repo, you can run pnpm generate. Then follow the steps in the CLI. Plop will generate the relevant files and add the relevant imports and exports to the main src/index.ts file required to make the component available when publishing the library. Read more about contribution to Forma 36.
Development
For local development, in the root of the repo run pnpm install to install all dependencies and then pnpm build to build all packages. Now follow the instructions of the specific package you’re working on.
You will find each package’s instructions in their README files, check the Packages section for a list of all packages.
In case you are having problems to install the dependencies, try using NVM to get the same node version we use by running
nvm usein the root of the repo
Storybook for f36-components
We use storybook with our react component library to develop components. You can start it from the root of the repo, just run pnpm storybook after building.
Commits & releases
Use pnpm commit. This uses the Commitzen CLI to create a conventional commit message based on your changes. CI is setup to release all new commits on the main branch that contains a new changeset.
Read more about changeset here
Deprecation process
We follow a structured deprecation process to ensure smooth transitions when components, props, and features are being phased out. Deprecations are announced at least one major version in advance, with clear migration paths and runtime warnings.
Read more about our deprecation guidelines here
Figma Code Connect
Component mappings for Figma Dev Mode are maintained alongside each component source as *.figma.tsx files. See docs/code-connect.md for details on how to update mappings and publish changes.
Testing with your own project locally
You can test changes to a package of this monorepo in your own project locally by taking the following steps:
- Run
pnpm buildin the desired package's directory to ensure your latest changes have been built. - Change to your local project's directory and run
pnpm link /path/to/forma-36/PACKAGE_DIRECTORY.
Get involved
We appreciate any help on our repositories. For more details about how to contribute to a package, see the README of the corresponding package.
Reach out to us
You can reach out to us using the Contentful Community Discord.
You found a bug or want to propose a feature?
Create an issue using one of the templates 
.
Make sure to remove any credential from your code before sharing it.
License
This repository is published under the MIT license. The Geist typeface included in this repository is covered by its own license.
Code of Conduct
We want to provide a safe, inclusive, welcoming, and harassment-free space and experience for all participants, regardless of gender identity and expression, sexual orientation, disability, physical appearance, socioeconomic status, body size, ethnicity, nationality, level of experience, age, religion (or lack thereof), or other identity markers.
Read our full Code of Conduct.
Contributors
Thanks goes to these wonderful people (emoji key:
This project follows the all-contributors specification. Contributions of any kind welcome!