adding FigmaImage component and script

Author: lukasoppermann

.github/workflows/getFigmaImages.yml

@@ -2,23 +2,40 @@ name: Get Figma Images
 
 on:
   push:
-    branches:
-      - main
+    # branches:
+    #   - main
 
 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: npm ci --no-audit --no-fund --include=dev --ignore-scripts
+        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
+      

content/components/avatar.mdx

@@ -13,6 +13,7 @@ import {Box, Text} from '@primer/react'
 import ComponentLayout from '~/src/layouts/component-layout'
 export default ComponentLayout
 import {AccessibilityLink} from '~/src/components/accessibility-link'
+import {FigmaImage} from '~/src/components/figma-image'
 
 <img
   width="960"
@@ -37,7 +38,7 @@ Avatars start at 16px and increment by base-4 until 32px. At 32px, the scale swi
   src="https://user-images.githubusercontent.com/586552/207139770-429f7327-c3e5-4e38-aa58-185a03d82304.png"
 />
 
-<img
+<FigmaImage
   width="960"
   alt="Demo"
   src="https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=eruKCwLaYv3FX2Vu-4"

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",

scripts/getFigmaImages.js

@@ -31,7 +31,7 @@ const run = async () => {
   // get all files that match the file glob
   const files = await fastGlob([fileGlob])
   // define the regex pattern to search
-  const pattern = /<img\s+[^>]*src="([^"]+)"[^>]*>/g
+  const pattern = /<FigmaImage\s+[^>]*src="([^"]+)"[^>]*>/g
   // find matches in find
   const matches = await findMatches(pattern, files)
   // output result

src/components/figma-image.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {parseFigmaNodeUrl} from '@primer/figma-images/src/utils';
+import { Link } from '@primer/react';
+
+type FigmaImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string
+  caption?: string
+}
+
+const FigmaImageDir = 'content/images/figma';
+
+export const FigmaImage: React.FC<FigmaImageProps> = ({src, caption, ...props}) => {
+  // check for missing prop
+  if(src === undefined) throw new Error("src is required on FigmaImage component");
+  // get real image url
+  const {nodeId, fileId} = parseFigmaNodeUrl(src);
+  const imagePath = `${FigmaImageDir}/${fileId}-${nodeId}.png`
+  // return image component
+  return (<figure>
+    <img src={imagePath} {...props}/>
+    <figcaption>{caption}<Link href={src}>Edit Image</Link></figcaption>
+  </figure>)
+}