What is Forma 36?
Forma 36 is an open-source design system made by Contentful. It's a set of pre-built React components, allowing developers to quickly create user interfaces with a familiar look and feel consistent with the Contentful platform. The system offers tools and guidance for building and improving Contentful products.
The Evolution and Versions
The first version of Forma 36 was released by Contentful in 2019. There isn't much information about the first version of Forma 36. However, it was an important starting point for creating a design system.
V3 (Before 2021):
Built a foundation of future development for Forma 36.
Contentful supported v3 until July 12, 2022, after which it was no longer updated or supported.
V4 (2021 - Present):
V4 was developed with a simpler approach to form elements, providing more flexibility and establishing good practices.
Components are now in separate packages, so users can use only the ones they need. It reduces bundle sizes and improves app performance.
Each component now encapsulates its style.
The API and code style guide are aligned.
What Products Built with Forma 36
Contentful's Forma 36 is a strong open-source design system that helps create consistent, easy-to-use, and efficient interfaces. It is used in many products and tools, mainly within the Contentful ecosystem. Apps developed by external developers for Contentful. Forma 36 can create rich app experiences and UIs without coding.
Contentful Web App: The main web app where users manage their content. It includes features like editing and organizing content.
Contentful Marketplace: A place that shows apps, integrations, and extensions. The design system ensures everything looks and feels the same.
Contentful Extensions: Custom UI extensions for the web app. These follow Forma 36 design patterns to match the rest of the platform.
Applicable industries for reference
Forma 36 can be used in many industries to create consistent and easy-to-use interfaces for digital products.
Technology: Forma 36 helps make software easy to use and look good by offering ready-made design parts.
Media and publishing: It provides tools to keep news sites and online magazines looking clean and easy to read.
E-commerce: Online stores can use it to make shopping websites consistent and simple to navigate.
Marketing agencies: Agencies can use it to create attractive and uniform marketing pages, helping build brand trust. Forma 36 is also a good content management system.
Platform Support and Use Cases of Forma 36
Supported Platforms
Forma 36 is primarily designed to work with web-based applications and platforms. The system is versatile and can be integrated into various web development environments to ensure a consistent and user-friendly interface design.
React: Forma 36 offers component libraries specifically for React, making it easy to integrate into React-based projects.
HTML/CSS: Developers can use plain HTML and CSS along with Forma 36's style guidelines to apply its design principles.
JavaScript Frameworks: While it is optimized for React, Forma 36 can be adapted to work with other JavaScript frameworks with some effort.
Node.js: Forma 36 doesn't directly provide server-side components, but it can be used in conjunction with Node.js for full-stack development.
Use Case Scenarios
A Guide and Template for Forma 36
Style Template File for Motiff
Effective Use of the Color System
There are 6 base colors, along with gray and black/white. Each color consists of 9 shades, ranging from 100 to 900. To make things simpler, the middle shade (500) of each color is given a special name, called a semantic color. The system also makes sure there is enough contrast between colors.
The thoughtful approach to color usage enhances both the usability and visual consistency of digital products designed with Forma 36. For example, gray is used for typography, borders, and element backgrounds, blue serves as the primary color for highlighting key actions, and red is used to draw attention to negative actions or messages.
Typography Hierarchy and Readability
Forma 36 helps make text on websites easy to read and well-organized. It uses system UI fonts like San Francisco, Neue Helvetica, Lucida Grande, Segoe UI, and Arial. These fonts load quickly and work well with many languages.
To keep text spaced out nicely, Forma 36 automatically adds spacing around text elements. It also allows typography components to be rendered as different semantic elements, such as h1, h2, h3, h4, h5, h6, or p, which helps organize and prioritize the text effectively.
Typography components can set their own margins, which means you can control the space around text. For example, headings normally have a bottom margin of 16px, but users can change it if needed. The Text component is a basic tool that shows text as a span element by default, keeping the style consistent for inline text.
Icon Design Principles
In Forma 36, thoughtful icon design principles are crucial for crafting a clear and intuitive user interface. These principles ensure that icons are informative, consistent, and well-suited to their context.
Consistency: Ensure the meaning of the icon is consistent in all use cases.
Contextual Fit: Consider how the icon fits into the context of the screen and reduce complexity where possible.
Icon Uniqueness: Before designing a new icon, check the Forma 36 library to see if there's already an icon that works for your needs.
Forma 36 Components Templates
Forma 36 essentially provides a ready-made set of React components for building user interfaces with a standardized design aesthetic. It also allows users to customize components with props to fit specific needs.
A-C
D-G
H-M
N-R
S-Z
Accessibility in Forma 36
Contentful's goal is to create an inclusive web for people of all abilities. They use axe and Jest to test component snapshots against the Web Content Accessibility Guidelines (WCAG) criteria. Major operating systems offer assistive technologies to support users, particularly those with auditory and visual impairments.
These technologies include contrast switchers, screen readers, and braille displays. To fully benefit from these technologies, it's critical to ensure that the content and functionality are accessible.
Keyboard accessibility: All interactive elements are focusable
Color contrast: Contentful's color palette meets WCAG for color contrast
Headings: Headings help users scan copy and navigate content, which is important for screen readers used by visually impaired people
Skip links: These provide a way to bypass blocks of repeated content
Other Resources
Github-forma-36: The page includes code, documentation, and resources for using Forma 36 in projects.
Medium | Contentful Design: Articles about design decisions, best practices, and updates of Contentful Design.
Forma 36 Community for developers: A platform to collaborate, ask questions, and share feedback.
FAQ of Forma 36: Answers to common questions about using Forma 36.