[{"data":1,"prerenderedAt":68},["ShallowReactive",2],{"writing-figma-components-logic-layer":3},{"id":4,"title":5,"body":6,"cover":14,"description":19,"extension":20,"figures":21,"inShort":43,"meta":44,"navigation":45,"path":46,"readMinutes":47,"related":48,"seo":52,"stem":53,"takeaways":54,"__hash__":67},"writing\u002Fwriting\u002Ffigma-components-logic-layer.md","Figma Components Logic Layer",{"type":7,"value":8,"toc":9},"minimark",[],{"title":10,"searchDepth":11,"depth":12,"links":13},"",2,0,[],{"src":15,"width":16,"height":17,"alt":18},"\u002Fimages\u002Fwriting\u002Ffigma-components-logic-layer.webp",1400,700,"The Figma and JavaScript logos above the words “Functional components”, beside Block's logic editor showing calendar code.","Summary of Jinson Johny's Bootcamp article on why Figma design systems need a logic layer, introducing Block: scripted logic and data for components.","md",[22,28,34,39],{"src":23,"poster":24,"width":25,"height":26,"caption":27},"\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-3.mp4","\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-3.webp",1072,716,"An input component triggers its error variant through validation logic, with no manual design updates.",{"src":29,"poster":30,"width":31,"height":32,"caption":33},"\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-4.mp4","\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-4.webp",1160,720,"A shopping cart where the items, discount and total are logically connected.",{"src":35,"poster":36,"width":37,"height":26,"caption":38},"\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-5.mp4","\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-5.webp",1200,"Date-range selection: instead of updating individual cell variants, the range is calculated from two dates.",{"src":40,"width":16,"height":41,"caption":42},"\u002Fimages\u002Fwriting\u002Ffigures\u002Ffigma-components-logic-layer-6.webp",1293,"The Block script editor, where logic and design come together.","Jinson Johny argues that Figma design systems become hard to maintain as components grow complex and project-specific, and that components need a logic layer like Framer's early code components. He introduces Blocks, a weekend proof of concept that gives Figma components JavaScript-scripted logic and stored data, so AI can follow the system's rules instead of guessing.",{},true,"\u002Fwriting\u002Ffigma-components-logic-layer",5,[49],{"label":50,"href":51},"Block: the logic layer for Figma components","\u002Fproducts\u002Fblock",{"description":19},"writing\u002Ffigma-components-logic-layer",[55,58,61,64],{"lead":56,"text":57},"Maintenance is the hard part","Building the first components is easy; complex, project-specific components can need a full onboarding session just to use.",{"lead":59,"text":60},"Data inside the system","Figma text properties are limited, so data hangs on top of pixels; a hidden Block layer keeps it intact across variants and restructuring.",{"lead":62,"text":63},"Plain JavaScript logic","The scripting engine exposes the canvas and component properties as a standard JavaScript object, so logic reads like a React component or node script.",{"lead":65,"text":66},"AI follows the rules","Because data connects to properties through logic, AI can follow the design system's rules, and he envisions agents writing that logic from plain-English descriptions.","JhD_ncZG2gCvaZOltZkCeltgPwtPLZX1dQtEs-A7lVQ",1793655448900]