{"id":23886292,"url":"https://github.com/picsart/picsart-figma-plugin","last_synced_at":"2026-05-17T10:36:28.923Z","repository":{"id":267421152,"uuid":"893812892","full_name":"PicsArt/picsart-figma-plugin","owner":"PicsArt","description":"Picsart Plugin for Figma. Includes Remove Background and Upscale.","archived":false,"fork":false,"pushed_at":"2025-01-14T12:24:20.000Z","size":2125,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T03:43:14.420Z","etag":null,"topics":["creative","editing","enhance","enhance-image","enhance-image-quality","figma","figma-plugin","image","image-enhancement-software","image-enhancer","image-manipulation","image-upscaler","image-upscaling-software","media","photo-editing","remove-background","remove-background-image","upscale","upscale-image"],"latest_commit_sha":null,"homepage":"https://picsart.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PicsArt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-25T08:58:46.000Z","updated_at":"2025-01-14T12:24:19.000Z","dependencies_parsed_at":"2024-12-10T09:18:36.291Z","dependency_job_id":"d3c698ac-10c6-405a-94a8-22b1c9fa84ff","html_url":"https://github.com/PicsArt/picsart-figma-plugin","commit_stats":null,"previous_names":["picsart/picsart-figma-plugin"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PicsArt%2Fpicsart-figma-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PicsArt%2Fpicsart-figma-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PicsArt%2Fpicsart-figma-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PicsArt%2Fpicsart-figma-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PicsArt","download_url":"https://codeload.github.com/PicsArt/picsart-figma-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240266853,"owners_count":19774072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creative","editing","enhance","enhance-image","enhance-image-quality","figma","figma-plugin","image","image-enhancement-software","image-enhancer","image-manipulation","image-upscaler","image-upscaling-software","media","photo-editing","remove-background","remove-background-image","upscale","upscale-image"],"created_at":"2025-01-04T06:18:35.396Z","updated_at":"2026-05-17T10:36:28.870Z","avatar_url":"https://github.com/PicsArt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# 🚀 Figma Plugin - Figma-Plugin-RemoveBg-Upscale 🎨\n\n## How to Run the Plugin 🛠️\n\n1. **Clone the Project**  \n   Clone the repository to your local machine:\n\n   ```bash\n   git clone [your-repo-url]\n   cd [your-repo-directory]\n   ```\n\n2. **Install Dependencies**  \n   Run the following command to install all required dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. **Run the Plugin**  \n   Use the following commands to start or build the plugin:\n   - To start development mode with hot reloading: 🔄\n     ```bash\n     npm run watch\n     ```\n   - To serve the plugin with a local development server: 💻\n     ```bash\n     npm start\n     ```\n   - To create a production build: 🏗️\n     ```bash\n     npm run build\n     ```\n\n   Here are the scripts defined in `package.json`:\n   ```json\n   \"scripts\": {\n     \"build\": \"webpack\",\n     \"watch\": \"webpack --watch\",\n     \"start\": \"webpack serve\"\n   }\n   ```\n\n## How to Add the Plugin to Figma 🖼️\n\n1. **Open Figma**  \n   Open Figma and navigate to your working page.\n\n2. **Add the Plugin**  \n   Right-click on the page and go to **Plugins** \u003e **Manage Plugins**.\n\n3. **Add this Project Manifest**  \n   In the **Manage Plugins** section, add the plugin by selecting this project's `manifest.json`.\n\n4. **Watch Mode**  \n   If running in watch mode, changes to the sandbox code z(`code.ts`) will automatically update. However, changes to iframe (UI) code (`ui.tsx`) will require reloading the plugin.\n\n## 📂 Updated Project Structure\n\nThe project is organized as follows:\n- **assets/**  \n  Contains application assets including constants and configuration files.\n  - **constants/**  \n    - `commands.ts`\n    - `env.ts`\n    - `errorMessages.ts`\n    - `index.ts`\n    - `messages.ts`\n    - `routes.ts`\n    - `types.ts`\n    - `url.ts`\n- **controllers/**  \n  Contains the business logic and controllers for commands.\n    - `AccountController.ts`\n    - `ChangeApiKeyController.ts`\n    - `IntroController.ts`\n    - `RemoveBackgroundController.ts`\n    - `SupportController.ts`\n    - `EnhanceController.ts`\n    - `index.ts`\n- **dist/**  \n  Contains bundled and built files for the plugin.\n- **node_modules/**  \n  Dependencies installed via `npm install`.\n- **public/**  \n  Static assets for the plugin, e.g., HTML templates.\n- **routes/**  \n  Routing logic for commands.\n  - `CommandRouter.ts`\n- **services/**  \n  Service files for specific utilities or APIs.\n  - `ImageProcessor.ts`\n- **src/**  \n  Contains the source code for the plugin's frontend (UI).\n  - **components/**  \n    Contains React components for the UI.\n    - `Account/`\n    - `ChangeAPIkey/`\n    - `IntroPage/`\n    - `LoadingSpinner/`\n    - `RemoveBackground/`\n    - `Selector/`\n    - `Support/`\n    - `Upscale/`\n  - **styles/**  \n    Contains global and component-specific SCSS files.\n    - `_colors.scss`\n    - `_variables.scss`\n    - `global.scss`\n  - **utils/**  \n    Utility functions and helpers.\n    - `imageProcessor.ts`\n    - `code.ts`\n  - `ui.tsx`  \n    Main UI logic for the plugin.\n- **manifest.json**  \n  Configuration file for the Figma plugin.\n- **package.json**  \n  Project metadata and dependencies.\n- **package-lock.json**  \n  Dependency tree lock file.\n- **README.md**  \n  Documentation for the project.\n- **tsconfig.json**  \n  TypeScript configuration file.\n\n## ➕ Adding a New Command\n\nCommands are registered in `manifest.json` and linked in `routes.ts`. Follow these steps to add a new command:\n\n1. Register your command in `manifest.json`.\n2. Add the controller in the `controllers/` directory.\n3. Update the `index.ts` in the `controllers/` folder to include the new controller.\n4. Add the route in `routes.ts`.\n5. Create a UI component for the command in `src/components/`.\n\n**Example of `routes.ts`:**\n```typescript\nimport commands from \"./commands\";\nimport controllersIndex from \"@controllers/index\";\n\nconst ROUTES = {\n    [commands.COMMAND_REMOVEBACKGROUND]: controllersIndex.RemoveBackgroundController,\n    [commands.COMMAND_UPSCALE]: controllersIndex.EnhanceController,\n    [commands.COMMAND_ACCOUNT]: controllersIndex.AccountController,\n    [commands.COMMAND_SUPPORT]: controllersIndex.SupportController,\n};\n\nexport default ROUTES;\n```\n\n---\n\n## 🖥️ UI Code Example (`ui.tsx`)\n\nBelow is an example of the UI logic:\n\n```typescript\nimport React, { useEffect, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { IntroPage, Account, ChangeAPIkey, Support, RemoveBackground, Upscale, LoadingSpinner } from '@components/index';\nimport { NO_INTERNET_ERR, TYPE_COMMAND, TYPE_IMAGEBYTES, TYPE_KEY, COMMAND_REMOVEBACKGROUND, COMMAND_ACCOUNT, COMMAND_SUPPORT, COMMAND_UPSCALE, COMMAND_INTRO, COMMAND_CHANGE_API_KEY } from \"@constants/index\";\nimport '@styles/global.scss';\n\nconst App = () =\u003e {\n  if (navigator.onLine === false) {\n    parent.postMessage({ pluginMessage: NO_INTERNET_ERR }, \"*\");\n  }\n\n  const [page, setPage] = useState\u003cJSX.Element | null\u003e(null);\n  const [apiKey, setApiKey] = useState\u003cstring\u003e('');\n  const [command, setCommand] = useState\u003cstring\u003e('');\n  const [imageBytes, setImageBytes] = useState\u003cUint8Array\u003e(new Uint8Array());\n\n  const setPageLogic = () =\u003e {\n    switch (command) {\n      case COMMAND_REMOVEBACKGROUND:\n        setPage(\u003cRemoveBackground imageBytes={imageBytes} gottenKey={apiKey} /\u003e);\n        break;\n      case COMMAND_UPSCALE:\n        setPage(\u003cUpscale imageBytes={imageBytes} gottenKey={apiKey} /\u003e);\n        break;\n      case COMMAND_ACCOUNT:\n        setPage(\u003cAccount gottenKey={apiKey} /\u003e);\n        break;\n      case COMMAND_SUPPORT:\n        setPage(\u003cSupport /\u003e);\n        break;\n      case COMMAND_INTRO:\n        setPage(\u003cIntroPage /\u003e);\n        break;\n      case COMMAND_CHANGE_API_KEY:\n        setPage(\u003cChangeAPIkey handleClose={() =\u003e {}} /\u003e);\n        break;\n      default:\n        setPage(null);\n    }\n  };\n\n  useEffect(() =\u003e {\n    const messageHandler = (event: MessageEvent) =\u003e {\n      const { pluginMessage } = event.data;\n\n      if (pluginMessage) {\n        if (pluginMessage.type === TYPE_KEY) setApiKey(pluginMessage.api_key);\n        if (pluginMessage.type === TYPE_IMAGEBYTES) setImageBytes(pluginMessage.buffer);\n        if (pluginMessage.type === TYPE_COMMAND) setCommand(pluginMessage.command);\n      }\n    };\n\n    window.addEventListener('message', messageHandler);\n\n    return () =\u003e {\n      window.removeEventListener('message', messageHandler);\n    };\n  }, []);\n\n  useEffect(() =\u003e {\n    setPageLogic();\n  }, [command, apiKey]);\n\n  return (\n    \u003cdiv className=\"root\"\u003e\n      {page ? page : \u003cLoadingSpinner /\u003e}\n    \u003c/div\u003e\n  );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = createRoot(rootElement);\n  root.render(\u003cApp /\u003e);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicsart%2Fpicsart-figma-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicsart%2Fpicsart-figma-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicsart%2Fpicsart-figma-plugin/lists"}