The content management system Contentful has recently announced the full release of Forma 36 version 4.
… Wait, hold up. “What’s Forma 36?” I hear you ask in a quiet voice.
Contentful Forma 36 is an open-source design system that was built with the intent to close the overhead of creating quality user interfaces by providing the right tools.
“We’re very excited about it,” declared an announcement by the headless platform, “and hope it will bring a lot of value to everyone using our React components library.”
Created to help organizations extend Contentful UI with ease as they build apps as well as customize their content management system.
“Forma 36 shows our commitment to extensibility and the builder ethos,” the statement added, “giving you the tools you need to build the content platform that perfectly suits your needs. With Forma 36, we provide you with the React components library, so you can create your interface in no time and focus on building the core functionality of your apps.”
The purpose of the latest release was to upgrade its accessibility improvements to its React components. “We believe that the web should be for everyone,” Contentful’s statement added, “so v4 brings WCAG level AAA compliance in all of our React components.”
One example of this is on its menu component, which has replaced its former dropdown component from version 3. Users can now use arrow keys to navigate through the menu items.
Another change that has been added involves the library. In version 4, Contentful has split specific components into separate packages. Now users can use the components that they want without having to add the entire suite of components.
“This change will make your bundle size much smaller and improve the performance of your apps,” it added, “particularly for apps that only use a few components from the library. When we compare versions of an app that only imports one component, v4 makes the bundle around 85% smaller than v3! That will make Contentful even smoother for your content teams.”
Thirdly, the developer experience has also been improved. “In v4, we’ve introduced Emotion, so now all the styles are encapsulated in the component. This means that when you add Forma 36 to your project you don’t have to import additional CSS file anymore – making it faster and easier than ever.”
Project migration to Forma 36 v4
The latest version has migration in mind. “To make it easier for developers to use Forma 36 in their apps, the API for v4 is now consistent with our code style, making it easier for anyone who already works with our APIs to utilize our components.
“Codemods are available for most of the components, and you can migrate your components with just one command. For those few components that cannot be migrated automatically, we’ve provided you with detailed migration guides.”