[{"data":1,"prerenderedAt":126},["ShallowReactive",2],{"product-block":3},{"id":4,"title":5,"body":6,"demo":111,"description":112,"extension":113,"media":114,"meta":119,"navigation":120,"path":121,"seo":122,"stem":123,"updated":124,"__hash__":125},"projects\u002Fprojects\u002Fblock.md","Block",{"type":7,"value":8,"toc":102},"minimark",[9,14,18,27,31,34,66,70,73,84,87,94,98],[10,11,13],"h2",{"id":12},"why-does-blocks-exist","Why does Blocks exist?",[15,16,17],"p",{},"Building the first components of a design system is easy. Keeping them useful is the hard part. Complex components need an onboarding session just to fill in, data ends up hanging on top of pixels, and when AI edits a design it changes the text but leaves the total, the count and the empty state wrong. Blocks gives a component its data, and the rules that connect that data to what you see, so AI can change what's in it without breaking it.",[15,19,20,21,26],{},"Jinson made the case in ",[22,23,25],"a",{"href":24},"\u002Fwriting\u002Ffigma-components-logic-layer","“Making Figma Components Smart: Why Design Systems Need a Logic Layer”",", where it started in January 2026 as Block, a weekend proof of concept.",[10,28,30],{"id":29},"how-does-it-work","How does it work?",[15,32,33],{},"Blocks is a Figma plugin plus two skills for Figma's agent.",[35,36,37,50,60],"ol",{},[38,39,40,44,45,49],"li",{},[41,42,43],"strong",{},"Make a component AI ready."," Select a main component or a whole screen and ask the agent: ",[46,47,48],"code",{},"\u002Fblock-create Make this component AI ready",". It works out the component's data, totals and states, and checks its reading with you before saving.",[38,51,52,55,56,59],{},[41,53,54],{},"Change the data by asking."," Select a copy and ask: ",[46,57,58],{},"\u002Fblock-update 3 running shoes under $100",". The content changes, and totals, counts and states update by themselves. When the items change, it offers to make matching photos.",[38,61,62,65],{},[41,63,64],{},"See what AI understands."," Open Blocks on a component for a heat map of every part: what AI can change, what it's guessing, what it can't reach, and what's missing from the design. Every change the agent makes is listed, with what was asked and what updated by itself.",[10,67,69],{"id":68},"how-did-block-become-blocks","How did Block become Blocks?",[15,71,72],{},"Block began as a scripting layer: designers wrote a component's logic in plain JavaScript, and a hidden layer kept the data intact across variants. Version 0.2.0, in November 2026, turned it around. The setup now happens in conversation with Figma's agent, through the skills, and the plugin became the place to see how well AI understands each component and to fill it with data. One entry point, no menus: select nothing for a dashboard of every AI-ready block in the file, a component for its heat map, or a copy to edit its fields.",[74,75],"page-figure",{"alt":76,"caption":77,"height":78,"src":79,"width":80,"credit":81,"credit-url":82,"poster":83},"A calendar component in Figma driven by Block: changing the Month and Year inputs in the Block panel redraws the calendar grid.","Block before 0.2.0: typed inputs redrawing a calendar component.",720,"\u002Fimages\u002Fproducts\u002Fblock-calendar.mp4",1152,"from the Block article on Bootcamp","https:\u002F\u002Fmedium.com\u002Fdesign-bootcamp\u002Fmaking-figma-components-functional-why-design-systems-need-a-logic-layer-933837fa6e17","\u002Fimages\u002Fproducts\u002Fblock-calendar-poster.webp",[15,85,86],{},"Jinson presented the thinking behind it at Friends of Figma Dubai's Show & Tell in October 2026, in a talk called “Teaching AI to understand design systems”.",[74,88],{"alt":89,"caption":90,"height":91,"src":92,"width":93},"Jinson Johny presenting at Friends of Figma Dubai's Show & Tell at in5 Tech, holding a microphone and working on a laptop at the lectern.","Teaching AI to understand design systems, at Friends of Figma Dubai, October 2026.",797,"\u002Fimages\u002Fproducts\u002Fblocks-talk.webp",1100,[10,95,97],{"id":96},"timeline","Timeline",[99,100],"project-timeline",{"id":101},"block",{"title":103,"searchDepth":104,"depth":105,"links":106},"",2,0,[107,108,109,110],{"id":12,"depth":104,"text":13},{"id":29,"depth":104,"text":30},{"id":68,"depth":104,"text":69},{"id":96,"depth":104,"text":97},null,"Blocks is a Figma plugin by Jinson Johny, with two skills for Figma's agent, that makes design-system components AI ready. AI fills them with real data, and totals, counts and states follow. Beta at blocks.is.","md",{"src":115,"alt":116,"width":117,"height":118},"\u002Fimages\u002Fproducts\u002Fblocks-heatmap.webp","Blocks open on a Cart component in Figma: a shopping-bag screen with each part coloured by what AI understands, and a side panel counting 5 parts AI can change, 1 it's guessing, 1 it can't change and 1 that's usually there but missing.",1604,1158,{},true,"\u002Fprojects\u002Fblock",{"description":112},"projects\u002Fblock","2026-11","LfPUhrRfXdTmFxQPr6a7_Nf_BT4FWOx_CenY5lw5xBs",1793655448722]