Other resources
Everything you need to work with Carbon, including Figma libraries and templates, color palettes, GitHub repos, and design tools.
- Introduction
- Elements
- Fonts
- Data visualization
- Gatsby theme
- GitHub repos
- Native mobile
- Accessibility
- Prototyping tools
Introduction
This page includes Figma kits, tools, templates, and plugins that have been created to help you get up and running. For a comprehensive list of kits, explore the design kit catalog.
To use the Figma libraries you’ll find here, you need a Figma license. IBMers can follow instructions in the Design Toolbox to get a license. To get started with Figma, visit the Design kits page.
Elements
Fonts
Carbon uses the open-source typeface IBM Plex – carefully designed to meet IBM’s needs as a global technology company and reflect IBM’s spirit, beliefs, and design principles.
Data visualization
The Carbon Charts library includes basic and complex chart assets, along with usage guidance, theming guidance, palettes, and sample layouts.
Gatsby theme
The Gatsby Figma kit has all the components, patterns, and sample layouts that have been developed by teams within the IBM ecosystem. The Gatsby theme site includes the components, guidelines, and everything you need to create and contribute to Carbon sites.
Image production guidelines
For anyone interested in contributing to the Carbon Design System website, or making images for their own Pattern Asset Library (PAL), we follow a set of guidelines to ensure consistency across the content in the Gatsby ecosystem. The image production guidelines Figma kit includes guidance, symbols and templates to help designers with every aspect of image creation and component specs.
GitHub repos
Native mobile
The native mobile kits include everything you need to get your iOS or Android project underway.
Figma kit coming soon
Accessibility
The IBM Accessibility kit includes checklists, bite-sized guidance, and handoff assets to make sure your designs are accessible for implementation.
Prototyping tools
Carbon Mid-Fidelity kit
This kit provides designers with a way to visualize concepts and test them out before committing to high-fidelity designs.
Invision Freehand kit
A Carbon wireframe kit for Invision Freehand is available for teams to create low fidelity wireframes. This kit is maintained by the Cloud PAL community.
Carbon UI Builder
Carbon UI Builder is a visual tool that allows users to assemble product pages and layout modules using Carbon Components in a fraction of the time it usually takes.
Pages can be exported as:
- Images for presentations
- Live demo apps for user testing
- Production-quality code that can be easily incorporated in an existing product’s frontend
