English
See more
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
Extension ID
Languages Support
Permissions
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
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
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
