Blurred background image

Contentful’s New Version of Forma 36 Design

Contentful’s New Version of Forma 36 Design

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.” Contentful’s New Version of Forma 36 Design

What’s new? 

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.” Contentful’s New Version of Forma 36 Design

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.” 

PS: ArganoUV is one of the world’s leading Contentful specialists. Contact us to see how we can work together.

Related Ideas

If you got value from this article, you may enjoy these other articles, as well. We’re always adding value!

That's Good Eatin' with Contentful
  • ArganoUV
  • Commerce
  • Contentful

That's Good Eatin' with Contentful

How meat substitute company Quorn broadened and bettered its communication thanks to the CMS Contentful. ...
Cultivating Wellness: How Murad is Moving Digital & Globally with Contentful
  • ArganoUV
  • Commerce
  • Contentful

Cultivating Wellness: How Murad is Moving Digital & Globally with Contentful

How Murad is cultivating wellness online using the CMS Contentful.
Milwaukee Bucks Launch New Website & App on Contentful
  • ArganoUV
  • Contentful

Milwaukee Bucks Launch New Website & App on Contentful

The Bucks net a 3-pointer by utilizing Contentful for its new website and app. ...

Latest ideas

Our latest thinking about SF Commerce Cloud.

Core eCommerce Competencies
  • ArganoUV
  • Commerce

Core eCommerce Competencies

Core payment competencies in ecommerce.
The Benefits of eCommerce for Independent Pharmacies
  • ArganoUV
  • Pharma

The Benefits of eCommerce for Independent Pharmacies

Why go online if you’re an independent pharmacy?
Key Features for All eCommerce Pharmacies
  • ArganoUV
  • Pharma

Key Features for All eCommerce Pharmacies

What are the key features of a pharmacy digital store?

How can we achieve
awesomeness together?