Back to Plugins
Kascade

Kascade

Inspect web pages and bring the style system into Figma.

palettestyle audittext stylesstyle setfoundationstyle reporttypedesign systemcolortypographystylesfont

Plugin Preview

Kascade preview

About this plugin

Generate design system foundations – Quickly identify style systems with the Kascade Chrome extension and export style references into Figma.


Find all major type and color style properties at once, right alongside the webpage itself – no more digging around in dev tools!



Import with Kascade – be the style hero.


Effortless and useful style inspection imports


This plugin is the companion import plugin for the Kascade Chrome extension. Kascade instantly inspects styles on web pages and gets the answers you need quickly. All without diving into code.


This plugin helps you quickly import style inspections from Kascade and formats them into a handy style reference set.


No matter what you need to do, Kascade’s style reference sets get you on your way fast.

  • Perform quick style inspections and compare your findings.
  • Get fast baseline styles for a new project or simply find outliers in your pre-release builds.


How it works


FREE imports

This plugin is free to use. The Kascade Chrome extension is a paid subscription with a 7-day free trial.


To import from the Kascade Chrome extension


When in the Kascade Chrome extension press ‘Export To Figma’. Click the 'Copy JSON for Figma' button below, then paste this into the Figma plugin to generate these styles 😄.
The JSON you have copied from The Chrome extension will run a code check and when the code is processed the plugin will generate a new layer in your Figma file and create the Style reference set based on the styles exported from the Chrome extension.


Font replacement

The import of type styles will require in some situations you either follow the link to a suitable Type foundry that provides the relevant Font found in the live site or that you choose to import the styles and use the nearest font in the font stack that you have available on your system.


And many more features to come. Watch this space.


Troubleshooting and Feedback

While we think we have everything covered there may be something we need to know about and fix. If you have any feedback or need some support with an issue using our app please let us know



Made with ❤️ by Kascade

Aotearoa | New Zealand Visit us: kascade.design

Plugin Details

Version4
CreatedDecember 15, 2022
Last UpdatedFebruary 22, 2024
Categorydesign-tools-other
CreatorKascade
Stats294 installs, 40 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma