Preact Rectangles

Development guide

This plugin is built with Create Figma Plugin.

About

This is a figma plugin intended to export text and color styles in a format compatible with Material UI. It seeks to bridge the gap between product design in figma and application in code with MUI by directly transfering styles from between them. The plugin functions by opening a gui panel with options for generating and distributing typescript code objects with the necessary styling. This includes color pallete objects as well as style and style type objets. The primary object for accessible use in code is figmaTypography which contains text styling attributes including font options and spacing. The other typography based objects ensure type checking on styling and conformity with CSSProperties as well as dictating typography to be included in MUI variants.

figmaPalette holds the coloring properties exported from the figma doc in rgba format along with their associated label.

Pre-requisites

• Node.js – v14
• Figma desktop app

Build the plugin

To build the plugin:

$ npm run build

This will generate a manifest.json file and a build/ directory containing the JavaScript bundle(s) for the plugin.

To watch for code changes and rebuild the plugin automatically:

$ npm run watch

Install the plugin

1. In the Figma desktop app, open a Figma document.
2. Search for and run Import plugin from manifest… via the Quick Actions search bar.
3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Open Console via the Quick Actions search bar.

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples