Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,5 @@ bin/
.kotlin
local.properties
kotlin-js-store/
tools/figma-plugin/node_modules/
tools/figma-plugin/dist/
13 changes: 13 additions & 0 deletions tools/figma-plugin/DEVELOPMENT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Figma Plugin Development

## Build and run

- Build converter for Wasm executable: `../../gradlew -p ../../ :sdk:figma:converter:compileProductionExecutableKotlinWasmJs`
- Install plugin package deps: `pnpm install`
- Build plugin assets: `pnpm build`
- Build converter + plugin assets: `pnpm build:all`
- Watch plugin assets: `pnpm watch`

## Reload in Figma

- Reload in Figma after build: `Plugins -> Development -> Hot Reload Plugin`
59 changes: 59 additions & 0 deletions tools/figma-plugin/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Valkyrie Figma Plugin

This package contains a Figma plugin shell for exporting selected icons into Kotlin `ImageVector` source.

## Status

- UI + selection export flow implemented.
- Auto export is enabled by default and can be toggled off.
- Output format supports both backing property and lazy property generation.
- Plugin UI follows Figma light/dark theme tokens.
- Converter runtime is injected into `dist/ui.html` during build.
- Copy and download actions are both supported.

## Scripts

- `pnpm build:converter` - compile Kotlin/Wasm converter executable assets
- `pnpm build` - build plugin assets into `dist/`
- `pnpm build:all` - build converter + plugin assets
- `pnpm watch` - watch mode for development
- `pnpm typecheck` - TypeScript checks

## Rerun in Figma

1. Run `pnpm build:all`
2. In Figma desktop, open `Plugins -> Development -> Hot Reload Plugin`
3. Reopen `Valkyrie ImageVector Export`

## Files

- `manifest.json` - Figma plugin manifest
- `src/main/code.ts` - plugin main thread (selection and SVG export)
- `src/ui/ui.ts` - plugin UI entry and orchestration
- `src/ui/core/` - UI runtime primitives (dom, status, state, api, utils)
- `src/ui/controllers/` - UI request/selection lifecycle controllers
- `src/ui/features/` - conversion, rendering, settings, and bulk actions
- `src/ui/features/converterAdapter.ts` - runtime bridge to Wasm converter
- `src/shared/messages.ts` - typed message contracts between main and UI

## Runtime hookup

`pnpm build` reads these converter outputs:

- `valkyrie-sdk-figma-converter.uninstantiated.mjs`
- `valkyrie-sdk-figma-converter.wasm`

Then build-time injection inlines a Wasm bridge and exposes:

- `window.ValkyrieFigmaWasmConverter.convertSvg(...)`
- `window.ValkyrieFigmaWasmConverter.normalizeIconName(...)`

This avoids external script loading issues in `figma.showUI(__html__)`.

If converter artifacts are missing, build prints warnings and the UI reports that the runtime is not loaded.

## UX notes

- Conversion uses request ids so stale responses do not overwrite newer runs.
- Bulk actions are disabled until at least one successful conversion exists.
- For a single converted icon, the code panel expands and increases code font size for readability.
8 changes: 8 additions & 0 deletions tools/figma-plugin/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"name": "Valkyrie ImageVector Export",
"id": "valkyrie-imagevector-export",
"api": "1.0.0",
"main": "dist/code.js",
"ui": "dist/ui.html",
"editorType": ["figma"]
}
22 changes: 22 additions & 0 deletions tools/figma-plugin/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "@composegears/valkyrie-figma-plugin",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"build:converter": "../../gradlew -p ../../ :sdk:figma:converter:compileProductionExecutableKotlinWasmJs",
"build": "node ./scripts/build.mjs",
"build:all": "pnpm build:converter && pnpm build",
"watch": "node ./scripts/build.mjs --watch",
"typecheck": "tsc --noEmit"
},
"devDependencies": {
"@figma/plugin-typings": "^1.122.0",
"esbuild": "^0.25.10",
"typescript": "^5.9.2"
},
"dependencies": {
"fast-text-encoding": "^1.0.6",
"fflate": "^0.8.2"
}
}
Loading