Figma plugins
Figma is great. We all love it, don’t we? But the more you explore its many features, the more roadblocks you encounter. Luckily, Figma allows plugins to overcome many of those limitations and tailor its use to Klaviyo Design’s workflow.
This page lists the internal plugins available for you. These were developed by the Design Systems team.
If you have any issues, questions, or feedback, you can reach out in the #ask-design-system channel on Slack.
Ascent Components
Previously Semi-Components
Currently, there is support for the following custom components:
DataTable (published)
The DataTable component from the OG library.
Features:
- Add/remove row
- Add/remove column
- Toggle pagination
- Show empty state (by removing all rows)
- Select all cells in any row/column
Application Page (published)
A template that can be used as the starting point for designs using the main application structure.
Features:
- Switch between default, narrow, and fluid layouts
- Toggle left and right sidebars
- Toggle the tab header
- Shortcut to select the PageHeader
BarChart
A bar chart visualization. There are four types:
- Default (single bar)
- Grouped
- Stacked
- Divergent
Segmented Bar Chart
A single bar divided into multiple segments.
Features:
- Change the color and size of segments
- Add/remove segments
Handoff
This plugin helps you add component annotations for developers. Simply select a frame and the plugin window will show you the components used in that frame. Drag and Drop one of the component cards and the plugin will add the component card to the canvas and draw a line between the component and the card.
Each component card includes the component name and properties used in the design. It also has a link to the component’s page in Storybook, so developers can easily access component documentation.
Variant Authority
Variant authority helps you manage a component’s variants. For example, have you ever had to select the same layer in every variant? The Variant Authority plugin helps you do just that. Just select a layer in a single variant and click “Select Variants” to select the same layer in every variant. You can also customize a subset of variants, giving you added functionality.
Note: in its 2022 config, Figma added a similar functionality that allows you to select the same layer in all variants natively. So you don’t need to use this extension unless you need to filter which variants should be included in the selection.
