[{"data":1,"prerenderedAt":105},["ShallowReactive",2],{"{\"version\":\"published\"}\u002Fblog":3,"article-list":57},{"data":4,"headers":35},{"story":5,"cv":32,"rels":33,"links":34},{"name":6,"created_at":7,"published_at":8,"updated_at":9,"id":10,"uuid":11,"content":12,"slug":22,"full_slug":23,"sort_by_date":18,"position":24,"tag_list":25,"is_startpage":26,"parent_id":27,"meta_data":18,"group_id":28,"first_published_at":29,"release_id":18,"lang":30,"path":18,"alternates":31,"default_full_slug":18,"translated_slugs":18},"Blog","2026-07-23T16:49:55.507Z","2026-07-23T20:55:46.107Z","2026-07-23T20:55:46.311Z",201260218419696,"4219c4cf-c73b-4382-b4dd-58ac119b50f0",{"_uid":13,"body":14,"ogImage":18,"component":19,"pageTitle":20,"pageDescription":21},"e4554cef-273e-42e9-a1a4-696d7afa72c5",[15],{"_uid":16,"headline":6,"component":17},"ec004b25-424c-4edd-9da1-fb988ff0ae8f","ArticleList",null,"page","Blog | Martinr.nl","Articles on front-end development, Nuxt, Vue and design by Martin Risseeuw, freelance developer from Haarlem, NL.","blog","blog\u002F",-40,[],true,201260215228911,"8becdb2a-c763-4ee0-9ee2-930b60d64c08","2026-07-23T16:49:55.546Z","default",[],1784848083,[],[],{"age":36,"cache-control":37,"connection":38,"content-length":39,"content-type":40,"date":41,"etag":42,"referrer-policy":43,"sb-be-version":44,"server":45,"vary":46,"via":47,"x-amz-cf-id":48,"x-amz-cf-pop":49,"x-cache":50,"x-content-type-options":51,"x-frame-options":52,"x-permitted-cross-domain-policies":53,"x-request-id":54,"x-runtime":55,"x-xss-protection":56},"97","max-age=0, public, s-maxage=604800, stale-if-error=3600","keep-alive","968","application\u002Fjson; charset=utf-8","Thu, 23 Jul 2026 23:17:46 GMT","W\u002F\"1e93a1de284778b8cb60c1840ca14d86\"","strict-origin-when-cross-origin","5.924.0","nginx\u002F1.29.1","Origin","1.1 fb2395486b1f6d2e4773c1e2a002347e.cloudfront.net (CloudFront)","xWfTiTh3B20SOIgIxf913dyNLNCKF4gw8AypLSyhj8nB__8HtyhkVQ==","FRA60-P12","Hit from cloudfront","nosniff","SAMEORIGIN","none","aa245754-e596-41e7-92a4-b16b564b283f","0.017618","0",[58,87],{"name":59,"created_at":60,"published_at":61,"updated_at":62,"id":63,"uuid":64,"content":65,"slug":81,"full_slug":82,"sort_by_date":18,"position":83,"tag_list":84,"is_startpage":78,"parent_id":27,"meta_data":18,"group_id":85,"first_published_at":8,"release_id":18,"lang":30,"path":18,"alternates":86,"default_full_slug":18,"translated_slugs":18},"Design systems in Figma: bridging design and code","2026-07-23T17:08:01.156Z","2026-07-23T23:08:03.335Z","2026-07-23T23:08:03.349Z",201264665258733,"d1b98191-a92c-43cd-a20e-49ef043a33f6",{"_uid":66,"intro":67,"title":59,"ogImage":68,"component":72,"pageTitle":73,"cover_image":74,"publish_date":79,"pageDescription":80},"1102fdae-9aae-4a19-ba2e-249097541c27","As a freelance developer at DPG Media I work on marketing portals for selling newspaper subscriptions, and as a designer I build design systems in Figma. The most valuable lesson from combining both roles: a design system only works when the Figma library and the code components mirror each other exactly.",{"id":18,"alt":18,"name":69,"focus":18,"title":18,"source":18,"filename":69,"copyright":18,"fieldtype":70,"meta_data":71},"","asset",{},"article","Design systems in Figma: bridging design and code | Martinr.nl",{"id":75,"alt":69,"name":69,"focus":69,"title":69,"source":69,"filename":76,"copyright":69,"fieldtype":70,"meta_data":77,"is_external_url":78},201353095084536,"https:\u002F\u002Fa.storyblok.com\u002Ff\u002F274734\u002F4140x2800\u002F3b67eed852\u002Ftokens.jpg",{},false,"2026-07-23 12:00","How I build design systems in Figma that mirror the code 1:1 — design tokens, variants that match props, and lessons from marketing portals at DPG Media.","design-systems-in-figma-bridging-design-and-code","blog\u002Fdesign-systems-in-figma-bridging-design-and-code",-30,[],"138bb045-c62c-4c05-b810-b6f258a679a9",[],{"name":88,"created_at":89,"published_at":8,"updated_at":90,"id":91,"uuid":92,"content":93,"slug":99,"full_slug":100,"sort_by_date":18,"position":101,"tag_list":102,"is_startpage":78,"parent_id":27,"meta_data":18,"group_id":103,"first_published_at":8,"release_id":18,"lang":30,"path":18,"alternates":104,"default_full_slug":18,"translated_slugs":18},"Building animated marketing sites with Nuxt and Storyblok","2026-07-23T16:53:45.836Z","2026-07-23T20:55:46.431Z",201261161859583,"0b04c2c5-0af4-492a-8b11-acb132a056ab",{"_uid":94,"intro":95,"title":88,"component":72,"pageTitle":96,"publish_date":97,"pageDescription":98},"db11dbd5-af9d-4e7b-8db4-1cb85234bd1b","After building marketing sites for Secrid, THE EMBASSIES and Tommy Hilfiger, this is the stack I keep coming back to: Nuxt for rendering, Storyblok as the headless CMS, and GSAP for animation. Here is why the combination works and how I structure these projects.","Building animated marketing sites with Nuxt and Storyblok | Martinr.nl","2026-07-23 09:00","How I combine Nuxt, Storyblok and GSAP to build fast, animated marketing sites for clients like Secrid and Tommy Hilfiger — and how I structure the blocks.","building-animated-marketing-sites-with-nuxt-and-storyblok","blog\u002Fbuilding-animated-marketing-sites-with-nuxt-and-storyblok",-10,[],"637565d2-a400-4e9a-8613-dbedf97e02e5",[],1784848762866]