Figma kit & token sync #29

Activity

1. n4ff4h

   added a parent issue on Oct 7, 2026

   • Epic: Onu v1 — implement REQUIREMENTS.md #2
2. n4ff4h

   added 2 commits that reference this issue on Oct 7, 2026

   Add guides, Figma token sync, Playwright E2E (a11y, visual, Thaana); …

   ...

   3f78afe

   Docs: forms & Laravel validation guide; Figma Code Connect manifest a…

   ...

   be18d19
3. n4ff4h commented on Oct 7, 2026

   

   n4ff4h

   on Oct 7, 2026 – with Claude

   CollaboratorAuthor

   More actions

   In place:

   • figma/sync-variables.mjs pushes tokens to the Figma Variables REST API and also writes tokens-studio.json.
   • figma/components.json lists 224 components, now including Hero and FeatureGrid.
   • figma/generate-code-connect.mjs writes a Code Connect file for each component once its figmaUrl is filled in.

   Blocked: the Figma kit file itself needs a Figma workspace and an access token. Every component's figmaUrl is empty until that file exists.

   ---

   Generated by Claude Code
4. n4ff4h

   added 3 commits that reference this issue on Oct 14, 2026

   Figma workflow: probe the token's access to the Onu file, sync variables

   ...

   83ccac6

   Figma workflow: set up pnpm before Node (packageManager field)

   ...

   793c124

   Figma kit: "Onu kit" plugin that generates the library (#29)

   ...

   6f1919c
5. n4ff4h commented on Oct 14, 2026

   

   n4ff4h

   on Oct 14, 2026 – with Claude

   CollaboratorAuthor

   More actions

   Progress, merged in 85898ad:

   • The "Onu kit" Figma plugin (figma/plugin/). Figma's REST API can't create components, so a designer runs this plugin in the Claudius file. It creates:

     • Variables: colour (Light/Dark), density and shape.
     • Text styles: Inter, MV Waheed/Faruma with Noto Sans Thaana as fallback, JetBrains Mono.
     • 41 icons.
     • 27 component sets whose properties use the React prop names and cva values (checked against the source by tests).
     • Pages per category, plus admin dashboard and application form sample frames.

     Re-running updates in place. Steps are in figma/README.md.

   • Node URLs. figma/apply-node-ids.mjs writes the plugin's node URLs into components.json. 26 wrong mappings were fixed, including MapChart and MapProvider.

   • .github/workflows/figma.yml (run by hand) checks the token's access to the file and can push variables over REST. That needs an Enterprise plan; the plugin route works on any paid plan. Its last run got an empty FIGMA_API_KEY, so the secret needs to be an Actions repository secret.

   Left before closing:

   1. A designer runs the plugin in the file. It has only been tested against a mocked Figma API.
   2. Paste the node ids back.
   3. Publish the library, and Code Connect if the plan allows it.

   ---

   Generated by Claude Code
6. n4ff4h commented on Oct 15, 2026

   

   n4ff4h

   on Oct 15, 2026 – with Claude

   CollaboratorAuthor

   More actions

   Figma probe with the new FIGMA_API_KEY (run):

   • The token works: user "Naffah"; the file "Claudius" is in the "Claude Design" folder.
   • The account's role on the file is viewer. To run the kit plugin, the designer running it needs edit access to the file.
   • The file is empty (one page, no components or styles), so the kit hasn't been generated yet.
   • The Variables REST API returns 403 because the token lacks the file_variables:read/write scopes (and that API needs an Enterprise plan). The plugin creates the variables instead, so this isn't needed.

   Next: someone with edit access runs the "Onu kit" plugin (figma/README.md). The plugin now uses Faruma and MV Faseyha for Thaana text styles (b0a15d7).

   ---

   Generated by Claude Code
7. n4ff4h

   added 2 commits that reference this issue on Oct 15, 2026

   Figma probe: list each page's top-level nodes, component sets and styles

   ...

   b4c7733

   Figma: target the Onu_Claude file; workflow takes a file key

   ...

   07d9d2b
8. n4ff4h commented on Oct 15, 2026

   

   n4ff4h

   on Oct 15, 2026 – with Claude

   CollaboratorAuthor

   More actions

   Kept open until the kit is generated in Figma. The target file is now Onu_Claude (https://www.figma.com/design/koHmHh7QJWX8BPN6KusMg9/Onu_Claude). The plugin, apply-node-ids.mjs and the Figma workflow point at it as of 07d9d2b. FIGMA_API_KEY works and the account owns the file. The file is still empty as of 2026-10-15 07:03 UTC.

   To do (in the Figma desktop app):

   1. Pull main and open Onu_Claude.
   2. Optional: install Faruma and MV Faseyha locally (packages/onu/src/styles/fonts/).
   3. Plugins → Development → Import plugin from manifest… → figma/plugin/manifest.json.
   4. Plugins → Development → Onu kit → Generate.
   5. Copy the JSON the plugin shows at the end.

   Then:

   • Run the Figma workflow (Actions → Figma → probe) to confirm the kit was created.
   • node figma/apply-node-ids.mjs with the JSON, to fill figmaUrl in figma/components.json.
   • Publish the library. Code Connect publishing needs an Organization or Enterprise plan.

   ---

   Generated by Claude Code