[{"data":1,"prerenderedAt":307},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-figma-as-a-cms-where-design-and-development-collide-i18n-slugs":132,"language-blog-slug-nl-figma-as-a-cms-where-design-and-development-collide":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","figma-as-a-cms-where-design-and-development-collide",{"locale":137,"value":135},"nl",{"page":139},{"slug":135,"i18nSlugs":140,"social":143,"title":148,"subtitle":79,"isArchived":149,"headerIllustration":104,"date":150,"authors":151,"introTitle":167,"items":168,"pivots":263,"relatedBlogPosts":264,"tags":276,"onMountedScript":154,"onUnmountedScript":154},[141,142],{"locale":134,"value":135},{"locale":137,"value":135},{"title":144,"description":145,"image":146},"Figma as a CMS: where design and development collide","Although Figma is mostly used by designers, we tried using it in the development process, by transforming Figma into a CMS. Read our blogpost.",{"url":147},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1670338410-scherm-afbeelding-2022-12-06-om-15-52-38.png","Figma as a CMS; where design and development collide",false,"2022-02-10T01:00:00.000+01:00",[152,160],{"name":153,"lastName":154,"slug":155,"image":156},"Bas ","","basdegreeuw",{"url":157,"alt":104,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535728-bas-g.jpg",2394,3192,{"name":161,"lastName":154,"slug":162,"image":163},"Friso","friso",{"url":164,"alt":104,"width":165,"height":166},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Hoewel Figma voornamelijk door ontwerpers wordt gebruikt, hebben wij geprobeerd het te integreren in het ontwikkelingsproces door Figma om te zetten in een CMS.",[169,173,176,180,184,195,198,202,205,214,217,223,226,233,237,242,245,248,251,254,257,260],{"__typename":170,"id":171,"title":154,"body":172},"TextSectionRecord","T2HmDswvQXCbvp7UUxXNlQ","\u003Cp>Het beheren van grafische middelen in een groot project kan tijdrovend en kostbaar zijn, wat veel opslagruimte en tijd vergt. Het webgebaseerde ontwerptool Figma biedt een geweldige oplossing, mits we hun API op een slimme manier gebruiken.\u003C\u002Fp>\n\u003Cp>Vorig jaar zag softwareontwerpbedrijf Figma zijn waardering vervijfvoudigen (!) tot $10 miljard. Hoewel dit hulpmiddel voornamelijk door ontwerpers wordt gebruikt, hebben wij geprobeerd Figma te gebruiken in het ontwikkelingsproces van onze oplossingen. Wij hebben Figma gebruikt als een visueel CMS voor onze eigen applicaties. Hieronder vind je een gids over hoe je dit kunt doen.\u003C\u002Fp>",{"__typename":170,"id":174,"title":154,"body":175},"J9CpO52ZR_yXFY8ALoT9BQ","\u003Cp>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">Voordat we dieper ingaan op de technische details, laten we beginnen met het interpreteren van de explosieve waardestijging van Figma. Waarom zou je het gebruiken?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Naarmate Figma groeit in de industrie, is het het ontwerptool die we het vaakst zien bij het ontvangen van visueel en\u002Fof interactieontwerp en in termen van iconenbibliotheekbeheer.\u003C\u002Fli>\n  \u003Cli>Omdat het gratis is en snel te gebruiken, omdat het cloudgebaseerd is en beschikbaar vanaf elk apparaat of locatie.\u003C\u002Fli>\n  \u003Cli>Figma heeft een uitgebreide API die alles dekt, van CRUD-acties op bestanden tot webhooks om op de hoogte te worden gesteld van bijgewerkte bestanden.\u003C\u002Fli>\n  \u003Cli>Figma vergemakkelijkt de overdracht van ontwerper naar ontwikkelaar.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":170,"id":177,"title":178,"body":179},"U1qc1XuySICCIm4mg7zuJw","Hoe willen wij Figma gebruiken?","\u003Cdiv class=\"flex-1 overflow-hidden\">\n  \u003Cdiv class=\"h-full\">\n    \u003Cdiv class=\"react-scroll-to-bottom--css-ifrym-79elbk h-full\">\n      \u003Cdiv class=\"react-scroll-to-bottom--css-ifrym-1n7m0yu\">\n        \u003Cdiv class=\"flex flex-col text-sm\">\n          \u003Cdiv class=\"w-full text-token-text-primary\" dir=\"auto\" data-testid=\"conversation-turn-3\" data-scroll-anchor=\"true\">\n            \u003Cdiv class=\"text-base py-[18px] px-3 md:px-4 m-auto md:px-5 lg:px-1 xl:px-5\">\n              \u003Cdiv class=\"mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]\">\n                \u003Cdiv class=\"group\u002Fconversation-turn relative flex w-full min-w-0 flex-col agent-turn\">\n                  \u003Cdiv class=\"flex-col gap-1 md:gap-3\">\n                    \u003Cdiv class=\"flex flex-grow flex-col max-w-full\">\n                      \u003Cdiv data-message-author-role=\"assistant\" data-message-id=\"fcbe201c-645f-40a6-8b10-ea0b43993200\" dir=\"auto\" class=\"min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto\">\n                        \u003Cdiv class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n                          \u003Cdiv class=\"markdown prose w-full break-words dark:prose-invert light\">\n                            \u003Cp>Hoe beheer je visuele middelen in een groeiend webproject? De overdracht tussen ontwerper en ontwikkelaar kan behoorlijk schokkend zijn, vooral met derden die ertussen komen. Tegenwoordig worden de meeste van deze middelen opgeslagen in een contentmanagementsysteem (CMS), wat het bewerken en publiceren van grafische middelen super eenvoudig maakt. Een CMS stelt je doorgaans in staat om tekstgebaseerde inhoud te beheren en mediabestanden te koppelen. Maar recentelijk hadden we onze redacteuren nodig om complexe grafische elementen te beheren. Onze oplossing: \u003Cstrong>Figma als \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fheadless-cms\u002F\" title=\"service pagina headless cms\">headless CMS\u003C\u002Fa>\u003C\u002Fstrong>.\u003C\u002Fp>\n                            \u003Cp>Bekijk de video hieronder om te zien wat we hiermee bedoelen. Het ontwerp in Figma wordt aangepast en binnen enkele seconden wordt dit nieuwe ontwerp op de hele website weergegeven, zonder elke pagina afzonderlijk te hoeven wijzigen. Op deze manier hebben we Figma omgevormd tot een CMS.\u003C\u002Fp>\n                          \u003C\u002Fdiv>\n                        \u003C\u002Fdiv>\n                      \u003C\u002Fdiv>\n                    \u003C\u002Fdiv>\n                  \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"__typename":170,"id":181,"title":182,"body":183},"MsKFm6N1Q8q2i9hdcFFaTg","Hoe gaan we van Figma als ontwerptool naar een CMS?","\u003Cdiv class=\"flex-1 overflow-hidden\">\n  \u003Cdiv class=\"h-full\">\n    \u003Cdiv class=\"react-scroll-to-bottom--css-ifrym-79elbk h-full\">\n      \u003Cdiv class=\"react-scroll-to-bottom--css-ifrym-1n7m0yu\">\n        \u003Cdiv class=\"flex flex-col text-sm\">\n          \u003Cdiv class=\"w-full text-token-text-primary\" dir=\"auto\" data-testid=\"conversation-turn-3\" data-scroll-anchor=\"true\">\n            \u003Cdiv class=\"text-base py-[18px] px-3 md:px-4 m-auto md:px-5 lg:px-1 xl:px-5\">\n              \u003Cdiv class=\"mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]\">\n                \u003Cdiv class=\"group\u002Fconversation-turn relative flex w-full min-w-0 flex-col agent-turn\">\n                  \u003Cdiv class=\"flex-col gap-1 md:gap-3\">\n                    \u003Cdiv class=\"flex flex-grow flex-col max-w-full\">\n                      \u003Cdiv data-message-author-role=\"assistant\" data-message-id=\"fcbe201c-645f-40a6-8b10-ea0b43993200\" dir=\"auto\" class=\"min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto\">\n                        \u003Cdiv class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n                          \u003Cdiv class=\"markdown prose w-full break-words dark:prose-invert light\">\n                            \u003Cp>Zonder in detail te treden over hoe je je projecten moet structureren en welke technologieën je moet gebruiken, heb ik geprobeerd enkele algemene gebruikscases te demonstreren in een eenvoudig project. Laat me je dat eerst laten zien.\u003C\u002Fp>\n                          \u003C\u002Fdiv>\n                        \u003C\u002Fdiv>\n                      \u003C\u002Fdiv>\n                    \u003C\u002Fdiv>\n                  \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"__typename":185,"id":186,"mute":149,"loop":149,"autoplay":149,"caption":154,"video":187,"gif":104},"ResponsiveVideoRecord","ZSBsqRXuQZ2d1YahEyCqHQ",{"url":188,"title":189,"height":190,"width":191,"provider":192,"providerUid":193,"thumbnailUrl":194},"https:\u002F\u002Fvimeo.com\u002F665999956","Figma as a CMS Image Demo",360,640,"vimeo","665999956","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1348085451-f9bb320ce757e045a9f53b68d7cbd8c342fef3546c79b42dec3ba102ff2d2579-d_640",{"__typename":170,"id":196,"title":154,"body":197},"f9uxvCqsQ1OWp0tCobYpdg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Laten we stap voor stap door de gebeurtenissen in de video lopen:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Een Figma-object wordt bewerkt door vormen te verplaatsen en opnieuw te kleuren;\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Een nieuwe bestandversie wordt vrijgegeven. \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">De webhook-trigger wordt ingesteld op 'bestandsversie-update', zodat werk in uitvoering niet wordt gepubliceerd. Zie dit als de \"publiceer\" knop in je CMS.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Wacht totdat de server een verzoek van de webhook ontvangt en een build-script uitvoert; en\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Zie de wijzigingen in de browser.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Col>\u003C\u002Fol>",{"__typename":170,"id":199,"title":200,"body":201},"KuLdaaZ9SjeEPIWWb3wsJg","Waarom het werkt","\u003Cp>De Figma HTTP API heeft een export-eindpunt dat tijdelijk een geëxporteerde bron opslaat in hun cloudopslag (een AWS S3-bucket op het moment van schrijven). We kunnen deze tijdelijke opslag gebruiken tijdens ons buildproces om nieuwe grafische middelen bij elke build op te halen en op te slaan in de build-cache, of zelfs een bronnen-cache van cloudopslaglinks beheren die periodiek worden bijgewerkt. Door de nieuwe webhooks van Figma kunnen we deze builds zelfs op bepaalde gebeurtenissen activeren, en het \u003Ccode>'FILE_VERSION_UPDATE'\u003C\u002Fcode>-evenement is perfect hiervoor. Het wordt geactiveerd elke keer dat een nieuwe 'versie' wordt vrijgegeven, waardoor je volledige controle hebt over wat en wanneer wordt bijgewerkt.\u003C\u002Fp>",{"__typename":170,"id":203,"title":154,"body":204},"MoxPOoz0Tdqhd6ypp8EdhA","\u003Cp>We hadden dit in gedachten voor een project dat veel verschillende visuele componenten vereiste, beheerd door verschillende mensen op verschillende locaties. En het werkte perfect met Figma en zijn API. Het voorbeeld is vrij eenvoudig, met een enkele illustratie, maar stel je bijvoorbeeld het beheren van kaarten van binnenruimtes voor.\u003C\u002Fp>\n\u003Cp>In deze opzet worden Figma-bestanden tijdens de build gemapt naar een statische map, volgens de naamgeving die in Figma wordt gebruikt.\u003C\u002Fp>",{"__typename":206,"id":207,"image":208,"caption":154,"fullWidth":149,"captionPosition":213},"ImageRecord","NFxn9k0PS0247HO9uZDSsQ",{"url":209,"alt":210,"width":211,"height":212},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1642356069-figma1.png","Een screenshot van Figma die de map van de illustraties op de voorpagina toont",936,326,"bottom",{"__typename":170,"id":215,"title":154,"body":216},"OurHFCJQQfykPkCKBq2QNw","\u003Cdiv class=\"flex-1 overflow-hidden\">\n  \u003Cdiv class=\"h-full\">\n    \u003Cdiv class=\"react-scroll-to-bottom--css-ifrym-79elbk h-full\">\n      \u003Cdiv class=\"react-scroll-to-bottom--css-ifrym-1n7m0yu\">\n        \u003Cdiv class=\"flex flex-col text-sm\">\n          \u003Cdiv class=\"w-full text-token-text-primary\" dir=\"auto\" data-testid=\"conversation-turn-3\" data-scroll-anchor=\"true\">\n            \u003Cdiv class=\"text-base py-[18px] px-3 md:px-4 m-auto md:px-5 lg:px-1 xl:px-5\">\n              \u003Cdiv class=\"mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]\">\n                \u003Cdiv class=\"group\u002Fconversation-turn relative flex w-full min-w-0 flex-col agent-turn\">\n                  \u003Cdiv class=\"flex-col gap-1 md:gap-3\">\n                    \u003Cdiv class=\"flex flex-grow flex-col max-w-full\">\n                      \u003Cdiv data-message-author-role=\"assistant\" data-message-id=\"fcbe201c-645f-40a6-8b10-ea0b43993200\" dir=\"auto\" class=\"min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-pre-wrap break-words [.text-message+&]:mt-5 overflow-x-auto\">\n                        \u003Cdiv class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n                          \u003Cdiv class=\"markdown prose w-full break-words dark:prose-invert light\">\n                            \u003Cp>Je kunt al zien dat de andere Figma-bestanden verschijnen in mijn bestandstructuur, iconen. Natuurlijk is het beheren van een iconenbibliotheek in Figma en publiceren bij elke nieuwe release ook een zeer nuttige manier om hun API te benutten. Opnieuw zie je de beschikbare gegevens gemapt naar de export.\u003C\u002Fp>\n                          \u003C\u002Fdiv>\n                        \u003C\u002Fdiv>\n                      \u003C\u002Fdiv>\n                    \u003C\u002Fdiv>\n                  \u003C\u002Fdiv>\n                \u003C\u002Fdiv>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"__typename":206,"id":218,"image":219,"caption":154,"fullWidth":149,"captionPosition":213},"QIRSFzyIQCiAMCs6DJIX2Q",{"url":220,"alt":221,"width":211,"height":222},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1642356105-figma2.png","Een screenshot van figma met icons mappen",378,{"__typename":170,"id":224,"title":154,"body":225},"W2Dxc6FFQ-Cd0V0gHE_98w","\u003Cp>We kunnen deze SVG's gebruiken om een iconen-spritesheet voor onze applicatie te bouwen, wat er ongeveer zo uit zou kunnen zien:\u003C\u002Fp>",{"__typename":185,"id":227,"mute":149,"loop":149,"autoplay":149,"caption":154,"video":228,"gif":104},"VPhf6z9GRtiilxUYisPmWg",{"url":229,"title":230,"height":190,"width":191,"provider":192,"providerUid":231,"thumbnailUrl":232},"https:\u002F\u002Fvimeo.com\u002F666000349","Figma as a CMS Icon Demo","666000349","https:\u002F\u002Fi.vimeocdn.com\u002Fvideo\u002F1348086754-5573db48f9d9ba40d5b469c07effff0d751060fe0e4b1e5bab80a12f21e27447-d_640",{"__typename":170,"id":234,"title":235,"body":236},"aIp0WyAvRXyVBbtpqlbpYQ","Gebruik van de API","\u003Cp>Voor de eerder genoemde voorbeelden heb ik een functie gebouwd die SVG's exporteert op basis van zogenaamde \u003Cspan>\u003Ccode>filekey\u003C\u002Fcode>'s \u003C\u002Fspan>die Figma gebruikt. Het aanroepen van hun\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">\u003Ccode>\u002Ffiles\u003C\u002Fcode> \u003C\u002Fspan>eindpunt als volgt:\u003C\u002Fp>\n\u003Cp>\u003Cem>Let op, er is geen bestandversie in dit verzoek gespecificeerd. De nieuwste bestandversies moeten op je serverimplementatie worden beheerd om ervoor te zorgen dat build-triggers anders dan Figma de versie-uitgaveflow van de grafische middelen niet onderbreken.\u003C\u002Fem>\u003C\u002Fp>",{"__typename":238,"id":239,"language":240,"body":241},"CodeBlockRecord","BPl8SX1JTlqpELBO6kvo9A","js","function getResourcesByFileKey(fileKey, fileName = 'icons') {\n    return fetch(`${FIGMA_BASE}\u002Fv1\u002Ffiles\u002F${fileKey}?depth=2`, {\n        headers: {\n            'x-figma-token': X_FIGMA_TOKEN\n        }\n    }) \u002F\u002F Fetches the file object by the fileKey\n        .then(res => res.json())\n        .then(res => res.document.children.map((child, i) => ({ \u002F\u002F Create an array of the top-level frames\n            page: child.name,\n            nodes: child.children.map(child => ({\n                name: child.name,\n                id: child.id\n            })),\n            ...child\n        })))\n        .then(items => items.map(({page, nodes}) => [ \u002F\u002F Use the node ID's of these frames to export them\n            fsPromises.mkdir( \u002F\u002F First ensure the folder to save it to\n                path.resolve(\n                    __dirname,\n                    `..\u002Fdist\u002F${fileName}\u002F${page}`),\n                {recursive: true}\n            ),\n            nodes.map(\n                node =>\n                    fetch(`${FIGMA_BASE}\u002Fv1\u002Fimages\u002F${fileKey}?ids=${node.id}&format=svg&svg_include_id=true`,\n                        {\n                            headers: {\n                                'x-figma-token': X_FIGMA_TOKEN\n                            }\n                        }) \u002F\u002F Fetch every node\n                        .then(res => res.json())\n                        .then(res => res.images[node.id])\n                        .then(async (resource) => {\n                            console.log(`🦴Fetching '\u002F${fileName}\u002F${page}\u002F${node.name}.svg'`)\n                            return await fetch(resource).then(res => res.text())\n                        })\n                        .then(data => \u002F\u002F Return a promise for the file writes\n                            fsPromises.writeFile(\n                                path.resolve(\n                                    __dirname,\n                                    `..\u002Fdist\u002F${fileName}\u002F${page}\u002F${node.name}.svg`),\n                                data.replace(\u002Ffill=\".*?\"\u002F, ''),\n                                err => {\n                                    if (err) {\n                                        console.error(err)\n                                    }\n                                })\n                        )\n            )]))\n}",{"__typename":170,"id":243,"title":154,"body":244},"dhIC9rsfQ8OESJxBVSTUoQ","\u003Cp>We eindigen met een array die de pagina's en hun top-level nodes bevat voor het bestand dat we hebben opgegeven. De naam van de top-level node, meestal een frame in Figma, zal de bestandsnaam zijn. \u003Cspan style=\"font-weight: 400;\">\u003Ccode>Superheroes.svg\u003C\u002Fcode> \u003C\u002Fspan>in ons voorbeeld. We kunnen vervolgens door de array lopen en SVG-resources ophalen van hun \u003Cspan style=\"font-weight: 400;\">\u003Ccode>\u002Fimages\u003C\u002Fcode>\u003C\u002Fspan>endpoint en deze opslaan op ons bestandssysteem.\u003C\u002Fp>\n\u003Cp>Met behulp van het \u003Cspan style=\"font-weight: 400;\">\u003Ccode>\u002Fprojects\u003C\u002Fcode>\u003C\u002Fspan> endpoint kunnen we alle bestanden binnen een project opvragen (bijvoorbeeld een project genaamd “CMS”) en vervolgens \u003Cspan style=\"font-weight: 400;\">\u003Ccode>getResourceByFileKey()\u003C\u002Fcode> \u003C\u002Fspan>aanroepen voor elk bestand dat we in ons project vinden.\u003C\u002Fp>",{"__typename":238,"id":246,"language":240,"body":247},"XZdD6ivNSe6zydvAtxVWxw","async function getResourcesFromFigma() {\n        const figmaFiles = await fetch(`${FIGMA_BASE}\u002Fv1\u002Fprojects\u002F${FIGMA_PROJECT}\u002Ffiles`, {\n            headers: {\n                'x-figma-token': X_FIGMA_TOKEN\n            }\n        })\n            .then(res => res.json())\n            .then(json => json.files)\n        await Promise.all(figmaFiles.map(({key, name}) => module.exports.getResourcesByFileKey(key, name)).flat())\n    }",{"__typename":170,"id":249,"title":154,"body":250},"FlTo0dQKRMe4ulPpVmZekQ","\u003Cp>Om alle gebeurtenissen met elkaar te verbinden, gebruiken we de nieuwe webhooks van Figma. We registreren een nieuwe webhook bij het opstarten van de server:\u003C\u002Fp>",{"__typename":238,"id":252,"language":240,"body":253},"cv97EPe8RX-oW_MU4zmrgw","fetch(`${FIGMA_BASE}\u002Fv2\u002Fwebhooks?team_id=${FIGMA_TEAM}&endpoint=${ENDPOINT}\u002Ffigma\u002Ffile_update&passcode=${passcode}&event_type=FILE_VERSION_UPDATE`)",{"__typename":170,"id":255,"title":154,"body":256},"Zlhe_9bYQP-3MrxZQyb1Yg","\u003Cp>Figma zal nu POST'en naar het endpoint dat je hebt opgegeven in het verzoek met de bijbehorende fileKey voor de bijgewerkte bestandversie. We kunnen vervolgens de eerder genoemde functie opnieuw aanroepen met de geleverde fileKey (ik gebruik een eenvoudige Fastify node-server in dit voorbeeld):\u003C\u002Fp>",{"__typename":238,"id":258,"language":240,"body":259},"bwuiMATMRzajwnmCLha-kA","fastify.post('\u002Ffile_update', async (request, reply) => {\n    if (request.body.passcode === passcode) {\n        reply.code(200)\n        const {file_name, file_key, timestamp} = request.body\n        console.log(file_name, file_key, timestamp)\n        if(file_name && file_key && timestamp) {\n            await getResourcesByFileKey(file_key, file_name)\n        }\n    } else reply.code(403)\n    reply.send()\n})",{"__typename":170,"id":261,"title":154,"body":262},"Ar_2XqC_SnmRdKSJ4twwPw","\u003Cp>\u003Cem>Let op dat ik geen foutafhandeling heb uitgevoerd; deze code is lang als voorbeeld. \u003Cstrong>Overweeg je eigen implementatie!\u003C\u002Fstrong>\u003C\u002Fem>\u003C\u002Fp>",[],[265],{"slug":266,"title":267,"date":268,"authors":269},"headless-cmsen-strapi-vs-datocms","Headless CMS'en gaan de strijd aan: Strapi vs DatoCMS","2023-08-04T02:00:00.000+02:00",[270],{"name":271,"image":272},"Remco",{"url":273,"alt":104,"width":274,"height":275},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535671-remco.jpg",1990,2653,[277],{"id":278,"title":279,"slug":280,"blogPosts":281},"WTPJX79URE-O5lpWLJeEHg","Headless CMS","headless-cms",[282,293,298],{"slug":283,"title":284,"date":285,"authors":286},"dropbox-paper-als-headless-cms","Dropbox Paper als een headless CMS","2019-01-25T01:00:00.000+01:00",[287],{"name":288,"image":289},"Jasper",{"url":290,"alt":104,"width":291,"height":292},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":104,"title":154,"date":294,"authors":295},"2021-11-19T01:00:00.000+01:00",[296],{"name":288,"image":297},{"url":290,"alt":104,"width":291,"height":292},{"slug":104,"title":154,"date":299,"authors":300},"2022-11-25T01:00:00.000+01:00",[301],{"name":302,"image":303},"Frank",{"url":304,"alt":104,"width":305,"height":306},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534610-frank.jpg",2049,2732,1776256154404]