Skip to content

Latest commit

 

History

History
60 lines (41 loc) · 1.85 KB

README.md

File metadata and controls

60 lines (41 loc) · 1.85 KB
Raw

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