https://github.com/prorupak/figma-plugin-sample

https://github.com/prorupak/figma-plugin-sample

expressjs figma-plugin firebase firebase-realtime-database javascript pkce-authentication typescript

Last synced: about 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/prorupak/figma-plugin-sample
• Owner: Prorupak
• License: mit
• Created: 2024-08-27T13:44:13.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-17T05:56:30.000Z (almost 2 years ago)
• Last Synced: 2025-03-23T03:32:39.138Z (over 1 year ago)
• Topics: expressjs, figma-plugin, firebase, firebase-realtime-database, javascript, pkce-authentication, typescript
• Language: TypeScript
• Homepage:
• Size: 262 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Sample Figma Plugin Documentation

### Overview

This project is a Figma plugin that helps users search and navigate text within their Figma documents. It includes a server-side application for authentication and user management using Firebase.

### Project Structure

 - plugin/: Contains the Figma plugin using ReactJS and TypeScript.

 - server/: Contains the backend server using ExpressJS,

   TypeScript, and Firebase.

 - package.json: Defines scripts for building, starting, and linting

   both the plugin and server.

### User Flow

 ### 1. Login Flow:

 - The user opens the Figma app and navigates to the plugin.

 - The plugin displays a login page. The user clicks the login button,

   redirecting them to a separate browser page.

 - If the user clicks "Cancel," the plugin closes. If not, they grant

   permission to the plugin.

 - Upon granting permission, the user is logged in, and an account is

   created in Firebase if needed.

 ### 2. Text Finder Flow:

 - After logging in, the user sees the Text Finder UI.

 - The user can search for terms (e.g., "plugins"). If results are

   found, they can navigate through them.

 - Clicking "Next" and "Previous" navigates between occurrences.

### Development

 - Start Plugin: pnpm start-plugin

 - Start Server: pnpm start-server

 - Build Plugin: pnpm build-plugin

 - Build Server: pnpm build-server

 - Lint Plugin: pnpm lint-plugin

 - Lint Server: pnpm lint-server

 - Concurrent Development: pnpm start

### Installation

To initialize the project:

    pnpm run init-project

### Running the Project 

To run the project in development mode:

    pnpm start

To build the project for production:

    pnpm build

### Flowchart

[View on Eraser![](https://app.eraser.io/workspace/F8VBcW2fbVxhed41JoDf/preview?elements=DDu_7JVK97cpk7MpjcFMUQ&type=embed)](https://app.eraser.io/workspace/F8VBcW2fbVxhed41JoDf?elements=DDu_7JVK97cpk7MpjcFMUQ)