S Skillteca
Receber por email
Explorar Categorias Coleções Newsletter
← Voltar para o catálogo

figjam-plugin

Segurança Autor: aiskillstore

FigJam plugin development workflow. Use when working on plugin code (code.ts, ui.ts), debugging WebSocket communication, or building the plugin.

367estrelas
Atualizado há 4 meses
Ver no GitHub ↗

Como adicionar

/plugin marketplace add aiskillstore/marketplace

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/figjam-plugin/svg)](https://www.skillteca.com.br/skills/figjam-plugin)

Skills relacionadas

Ver todas de Segurança →

security-research

63k

Habilidade de pesquisa de segurança em Modo Equipe que orquestra 3 caçadores de vulnerabilidades e 2 engenheiros de PoC para auditar um código, provar explorabilidade, classificar causas raiz e calibrar a severidade. É utilizada para revisão de segurança, pesquisa de vulnerabilidades, auditoria de explorabilidade e validação de modelo de ameaças.

Segurança por code-yeongyu

security-scanning-security-dependencies

41.2k

You are a security expert specializing in dependency vulnerability analysis, SBOM generation, and supply chain security. Scan project dependencies across multiple ecosystems to identify vulnerabilities, assess risks, and provide automated remediation strategies.

Segurança #ai #git por sickn33

vulnerability-scanner

41.2k

Advanced vulnerability analysis principles. OWASP 2025, Supply Chain Security, attack surface mapping, risk prioritization.

Segurança #ai #git por sickn33

dependency-management-deps-audit

41.2k

You are a dependency security expert specializing in vulnerability scanning, license compliance, and supply chain security. Analyze project dependencies for known vulnerabilities, licensing issues, outdated packages, and provide actionable remediation strategies.

Segurança #ai #git por sickn33

Alerta por categoria

Receba novas skills de Segurança toda segunda

1 email curto, só com as skills novas de Segurança. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

FigJam Plugin Development

Architecture

Two-thread model:

  • packages/plugin/src/code.ts - Main thread (Figma API, renderer)
  • NO browser APIs (window, document, fetch)
  • Access to figma.* API
  • Renders nodes/edges to FigJam canvas
  • packages/plugin/src/ui.ts - UI iframe (WebSocket client)
  • Browser APIs available
  • Manages WebSocket connection to CLI
  • Handles connection UI

Communication Flow

CLI (serve) ←→ WebSocket ←→ Plugin UI (ui.ts) ←→ postMessage ←→ Plugin Main (code.ts)

JSON Import (UI)

  • Accepts DSL JSON (nodes as array) or IR JSON (nodes as object)
  • Validates with @figram/core and normalizes to IR before posting to main thread
  • Validation errors are surfaced in the UI alert with path/message details

Build

cd packages/plugin && bun run build

Output: packages/plugin/dist/ (code.js, ui.html)

Import Plugin

  1. Open Figma Desktop
  2. Menu → Plugins → Development → Import plugin from manifest
  3. Select packages/plugin/manifest.json

Debugging

  • UI errors: Browser DevTools console (right-click plugin UI → Inspect)
  • Main thread errors: Figma DevTools (Menu → Plugins → Development → Open console)
  • WebSocket issues: Check UI console for connection status

Key Files

  • manifest.json - Plugin configuration
  • src/code.ts - Canvas rendering logic
  • src/ui.ts - WebSocket client and connection UI
  • src/ui.html - UI template (bundled by build)
  • src/icons/ - AWS service icons
Compartilhar X LinkedIn