Iain Kettles
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.
If you cannot control a certain property of a component using Framer’s Property Controls, you can override the property using Code Overrides. Overrides allow you to change the properties of a component in the preview window (they do not run on the canvas) by using a JavaScript function that returns a new set of props which will then be applied to the underlying React component. This is useful if you want to capture the value of an input element or make components talk to each other using the Data object.
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.
$PATH
yarn run fork
framer
, name
and version
keys from package.json
This project is currently being maintained by Iain from the Framer Team. Feel free to create an issue in the GitHub repository if you run into any issues.
Toggle
component not to set its state correctlycarbon-components-react
to 7.11.0
ThemeSwitcher
component on the canvas of your prototype and switch the theme in the properties panel to preview your componentsTypography
componentTypography
component with text styles inherited from @carbon/type
Checkbox
component to not change state when clickedHeader
componentHeaderGlobalAction
component in favour of setting it via a property control on the Header
Accordion
to not be positioned correctlyInlineNotification
, ToastNotification
, Select
, Link
, Tag
, Tabs
, ContentSwitcher
and TextInput
components to be used with Framer’s InteractionsTag
component when first inserted on the canvasToastNotification
were changedToggle
component on/off to have no effectTooltip
component to render incorrectlyTooltip
component. This will not display on the canvas due to it using a React Portal which causes it to be absolutely positioned on the canvas.onTap
event not firing for the Button
componentSelect
component having no effectTextInput
componentcarbon-components.css
stylesheet to prevent it overriding Framer’s UI