More Premium Hugo Themes Premium React Themes

Forma 36

A design system by Contentful

Forma 36

A design system by Contentful

Author Avatar Theme by contentful
Github Stars Github Stars: 345
Last Commit Last Commit: May 20, 2025 -
First Commit Created: Dec 18, 2023 -
default image

Overview:

Forma 36 is an open-source design system created by Contentful to simplify UI creation for digital teams building and extending Contentful products. It provides tools and guidance to reduce the overhead of creating user interfaces.

Features:

  • Creating new packages: Use Plop to scaffold new packages and generate relevant files and imports.
  • Development: Install dependencies and build packages for local development using npm scripts.
  • Storybook for f36-components: Use Storybook with the react component library to develop components.
  • Commits & releases: Use Commitzen CLI to create conventional commit messages and release new commits on the main branch.
  • Testing with your own project locally: Test changes to a package in your own project by building the changes and linking to the local version of the package.
  • Get involved: Welcome PRs and contributions to the repositories.
  • Reach out to us: Connect with Contentful community Slack channel #forma36 for announcements and updates.
  • Bug reporting and feature proposals: Use issue templates to report bugs or propose new features.

Installation:

To install Forma 36, follow these steps:

  1. Run npm run-script generate in the root of the repository to use Plop and scaffold new packages.
  2. Install dependencies by running npm i in the root of the repository.
  3. Build all packages by running npm run-script build in the root of the repository.
  4. Follow the package-specific instructions provided in their README files for further development.

For local testing in your own project:

  1. Ensure latest changes in the desired package have been built by running npm run-script build in the package’s directory.
  2. Link to the local version of the package by running npm link NAME_OF_PACKAGE in your local project’s directory (e.g., npm link @contentful/f36-components).

Summary:

Forma 36 is an open-source design system by Contentful that aims to simplify UI development for digital teams building and expanding Contentful products. It offers features like package creation, local development, using Storybook for component development, committing and releasing changes, testing changes locally, and contributing to the project. The installation guide provides step-by-step instructions for setting up Forma 36 and using it in your own projects.