assemble

.github/workflows/getFigmaImages.yml

@@ -8,17 +8,34 @@ on:
 jobs:
   findNodeReferences:
     runs-on: ubuntu-latest
+    env:
+      FilesToScan: '**/*.mdx'
+      ImageUrlFile: figmaImageNodeUrls.json
+      ImageOutputDir: content/images/figma
+      FigmaToken: ${{ secrets.FIGMA_TOKEN }}
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
           node-version: 20
-          cache: 'npm'
+          cache: 'yarn'
       - name: Install dependencies
         run: yarn
       - name: Get Figma Images
-        run: node scripts/getFigmaImages.js '**/*.mdx' > figmaImageNodeUrls.json
+        run: node scripts/getFigmaImages.js "${{env.FilesToScan}}" > ${{env.ImageUrlFile}}
       - name: Log file content
-        run: cat figmaImageNodeUrls.json
+        run: cat ${{env.ImageUrlFile}}
+      - name: Download images from figma
+        run: npx @primer/figma-images --figmaToken ${{env.FigmaToken}} --nodeURLsFile ${{env.ImageUrlFile}} --outputDir ${{env.ImageOutputDir}}
+      - name: Log output dir content
+        run: ls ${{env.ImageOutputDir}}
+      - name: Add images to repo
+        run: |
+          git config --global user.name 'Figma Images Action'
+          git config --global user.email '[email protected]'
+          git add -A ${{env.ImageOutputDir}}
+          git commit -m "Update Figma images"
+          git push
+      

package.json

@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@github/markdownlint-github": "^0.3.0",
+    "@primer/figma-images": "^0.1.1",
     "esm": "^3.2.25",
     "fast-glob": "^3.3.2",
     "markdownlint-cli2": "^0.5.1",

src/components/figma-image.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import Images from '../../content/FigmaImageSources.json';
-
+import {parseFigmaNodeUrl} from '@primer/figma-images/src/utils';
 
 type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string
 }
 
+const FigmaImageDir = 'content/images/figma';
+
 export const FigmaImage: React.FC<FigmaImageProps> = ({src, ...props}) => {
   // check for missing prop
   if(src === undefined) throw new Error("src is required on FigmaImage component");
   // get real image url
-  const realImageSrc = Images[src]
-  if (realImageSrc === undefined) throw new Error(`Image with src ${src} not found in FigmaImageSources.json`);
+  const {nodeId, fileId} = parseFigmaNodeUrl(src);
+  const imagePath = `${FigmaImageDir}/${fileId}-${nodeId}.png`
   // return image component
-  return (<img src={realImageSrc} {...props}/>)
+  return (<img src={imagePath} {...props}/><Link href={src}>Edit Image</Link>)
 }