---
title: "Making Figma Components Smart: Why Design Systems Need a \"Logic Layer\" · Bootcamp · Jinson Johny"
description: "Summary of Jinson Johny's Bootcamp article on why Figma design systems need a logic layer, introducing Block: scripted logic and data for components."
url: https://jinson.me/writing/figma-components-logic-layer
markdown: https://jinson.me/writing/figma-components-logic-layer.md
type: Article
author: Jinson Johny (https://jinson.me/#person)
updated: 2026-11-01
---

[Published in **Bootcamp** · Jan 13, 2026](https://medium.com/design-bootcamp/making-figma-components-functional-why-design-systems-need-a-logic-layer-933837fa6e17)

# Making Figma Components Smart: Why Design Systems Need a "Logic Layer"

By [Jinson Johny](https://jinson.me/about.md) · \~5 min read on Bootcamp

## In short

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.

![The Figma and JavaScript logos above the words “Functional components”, beside Block's logic editor showing calendar code.](https://jinson.me/images/writing/figma-components-logic-layer.webp)

Cover image from the original on [Bootcamp](https://medium.com/design-bootcamp/making-figma-components-functional-why-design-systems-need-a-logic-layer-933837fa6e17)

## Key takeaways

1. **Maintenance is the hard part.** Building the first components is easy; complex, project-specific components can need a full onboarding session just to use.
2. **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.
3. **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.
4. **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.

## From the article

An input component triggers its error variant through validation logic, with no manual design updates.

A shopping cart where the items, discount and total are logically connected.

Date-range selection: instead of updating individual cell variants, the range is calculated from two dates.

![The Block script editor, where logic and design come together.](https://jinson.me/images/writing/figures/figma-components-logic-layer-6.webp)

The Block script editor, where logic and design come together.

This is a summary. The full article lives on Bootcamp, where it was first published.

[Read the full article on Bootcamp](https://medium.com/design-bootcamp/making-figma-components-functional-why-design-systems-need-a-logic-layer-933837fa6e17)

## Related

[Block: the logic layer for Figma components](https://jinson.me/products/block.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)