WIP: Export Figma images to github

[bwbroersma]

For all who will not have write access to the Figma, or want a quick peek at the design: would it not be more convenient to export the Figma images to a markdown file that includes these images? Since Figma has an API that can export SVG format images, we could export them version tagged to GitHub.

[bwbroersma]

WIP We should probably export everything with children and maybe git tag it after all:

TOKEN="X-Figma-Token: ***";
API="https://api.figma.com/v1"
KEY="EJ4aJwKnemkxysCZ6aAzFv";
STRUCTURE="$(curl -sSfA '' -H "$TOKEN" "$API/files/$KEY/" | jq '.document.children|map({key:.name,value:.children|map(.id)}|select(.value|length>0))|from_entries' -c)"
IMAGES="$(curl -sSfGA '' -H "$TOKEN" "$API/images/$KEY?format=svg" -d "ids=$(echo "$STRUCTURE" | jq 'to_entries|map(.value)|flatten|join(",")' -cr)" | jq '.images' -cr)"
echo -n "{\"images\":$IMAGES,\"structure\":$STRUCTURE}" | jq '.images as $img|.structure|with_entries(.value|=map($img[.]))'

Show the generated JSON output

```json { "Cover": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/ea2e/059f/de8a2782fa5d3f286a205094fa441072", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f871/113c/7caa7cf8551c3a486368c83816bbb168" ], "0.4": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/ab69/d215/4b7104402463013e8bfcd0b0eb052753", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/bf13/83a0/0bffd828e15cd7280493dd8878dde7e6" ], "0.3": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/21ad/c22c/a7dddfdd63818334f623a08e5e4a05e5", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/07fb/cacf/b5edce9feaecd32a23cec3e938212f1a", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/7b43/de9b/5480fe03f859a87b2935302bba64c635", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b3ef/6324/c2eaeff00b4dc40ea214093a50e991ca", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/1caa/9508/7a181fcbd5f77261ed76db94b3782a62", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/153c/53db/7d5015ce0ef12dc75a0988e47310af33", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/9559/3b96/76488085f2105a438c2d87ab897936e6", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/9d0c/6771/f651cd6865d813c5be96d7a9de9007ff", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/d0d0/cfd9/09abbb6a275fdf775085f870ff5654c9", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/6630/5307/3e9f2295136a78db42ebb1a6fbe664a7", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b2cc/47b9/0645a40c8403358cf2d7c2c0ec5ef669", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/e0ee/b702/2ebed3e33672a12c631d023eb6a4f694", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/c683/9846/ae384718eb21c1ce82fc75227e21e47a", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/d15b/f046/dc3b80d600c5c194275e5f3b6926a2ac", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/7228/9846/0b79efc75df14b3f3929e50b44416dd7", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/ec6c/69ad/c25cb2d8008e144c44c87dcd8abed1a6", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/2fe5/073e/08f9e1cd00eed4ac28436de98b20d1f6", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/bbb2/4a01/5d04db3271978e2929e72848bde5118a", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/9119/fd52/5893ed04fdd68491c264d7a4c048ef75", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/8a00/57c6/0fa151e86e327095bd427ccce66ce95a", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b43c/1fbc/5b6b8ff0779159abf5891baeee203edb", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/7d7d/f87a/07ab519a5938be5a97a26d583bb6554b", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b624/871d/73e4cd9f0fc25e66df6bfa495b8b8922", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/533c/845c/58fe6f946a78415291d35dabe56c7624", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b15d/25cc/0826550d2008317b6e339981f7946737", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/e6ca/d1c6/4a9c448e28ebfb3b9f78e6ec8cb31f18", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/7794/8ba5/1bcc2b41d19e0bd4bc455a4862160209", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/703f/73e5/fd79013cd0b6cb1fc98a1fa40510fcb8", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/fa2c/7131/56bac4248711b8894d763112e76dabb9", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/ae69/4ae7/d3debd2b30cc0e1f4f5f541fd25d26fd", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/d414/f3a7/5f4b25749bf09791752d704c3ff7e843", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f2f7/b708/b00f69f7b29c0a7223036e7fc62e2365", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/8b9a/d8e7/cf1cf132789786175fa2742f3cbec02b", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/3de4/80aa/e3bdf1dcaa6cd6038221b40db7431790", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/111b/7fef/9906aa658d2873072625b1fdb8644268", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/4286/e211/8e12f29e109c344891e23b603f74f4d4", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/323f/d77d/ff67183b74d7ca850bcc22b43a8f7891", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/c1f9/9ee4/ed649d8e0cea1858b7587bc8d6d80f85", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/a75b/a0eb/c6c5152bbd08c2cc14139437e1233338", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/eceb/692f/e18f74d8acac590fbb1733cb72cb9d5e", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/ccfe/6f2d/4b4ba1512314c33c5b004bfff3896a2c", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/8de8/86f6/561ec7b2d118c40a90d1baa2bc43b110", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/72d4/9dae/5dafd1a89d25a223f0ea0dcb84e320e9" ], "0.2": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f04b/2462/01a43ce387036d64526c315e36f92215", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f6ea/86aa/8030d15a900b8418dad7cb2d9ccd9347", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/80c8/acf7/aac165d56c49a43ce470ed4ebe1d67ac", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/2e50/1f3f/ba8a4400543c8e83ba98d93d2e1a1e00", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/41aa/6499/6553b811edf2660618eaba2b5710f06d", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/564e/d549/71ee2c748f6dc195408fb417d66043f4", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/a61b/e6d6/2244acd9bc72fe02b738039aec19a610", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f282/d371/3d4b2a0831fa7087036fc55f5d8dcda6", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/bb3a/1294/c7fe4af30562614cc02a1db188e8980b", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/78cc/6ba3/fd3f1e5e51ce90a141542d9def4cdb04", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f0de/8c69/f8a6109a3bd53ac53cdf010b864e7188", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b845/13d3/b47498208741b37c3689ea697d190dce" ], "📱 • App icon": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/23ce/0976/d990d5765e63e018dea033fec4c02131" ], "🖌 • . Illustraties": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/99a3/b38c/71ebc77812cda0d90fc653c82ac306b6", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/88a9/8b32/5cdb736474238a2d71a850d4fbe5e7c5" ], "🧮 • Core information architecture": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/4f84/a859/d57f50a2160799cc9b3166d06d7bdb35", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/cb91/91a3/41232cafd022d483bae69b97a4b8451b", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/ca01/cf32/2fc3ffc178b52b34316221f86da13857", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/b7f4/68ea/0e3d33dffb7b049030ad4c33da856032", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/f01a/181c/c96f4e40d6618640fda5954e9609b62a", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/8891/87c6/7aee088b0dfdd1aced8eca7fbcda6d9e", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/d79d/2629/9f7fe8cf525d5389c904f96422e22c59" ], "🎨 • Styleguide (Niet compleet)": [ "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/c2dc/e03d/20fee4fd98d9f5af0e0682bd28cc384b", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/bf67/c160/1b6a865e191de40ab9799a477d956e94", "https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/4c0d/7b73/c37e6a98ace1919b0871815e9a055326" ] } ```

