From 2ab165932c40e20dcde34a743ea642cd8b47e40c Mon Sep 17 00:00:00 2001 From: yiqunw700 Date: Wed, 4 Sep 2024 12:56:39 -0700 Subject: [PATCH] Find vectors and export the images We will firstly find all the vector nodes. For each vector node, find the first frame node ancestor. If all nodes under that frame node are only group nodes, vector nodes or text nodes, we will treat it as a svg drawable and export it. --- .../extended-layout-plugin/manifest.json | 4 +- .../extended-layout-plugin/src/code.ts | 11 ++ .../src/image-res-module.ts | 9 + .../extended-layout-plugin/src/ui.html | 104 ++++++++++- .../src/vector-res-module.ts | 175 ++++++++++++++++++ 5 files changed, 292 insertions(+), 11 deletions(-) create mode 100644 support-figma/extended-layout-plugin/src/vector-res-module.ts diff --git a/support-figma/extended-layout-plugin/manifest.json b/support-figma/extended-layout-plugin/manifest.json index 054774009..57c195c4d 100644 --- a/support-figma/extended-layout-plugin/manifest.json +++ b/support-figma/extended-layout-plugin/manifest.json @@ -18,7 +18,9 @@ { "name": "Generate String Resource", "command": "localization" }, { "name": "Clear String Resource", "command": "clear-localization" }, { "name": "Export Images", "command": "export-images" }, - { "name": "Clear Image Resource", "command": "clear-image-res" } + { "name": "Clear Image Resource", "command": "clear-image-res" }, + { "name": "Export Vectors", "command": "export-vectors" }, + { "name": "Clear Vector Resource", "command": "clear-vector-res" } ] } ], diff --git a/support-figma/extended-layout-plugin/src/code.ts b/support-figma/extended-layout-plugin/src/code.ts index a58d8f8b0..df789e78a 100644 --- a/support-figma/extended-layout-plugin/src/code.ts +++ b/support-figma/extended-layout-plugin/src/code.ts @@ -18,6 +18,7 @@ import * as Utils from "./utils"; import * as Localization from "./localization-module"; import * as DesignSpecs from "./design-spec-module"; import * as ImageRes from "./image-res-module"; +import * as VectorRes from "./vector-res-module"; // Warning component. interface ClippyWarningRun { @@ -564,6 +565,16 @@ if (figma.command === "sync") { }; } else if (figma.command === "clear-image-res") { ImageRes.clear(); +} else if (figma.command === "export-vectors") { + VectorRes.exportAllVectorsAsync(); + figma.ui.onmessage = (msg) => { + if (msg.msg === "show-node") { + Utils.showNode(msg.node); + } else if (msg.msg === "update-vector-res-name") { + } + } +} else if (figma.command === "clear-vector-res") { + } else if (figma.command === "move-plugin-data") { function movePluginDataWithKey(node: BaseNode, key: string) { // Read the private plugin data, write to shared diff --git a/support-figma/extended-layout-plugin/src/image-res-module.ts b/support-figma/extended-layout-plugin/src/image-res-module.ts index 3d470ef90..47682a4c3 100644 --- a/support-figma/extended-layout-plugin/src/image-res-module.ts +++ b/support-figma/extended-layout-plugin/src/image-res-module.ts @@ -242,3 +242,12 @@ function parseCachedImageHashToResMap(imageHashToResNameData?: string) { ); return cachedImageHashToResMap; } + +export function loadImageDrawableResNames(): Array { + let imageResNames = new Array(); + let cachedHashToResMap = loadExportedImages(); + cachedHashToResMap.forEach((resName, _) => imageResNames.push(resName)); + let cachedHashToResMapExcluded = loadNonExportedImages(); + cachedHashToResMapExcluded.forEach((resName, _) => imageResNames.push(resName)); + return imageResNames; +} diff --git a/support-figma/extended-layout-plugin/src/ui.html b/support-figma/extended-layout-plugin/src/ui.html index eec8025dc..ac81eba67 100644 --- a/support-figma/extended-layout-plugin/src/ui.html +++ b/support-figma/extended-layout-plugin/src/ui.html @@ -398,6 +398,18 @@ + +
+
Vector Frames:
+
  • Vector frames will be exported as png files, supporting ldpi, mdpi, hdpi, xhdpi and xxhdpi densities.
    • +
    +
    + +
    + +
    diff --git a/support-figma/extended-layout-plugin/src/vector-res-module.ts b/support-figma/extended-layout-plugin/src/vector-res-module.ts new file mode 100644 index 000000000..3ab03e714 --- /dev/null +++ b/support-figma/extended-layout-plugin/src/vector-res-module.ts @@ -0,0 +1,175 @@ +/** + * Copyright 2024 Google LLC + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { loadImageDrawableResNames } from "./image-res-module"; +import * as Utils from "./utils"; + +const IMAGE_REPLACEMENT_RES_NAME = "image_replacement_res_name"; + +// Node id to vector root(frame node) +const vectorFrames = new Map(); +// Res name to VectorRes map. +const vectorResMap = new Map(); +// Image res names that vector exported images can not use +var existingImageDrawableResNames : Array; + +// ldpi: 0.75x, mdpi: 1x, hdpi: 1.5x, xhdpi: 2x, xxhdpi: 3x, xxxhdpi: 4x according to: +// https://developer.android.com/training/multiscreen/screendensities +// Ignores the 0.5x export option. +interface VectorRes { + resName: string; + nodeId: string; + ldpiBytes: Uint8Array; + mdpiBytes: Uint8Array; + hdpiBytes: Uint8Array; + xhdpiBytes: Uint8Array; + xxhdpiBytes: Uint8Array; +} + +export async function exportAllVectorsAsync(){ + await figma.loadAllPagesAsync(); + + vectorFrames.clear(); + vectorResMap.clear(); + + const vectorNodes = figma.root.findAll((node) => node.type === "VECTOR"); + + for (const vectorNode of vectorNodes) { + const frameAncestor = findFrameAncestor(vectorNode); + if (frameAncestor && isVectorRoot(frameAncestor)) { + vectorFrames.set(frameAncestor.id, frameAncestor); + } + } + + existingImageDrawableResNames = loadImageDrawableResNames(); + for (const [frameNodeId, frameNode] of vectorFrames) { + const cachedResName = getResName(frameNode); + var resName = cachedResName + ? cachedResName + : `ic_${Utils.toSnakeCase(frameNode.name)}`; + var index = 0; + while (vectorResMap.has(resName) || existingImageDrawableResNames.includes(resName)) { + index += 1; + resName = resName + "_" + index; + } + + let vectorRes = { + resName: resName, + nodeId: frameNodeId, + ldpiBytes: await frameNode.exportAsync({ + format: "PNG", + colorProfile: "SRGB", + constraint: { type: "SCALE", value: 0.75 }, + }), + mdpiBytes: await frameNode.exportAsync({ + format: "PNG", + colorProfile: "SRGB", + constraint: { type: "SCALE", value: 1 }, + }), + hdpiBytes: await frameNode.exportAsync({ + format: "PNG", + colorProfile: "SRGB", + constraint: { type: "SCALE", value: 1.5 }, + }), + xhdpiBytes: await frameNode.exportAsync({ + format: "PNG", + colorProfile: "SRGB", + constraint: { type: "SCALE", value: 2 }, + }), + xxhdpiBytes: await frameNode.exportAsync({ + format: "PNG", + colorProfile: "SRGB", + constraint: { type: "SCALE", value: 3 }, + }), + xxxhdpiBytes: await frameNode.exportAsync({ + format: "PNG", + colorProfile: "SRGB", + constraint: { type: "SCALE", value: 4 }, + }), + }; + vectorResMap.set(resName, vectorRes); + setResName(frameNode, resName); + } + + figma.showUI(__html__, { width: 600, height: 600 }); + figma.ui.postMessage({ + msg: "vector-export", + vectorResArray: Array.from(vectorResMap), + existingImageDrawableResNames: existingImageDrawableResNames, + }); +} + +function getResName(node: SceneNode): string { + return node.getSharedPluginData( + Utils.SHARED_PLUGIN_NAMESPACE, + IMAGE_REPLACEMENT_RES_NAME + ); +} + +function setResName(node: SceneNode, resName: string) { + node.setSharedPluginData( + Utils.SHARED_PLUGIN_NAMESPACE, + IMAGE_REPLACEMENT_RES_NAME, + resName + ); +} + +function findFrameAncestor(node: PageNode | SceneNode): FrameNode | undefined { + if (node.parent?.type === "FRAME") { + return node.parent!!; + } + + if (node.parent?.type === "GROUP") { + return findFrameAncestor(node.parent!!); + } + + return undefined; +} + +function isVectorRoot(frameNode: FrameNode): boolean { + for (const childNode of frameNode.children) { + if (!isVectorOrTextOrVectorGroup(childNode)) { + return false; + } + } + return true; +} + +// Returns true if the node is a vector node or a group node with vector as descendants. +function isVectorOrTextOrVectorGroup(node: SceneNode): boolean { + if (node.type === "VECTOR") { + return true; + } + if (node.type === "TEXT") { + return true; + } + if (node.type === "GROUP") { + return isVectorGroup(node); + } + return false; +} + +function isVectorGroup(groupNode: GroupNode): boolean { + for (const childNode of groupNode.children) { + if (childNode.type === "GROUP") { + if (!isVectorGroup(childNode)) { + return false; + } + } else if (childNode.type !== "VECTOR" && childNode.type != "TEXT") { + return false; + } + } + return true; +}