On March 19, Figma removed the window.figma interface from view-only mode, affecting the Figma CSS Inspector extension. The Figma…

Latest Version

Version
1.0.1
Update
June 15, 2024
Size
1.2MiB
Developer
Category
Users
140
Rating
2.33333 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
See more

Figma CSS Inspector Extension

On March 19, Figma removed the window.figma interface from view-only mode, affecting the Figma CSS Inspector extension. The Figma team has promised to restore it within a few weeks. In the meantime, you can use the extension in edit mode by duplicating the file to your drafts.

The Figma CSS Inspector, designed as a Chrome extension, seamlessly allows both designers and developers to easily extract CSS from Figma designs. This powerful tool significantly smoothes the transition from design to development, delivering the power to generate the CSS code for any object, bitmap, or element within a Figma file, with only one click.

To install this extension, kindly proceed as follows:

1. Launch your Google Chrome browser and navigate to the Chrome Web Store.
2. Utilize the search bar to look for ‘Figma CSS Inspector’.
3. Beside the extension in the search results, click on the ‘ADD TO CHROME’ button.
4. Confirm the addition by clicking ‘Add extension’ in the ensuing pop-up window.
5. You should now see the Figma CSS Inspector icon in the extension area, located to the right of your address bar. Once in Figma, simply click on the icon to begin.

Remember, continual improvements are made possible through the ongoing support from users like you!

Finally, we would like to express our immense gratitude to https://github.com/leadream/figma-viewer-chrome-plugin.

If you appreciate our endeavor and want to contribute, you can support us by buying us a coffee ☕️ via this link https://www.buymeacoffee.com/wakaka233
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "icons": { "16": "16.png", "48": "48.png", "128": "128.png" }, "name": "Figma CSS Inspector", "version": "1.0.1", "action": { "default_popup": "index.html" }, "content_scripts": [ { "js": [ "assets/content.tsx-loader.4d9a4454.js" ], "matches": [ "https://www.figma.com/file/*", "https://www.figma.com/design/*" ], "css": [ "assets/index.36fb78a6.css", "assets/main-world.03d0f2f2.css" ] } ], "permissions": [], "web_accessible_resources": [ { "matches": [ "https://www.figma.com/*" ], "resources": [ "src/content.tsx", "src/assets/*.jpeg", "src/assets/*.svg" ], "use_dynamic_url": false }, { "matches": [ "https://www.figma.com/*", "https://www.figma.com/*" ], "resources": [ "assets/main-world.tsx.d2be26ed.js", "assets/index.df4f5a17.js", "assets/content.tsx.e097e13e.js" ], "use_dynamic_url": true } ]}
Read more

Similar Extensions

icon

Pixelay for Figma Extension · Developer Tools 140 4 ★ 391KiB

icon

html.to.design Extension · Productivity 140 72 ★ 333KiB

icon

Figma Node Inspect Extension · Productivity 140 4 ★ 174KiB

icon

CSS Viewer for Google Chrome™ Extension · Productivity 140 334 ★ 346KiB

icon

CSS Inspector Extension · Developer Tools 140 64 ★ 2.57MiB

icon

Hover inspector like in Zeplin , Figma Extension · Developer Tools 140 29 ★ 122KiB

icon

Web to Figma Extension · Productivity 140 12 ★ 945KiB

icon

Figma to Tokens Extension · Developer Tools 140 0 ★ 25.37KiB

icon

Inspect CSS Extension · Developer Tools 140 24 ★ 404KiB

icon

copy-figma-css Extension · Developer Tools 140 3 ★ 153KiB

icon

fubukicss-tool Extension · Developer Tools 140 13 ★ 165KiB

icon

CSS Inspector Extension · Developer Tools 140 0 ★ 50.77KiB

icon

Figma UI Mod Extension · Productivity 140 3 ★ 662KiB

icon

TemPad Dev Extension · Developer Tools 140 8 ★ 89.63KiB

icon

DesignCode Extension · Developer Tools 140 4 ★ 278KiB

icon

HTML to Figma - by Builder.io Extension · Productivity 140 46 ★ 343KiB

icon

Figma Extension · Productivity 140 27 ★ 1.36MiB

icon

CSS Inspector Extension · Productivity 140 0 ★ 88.9KiB

icon

DesignNext Extension · Developer Tools 140 5 ★ 1.09MiB

icon

Element to Figma Extension · Productivity 140 1 ★ 197KiB

icon

Figma Search Extension · Developer Tools 140 5 ★ 136KiB

icon

RightFont for Figma Extension · Productivity 140 2 ★ 23.07KiB

icon

Jinno: code any React component with AI Extension · Developer Tools 140 38 ★ 18.37MiB

icon

SnipCSS Extension · Developer Tools 140 32 ★ 13.12MiB