There seem to be some issues with the SVG export, the :warning: and :eyes: on the Cover page are not in the SVG export but are in the PNG.

Show the difference between the SVG and PNG cover

SVG: PNG:

[jorisleker]

@bwbroersma nice work. Think pngs will suffice for now, agreed? What do you need to move forward on this?

[bwbroersma]

@jorisleker I agree PNG should be used, there are some more issues with SVG.

Bare minimum:

• [x] create some markdown file (easy, ok done):

  jq '"# Design\n\n"+(to_entries|map("## \(.key)\n\n"+(.value|map("![Figma screenshot](\(.))")|join("\n"))+"\n")|join("\n"))' -cr

• [ ] skip the cover?
• [ ] find out what's the difference 0.4 and pre-0.4 in terms of canvas (what is a usable way to show the images?) or split it into multi pages?
• [ ] should be publish to a GitHub Pages branch, master branch or a separate branch? We probably don't want a bot publishing in the master branch all the time (commit clutter & the need to signing etc., although an auto update commit every hour also has it's charm of progress exposed in the GitHub repo)
• [ ] put it all in a GitHub action

Bonus:

• [ ] add metadata to the images: titles / comments etc.?
• [ ] export PNG for HDPI and downsize in markdown (PNG looks terrible on my screen now)

this jq one-liner addition will create:

Show the generated markdown (source)

```md # Design ## Cover   ## 0.4   ## 0.3                                            ## 0.2             ## 📱 • App icon  ## 🖌 • . Illustraties   ## 🧮 • Core information architecture        ## 🎨 • Styleguide (Niet compleet)    ```

The nice thing is, if we publish it as markdown with external images, GitHub will cache the images:

---

Show the generated markdown (view/render)

# Design ## Cover   ## 0.4   ## 0.3                                            ## 0.2             ## 📱 • App icon  ## 🖌 • . Illustraties   ## 🧮 • Core information architecture        ## 🎨 • Styleguide (Niet compleet)   

[bramd]

@bwbroersma It would also be nice if we include all text from the designs. Either in the same Markdown file or separate Markdown files. This could help translations and makes the text available for people who can't see the images.

[bwbroersma]

@bramd I was thinking about the alt-text when I made the initial markdown generation, and I think you're right, we can include all text of the Figma in the alt text. This is however more useful for pre 0.4 designs, but they are tricky for 0.4 up, since the board contains quite some text.. any thoughts?

[bwbroersma]

Another thing / nice to have: include Figma issues + comments.

I'm new to Figma (and have never seen them yet) so I should first find out how to see issues + find their API.

[jorisleker]

@bwbroersma an export would still be nice, but don't think it is a top priority. Closing the issue. Feel free to reopen if you (or others) still intent to work on it 🙂