--- title: "Blocks: Make your Figma components AI ready, by Jinson Johny" description: "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." url: https://jinson.me/products/block markdown: https://jinson.me/products/block.md type: SoftwareApplication author: Jinson Johny (https://jinson.me/#person) updated: 2026-11-01 --- Blocks · since Jan 2026Beta # Make your Figma components AI ready By [Jinson Johny](https://jinson.me/about.md) · Updated Nov 2026 [blocks.is](https://blocks.is) ![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.](https://jinson.me/images/products/blocks-heatmap.webp) ## In short Blocks is a Figma plugin by Jinson Johny that makes design-system components AI ready. It ships with two skills for Figma's agent: block-create sets up a component or a whole screen so its data, totals and states follow the content, and block-update fills copies with new content from a plain request. The plugin shows a heat map of what AI can change in each component and logs every change. He started it in January 2026 as Block, a logic layer for Figma components; version 0.2.0 (November 2026) renamed it Blocks and added the agent skills. ## Why does Blocks exist? 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. Jinson made the case in [“Making Figma Components Smart: Why Design Systems Need a Logic Layer”](https://jinson.me/writing/figma-components-logic-layer.md), where it started in January 2026 as Block, a weekend proof of concept. ## How does it work? Blocks is a Figma plugin plus two skills for Figma's agent. 1. **Make a component AI ready.** Select a main component or a whole screen and ask the agent: `/block-create Make this component AI ready`. It works out the component's data, totals and states, and checks its reading with you before saving. 2. **Change the data by asking.** Select a copy and ask: `/block-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. 3. **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. ## How did Block become Blocks? 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. Block before 0.2.0: typed inputs redrawing a calendar component. · [from the Block article on Bootcamp](https://medium.com/design-bootcamp/making-figma-components-functional-why-design-systems-need-a-logic-layer-933837fa6e17) 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”. ![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.](https://jinson.me/images/products/blocks-talk.webp) Teaching AI to understand design systems, at Friends of Figma Dubai, October 2026. ## Timeline 1. Jan 2026 · Introduced as a weekend proof of concept in “Why design systems need a logic layer” (Bootcamp) 2. Apr 2026 · Block beta at blocks.is: typed inputs and a logic layer for Figma components 3. Oct 2026 · Shown at Friends of Figma Dubai’s Show & Tell: “Teaching AI to understand design systems” 4. Nov 2026 · Blocks 0.2.0: renamed, and rebuilt as an AI-readiness layer with two skills for Figma’s agent ## Written about Blocks [Why design systems need a "logic layer" · Jan 2026](https://jinson.me/writing/figma-components-logic-layer.md) - **Maker:** Jinson Johny - **Started:** January 2026 - **Status:** beta - **Platforms:** Figma · Figma's agent - **Website:** [blocks.is](https://blocks.is) ## How did Blocks evolve? Work in progress, as Jinson posted it on X. May 2026 to May 2026. 1. May 2026 Working on the Block Collection API, so designers can build Figma components with logic instead of a long list of component properties. [View post](https://x.com/jinsoncjohny/status/2050873140600074383) 2. May 2026 Testing the headless collection API on a seat-map component in Figma. [View post](https://x.com/jinsoncjohny/status/2054231791666630793) 3. May 2026 Cleaning up the UI. Logic lives in the component, and instances update in real time. [View post](https://x.com/jinsoncjohny/status/2054307584480522537) [Next project · Playback](https://jinson.me/products/playback.md) --- **About the author.** Jinson Johny is a Dubai-based Design Engineer and Senior Product Designer for Design Systems and Design Ops at IBM iX. He is the creator of Deck (deck.is), a Figma-to-PowerPoint plugin used by 160,000+ designers since 2017, and .gui (dotgui.org), an open file format for user interfaces. Open to design engineering, design systems, DesignOps, AI design and product design roles in the UK (London) and remote. Contact: hello@jinson.me · [Open to work](https://jinson.me/hire.md) · [All pages](https://jinson.me/llms.txt)