Figma CSS Inspector

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.