kascade.design

Automatically identify style systems and export to Figma and other tools while browsing webpages with Kascade.

Latest Version

Version

1.1.1

Update

November 13, 2024

Size

679KiB

Developer

kascade.design

Kascade Extension

◾️Simplify your workflow and streamline your design process with ease. Kascade automatically surfaces style systems and allows you to export your findings to Figma and other tools while browsing web pages.

◾️Collect all styles in one fast move
– Identify type foundries, typographic styles, rogue font instances
– Extract the exact color palette
We extract and summarise type information from a live webpage to speed up your design workflow and get you off to a well informed simple start.

◾️Detect foundational rules automatically
– Identify the common type-scale on any page
– Enjoy effortless type-scale detection and nearest harmonic scales
We aim to help you create the foundations of a robust and scalable design system by quickly identifying typographic harmony.

◾️Integrates into your workflow
– Export to Figma, the use our Figma plugin to instantly layout those styles
– Export to Tailwind to get going directly into the CSS
You can export the start of your next piece of work incredibly fast. ‍Generate what you need and move on to the next stage of your work. The rest is up to you, but you will have a well-informed foundation.

🆕 Surface images easily
– We've just added the ability to surface images on the web pages you are currently viewing as well for quick reference.
…

💡How it works

◾️How to inspect a web page
With your web page open in the Chrome browser simply open the Kascade extension. The Kascade app will open in a side panel next to the site inside the browser, wait for the inspection to run and the panel should display the results.   

◾️To explore the Type style instances
Click the instances arrow to activate the highlights in the page and show any visible instance on the live page. You can also use the top right chevron in each Type style panel to open and view the most common style group for that element. To reload – If you need to reload the inspection you can use the reload icon in the top of the Kascade panel next to the url.

◾️Export to Figma, How to access the Kascade Figma plugin
You will need to install and use the companion plugin (free) to import into Figma. Once you have installed the plugin into your Figma account you may run the plugin and paste the JSON code you get from the Kascade Chrome extension to create a beautiful style sheet in Figma (Just hit ‘Export to Figma’ and follow the instructions) Access the Kascade Figma plugin from the Figma community – https://www.figma.com/community/plugin/1185105892762864353/kascade

For more information – https://www.kascade.design/faqs

…

◾️FREE 7-day trial.
You can try the full version of Kascade for free for the first 7 days. Simply enter your email and you are in action. No credit card is necessary for trial use.

◾️In-app subscription.
After 7 days your Kascade app will prompt you to sign up for a monthly subscription of $12 USD per month and the Kascade panel will remain available for your continued use.  

◾️Account status 
You should close Kascade and re-open it to see any new subscription on your account page.

…

Made with ❤️ by Kascade
Aotearoa | New Zealand Visit us: kascade.design
Tell us what you think – https://form.jotform.com/232850873450862

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Kascade", "description": "Automatically identify style systems and export to Figma and other tools while browsing webpages with Kascade.", "version": "1.1.1", "action": { "default_title": "Click to open panel", "default_icon": { "16": "images/kascade-16.png", "32": "images/kascade-32.png", "48": "images/kascade-48.png", "128": "images/kascade-128.png" } }, "background": { "service_worker": "styles-profiler-click-listener.js", "scripts:": "dist/ExtPay.js" }, "content_scripts": [ { "matches": [""], "js": ["content.js"] }, { "matches": ["https://extensionpay.com/*"], "js": ["ExtPay.js"], "run_at": "document_start" } ], "icons": { "16": "images/kascade-16.png", "32": "images/kascade-32.png", "48": "images/kascade-48.png", "128": "images/kascade-128.png" }, "permissions": ["activeTab", "tabs", "sidePanel", "contextMenus", "storage", "scripting"], "host_permissions": [""], "side_panel": { "default_path": "index.html" }}

Download CRX(679KiB)