CruzMolina / figma-cursor

This plugin allows you to copy all the properties of any group or frame and its child layers in Figma, enabling easy recreation in code using Cursor.

Home Page:https://www.designwithprompts.com/articles/figma-code-plugin

Repository from Github https://github.comCruzMolina/figma-cursorRepository from Github https://github.comCruzMolina/figma-cursor

Figma To Cursor Plugin

This plugin allows you to copy all the properties of any group or frame and its child layers in Figma, enabling easy recreation in code using Cursor.

Installation

  1. Download this project.
  2. Open Figma and navigate to Plugins -> Development -> Import plugin from manifest...
  3. Choose the manifest.json file from this project directory.

Usage

  1. Select a frame or group in Figma (ensure it's not a component; detach if necessary).
  2. Run the plugin and click "Copy to Clipboard".
  3. In Cursor, use the "design this" command and specify the desired positioning.
  4. Paste the copied properties.

Development

  • Run yarn to install dependencies.
  • Run yarn build:watch to start webpack in watch mode.

Build Commands

For Development

  • yarn build:watch: Starts webpack in watch mode for development.

For Production

  • yarn build: Builds the plugin for production.

Tooling

This project uses:

  • React + Webpack
  • TypeScript
  • Prettier precommit hook

Quickstart for Developers

  • Run yarn to install dependencies.
  • Run yarn build:watch to start webpack in watch mode.
  • Open Figma -> Plugins -> Development -> Import plugin from manifest... and choose manifest.json file from this repo.

⭐ To change the UI of your plugin (the react code), start editing App.tsx.
⭐ To interact with the Figma API edit controller.ts.
⭐ Read more on the Figma API Overview.

About

This plugin allows you to copy all the properties of any group or frame and its child layers in Figma, enabling easy recreation in code using Cursor.

https://www.designwithprompts.com/articles/figma-code-plugin

License:MIT License


Languages

Language:TypeScript 51.3%Language:CSS 30.8%Language:JavaScript 17.6%Language:HTML 0.3%