Export selected Figma root for Studio imports

docs/figma-studio-runner.md

@@ -1,12 +1,12 @@
 # Figma to WordPress Studio
 
-`plugins/figma-to-wordpress-studio` moves a Figma file into WordPress by posting a Studio import source to the local WordPress Studio app. Studio creates the site and imports the result with Static Site Importer and Blocks Engine.
+`plugins/figma-to-wordpress-studio` moves selected Figma scene data into WordPress by posting a Studio import source to the local WordPress Studio app. Studio creates the site and imports the result with Static Site Importer and Blocks Engine.
 
 ## Architecture
 
 ```text
 Figma plugin UI
-  -> Figma document scene data
+  -> selected Figma scene data, or current page when nothing is selected
   -> Studio import artifact JSON
   -> local WordPress Studio handoff endpoint
   -> WordPress Studio site
@@ -41,7 +41,7 @@ Implemented now:
 
 - `GeneratedWebsiteArtifact` for static generated files from Figma.
 - `blocks-engine/php-transformer/site-artifact/v1` for the Studio CLI artifact handoff.
-- A Figma UI client that posts the artifact JSON to local Studio.
+- A Figma UI client that posts the selected-frame/current-page artifact JSON to local Studio.
 
 Not implemented yet:
 
@@ -61,7 +61,7 @@ Figma development test:
 
 1. Run `npm run build --prefix plugins/figma-to-wordpress-studio`.
 2. Load `plugins/figma-to-wordpress-studio/manifest.json` as a Figma development plugin.
-3. Run the plugin.
+3. Select the frame or website nodes to import, then run the plugin. If nothing is selected, the plugin imports the current page.
 4. Start a compatible WordPress Studio build.
 5. Use `Open in WordPress Studio`.
 6. Studio creates the site and opens the local site URL in your browser. If Studio is not reachable, the plugin reports the connection error.

plugins/figma-to-wordpress-studio/README.md

@@ -1,14 +1,14 @@
 # Figma to WordPress Studio
 
-This plugin moves a Figma file into WordPress by sending a Studio import payload to the local WordPress Studio app.
+This plugin moves a selected Figma frame, selected nodes, or the current Figma page into WordPress by sending a Studio import payload to the local WordPress Studio app.
 
 It does not port Static Site Importer, Blocks Engine, WordPress, PHP, or Studio internals to TypeScript. The TypeScript code extracts Figma scene data, prepares an artifact JSON source, and posts it to Studio's local handoff endpoint. Studio owns site creation, import through Static Site Importer, and cleanup after a successful import. If Studio is not running, the plugin surfaces the connection error.
 
 ## Flow
 
 ```text
 Figma plugin controller + UI
-  -> whole Figma document scene data
+  -> selected Figma scene data, or current page when nothing is selected
   -> Studio import artifact JSON
   -> local WordPress Studio handoff endpoint
   -> WordPress Studio site
@@ -17,7 +17,7 @@ Figma plugin controller + UI
 
 ## Boundaries
 
-- Implemented: a Figma Desktop-loadable plugin shell with whole-file export.
+- Implemented: a Figma Desktop-loadable plugin shell with selected-frame/current-page export.
 - Implemented: a reusable scene-to-HTML/CSS artifact generator with diagnostics and tests for the current local handoff.
 - Implemented: a Studio local handoff request.
 - Not implemented: running Static Site Importer from TypeScript.
@@ -37,7 +37,7 @@ Figma plugin controller + UI
 1. Run `npm run build --prefix plugins/figma-to-wordpress-studio`.
 2. In Figma Desktop, use Plugins -> Development -> Import plugin from manifest, then select `plugins/figma-to-wordpress-studio/manifest.json`.
 3. Start a compatible WordPress Studio build.
-4. Open the plugin and choose `Open in WordPress Studio`.
+4. Select the frame or website nodes to import, then open the plugin and choose `Open in WordPress Studio`. If nothing is selected, the plugin imports the current page.
 5. Studio creates the site and opens the local site URL in your browser. If Studio is not reachable, the plugin reports the connection error.
 
 For quick syntax verification without a full Figma build pipeline:

plugins/figma-to-wordpress-studio/src/code.ts

@@ -229,25 +229,32 @@ async function exportAsset(node: SceneNode, format: AssetExportFormat, imageHash
 }
 
 async function getDocument(): Promise<NormalizedDocument> {
-  if ("loadAllPagesAsync" in figma) {
-    await figma.loadAllPagesAsync();
+  const context: NormalizeContext = { assets: new Map() };
+  const selectedNodes = figma.currentPage.selection.filter((node) => node.visible !== false);
+  let name = figma.currentPage.name || figma.root.name || "Figma import";
+  let root: NormalizedSceneNode;
+
+  if (selectedNodes.length === 1) {
+    root = await normalizeNode(selectedNodes[0], context);
+    name = selectedNodes[0].name || name;
+  } else {
+    const nodes = selectedNodes.length ? selectedNodes : figma.currentPage.children.filter((node) => node.visible !== false);
+    name = selectedNodes.length ? `${name} selection` : name;
+    root = {
+      id: selectedNodes.length ? `${figma.currentPage.id}:selection` : figma.currentPage.id,
+      name,
+      type: selectedNodes.length ? "SELECTION" : "PAGE",
+      visible: true,
+      children: await Promise.all(nodes.map((node) => normalizeNode(node, context))),
+    };
   }
 
-  const context: NormalizeContext = { assets: new Map() };
-  const pages = await Promise.all(figma.root.children.map((page) => normalizeNode(page, context, "PAGE")));
-  const root: NormalizedSceneNode = {
-    id: figma.root.id,
-    name: figma.root.name || "Figma document",
-    type: "DOCUMENT",
-    visible: true,
-    children: pages,
-  };
   applyDerivedBounds(root);
 
   return {
-    id: figma.root.id,
-    name: figma.root.name || "Figma document",
-    type: "DOCUMENT",
+    id: root.id,
+    name,
+    type: root.type,
     exportedAt: new Date().toISOString(),
     root,
     assets: Array.from(context.assets.values()),

plugins/figma-to-wordpress-studio/src/ui.ts

@@ -112,7 +112,7 @@ function renderSelection(selection: NormalizedSelection | null, artifact: Genera
       diagnostics: diagnosticCount,
       ...artifactBundleSummary(artifact),
     });
-    setStatus(`Ready to import ${screenCount} design screen${screenCount === 1 ? "" : "s"} into WordPress${diagnosticCount ? ` (${diagnosticCount} note${diagnosticCount === 1 ? "" : "s"})` : ""}.`);
+    setStatus(`Ready to import ${selection.name} into WordPress${diagnosticCount ? ` (${diagnosticCount} note${diagnosticCount === 1 ? "" : "s"})` : ""}.`);
   }
 
   updateActions();