This package bundles visa chart components and provides them to Figma users/designers by way of a plugin. We leverage stencil's react bindings in the creation of @visa/charts-figma.
note: the initial install and build process can take some time.
- Clone the repo
- run
yarn install - run
yarn dev --ito install the monorepo - run
yarn dev --bto build the packages across the monorepo - run
yarn dev --sfto run the plugin ORyarn build --scope=@visa/charts-figmato build the plugin - In the Figma Desktop App go to the Plugins Menu > Development > Manage Plugins in development
- Click the + and select "import plugin from manifest"
- Navigate to your cloned folder and select the "packages/charts-figma/manifest.json" and click "Open".
- You should see a message that says "Visa Chart Components has been imported"
- To run the plugin, go back to the Plugin Menu > Development > Select "Visa Chart Components" and the plugin will run.
- @visa/bar-chart
- @visa/clustered-bar-chart
- @visa/stacked-bar-chart
- @visa/line-chart
- @visa/pie-chart
- @visa/scatter-plot
- @visa/heat-map
- @visa/circle-packing
- @visa/parallel-plot
- @visa/world-map
- @visa/alluvial-diagram
# Using VCC in Figma
Step 1: Open Figma Desktop and add Visa Chart Components plugin (see steps above)
Step 2: Run the plugin in Figma
Step 3: Select a chart type by clicking on its respective card.
Step 4: Select a chart style by clicking on its respective card.
Step 5: Randomize data, interact with chart to change state and create in Figma. Create many charts if needed.
Step 5a: Close plugin when chart creations are completed
Step 6: Continue your design work with charts made directly with Figma nodes.
In addition to the core project team, special thanks to Skyler Knight (personal) for his assistance in development the VCC Figma plugin.