Introducing the Data Viz Figma Kit: Alpha release
We’re excited to announce that a Data Visualization kit is coming to Figma! With this Alpha release, IBMers can access commonly-used charts like Bar, Line, and Area. A Beta release and then a fully stable, public v1.0 is also on the way.
Transitioning to Figma
For a good while now, our design community has rightfully been beating down our doors for a Carbon Data Visualization Figma kit. (Hot take: we didn’t have an actual kit back in the Sketch days either!) In the before-times we had a Sketch file with SVGs that designers had to modify manually — no symbols, no palettes, no tokens, no layer styles — just vectors. And that marginally helpful file has sat untouched and unloved since it was released years ago.
Enter IBM’s stellar Figma community of contributors. IBM stepped onto the scene in a big way as a leader in Figma design tooling over the past year and a half. Our Figma experts have pushed the envelope on what the tool can do for Carbon Design System libraries and team productivity, while simultaneously building an impressive contribution framework and governance model.
One-by-one, this community has helped transition key Carbon Design System kits from Sketch to Figma and now, the day has finally come for our charting fans! The Alpha release of the Carbon Data Visualization design kit is set to drop for general use within IBM on Friday, May 12, 2023! Tell all your friends!
Why this kit is so unique
Charting kits in general require an enormous amount of detail and planning. The level of configurability offered by this kit in particular is unprecedented. This approach to creating customizable charts in a design tool offers a stark contrast to most other charting kits, which often contain non-component based placeholder graphics.
Designers will be able to insert responsive charts into their file and begin customizing the properties—all without detaching any components. This kit not only leverages all of Figma’s latest features, but pushes the envelope with innovative techniques like slots, aspect ratios, and resizers to make each chart fluid and customizable.
The goal of the Alpha release
Until now, the work-in-progress kit has only been available to the Figma Guild. Now we’re inviting the entire IBM Design community to experiment with it so we can raise awareness, gather user feedback (maybe even stoke new contribution) and continually improve. Soon we intend to do a follow-on Beta Release and then finally, a fully stable v1.0.
What’s included
The Figma Governance Board’s release strategy previously included only WIP and Beta kit releases, but due to high-demand and limited resources, they’ve added an Alpha release designation.
Although the Alpha kit won’t fully deliver to your team’s production requirements, we wanted to stabilize commonly-used charts like Bar, Line and Area and get them into the hands of designers as soon as possible. The release will also give the wider community a chance to play with charting components that are still in progress.
Tracking chart statuses
You’ll notice that the kit uses status indicators as part of the naming convention of a page. As a contributor makes progress on a page, they’ll update the page’s status indicator appropriately. When a contribution is ready and has been approved, a reviewer will be responsible for updating it with the “Completed” status indicator.
🔴 Not started—Components have not been assigned, work hasn’t started
🟡 In progress—Components have been assigned, work is in progress
🟢 Ready for review—Components are close to done and in review
✅ Completed—Components are finished and fully reviewed (this badge will be removed when publishing)
🤔 Potential contributions—Components that may be added to the library as contributions in the future
How to deliver feedback or contribute
If you want to help the Data Viz Figma effort along, get involved as a contributor or even a reviewer! After digging into the new kit, check out the Figma Guild’s contribution guidelines, and then get in touch with someone from the maintainer team listed below or in the Status tracking page.
Our contribution process even makes use of Figma’s branching capabilities, giving designers room to explore safely without affecting the main file. Contributors and reviewers can preview any changes before merging them into the main kit — just like Git! I had no idea we were so buttoned up!
Feel free to provide feedback, ask questions, and leave comments in the #figma-guild Slack channel, or leave a comment directly on the library or template file. Be sure to tag one of the file owners in your comment.
Where to get the link
IBMers! This Friday, May 12th, we’ll blast a link to the kit in the following Slack channels:
—#carbon-charts
—#carbon-charts-design
—#carbon-design-system
—#figma-guild
—#ibm-ct-qdr
—#ibmproducts-pal
—#ibm-design-language
While in Alpha, you can find the kit in Figma’s library asset panel under the Figma Guild team. In the future it will be under the IBM Design Systems team.
The team
This release was made possible by the joint efforts of Juan Encalada, Patrick Clough, Eugene To, Enzo Colasante, and Tomáš Makán (with special thanks to Tomáš for pulling us all together and kicking off this effort in the first place!). Eliad Moosavi and I consulted when needed, but the team made our job extraordinarily easy with their preparation and thorough knowledge of the Carbon-Charts library. Also shout out to Hope Brandes and Kathleen O’Brien for signing on as reviewers!
Stay tuned for more updates! The Alpha is just the beginning and we look forward to a public release later this year.
