This package implements the Carbon Design System from IBM in Framer.
Most of the components from Carbon have already been implemented. Utility components which are not useful for prototyping have been excluded.
The Carbon Design System documentation site is a great place to get started when working with these components. You won’t always see a 1:1 mapping of the properties of the underlying components to Framer Property Controls but it should give you a good indication of what’s already possible.
Basic support for the White, G10, G90 and G100 themes is included. Drop the
ThemeSwitcher component on the canvas and use the property controls to select the theme that’s used across your prototype.
If you would like to base your Framer package off of this one, you can fork this repository.
By default, when you open the project in Framer Desktop, it will be automaticaly linked to the public Framer package for Carbon. This will mean you’ll be unable to publish any updates to it, or publish it to your private team packages.
By executing a small bash script included with this project, you can strip away any metadata that references this project to an existing Framer package, allowing you to publish it yourself to a different location.
yarn run fork
Togglecomponent not to set its state correctly
ThemeSwitchercomponent on the canvas of your prototype and switch the theme in the properties panel to preview your components
Typographycomponent with text styles inherited from
Checkboxcomponent to not change state when clicked
HeaderGlobalActioncomponent in favour of setting it via a property control on the
Accordionto not be positioned correctly
TextInputcomponents to be used with Framer’s Interactions
Tagcomponent when first inserted on the canvas
Togglecomponent on/off to have no effect
Tooltipcomponent to render incorrectly
Tooltipcomponent. This will not display on the canvas due to it using a React Portal which causes it to be absolutely positioned on the canvas.
onTapevent not firing for the
Selectcomponent having no effect
carbon-components.cssstylesheet to prevent it overriding Framer’s UI