(2026) TypeFlow - A typography system engine for Figma

Figma용 타이포그래피 시스템 엔진

Overview

TypeFlow is a Figma plugin I designed to automate typography system creation. Instead of manually creating text styles, variables, naming structures, and exports one by one, the plugin lets designers define rules once and generate a connected system across design and handoff outputs.

TypeFlow ensures that tokens, styles, and outputs are generated and kept in sync from a single source of truth.

_{KR

TypeFlow는 타이포그래피 시스템 구축을 자동화하기 위해 만든 Figma 플러그인이다. 텍스트 스타일, 변수, 네이밍, export를 각각 수동으로 만드는 대신, 규칙을 한 번 정의하면 연결된 시스템으로 생성되도록 설계했다.

TypeFlow는 토큰, 스타일, 출력 결과를 하나의 source에서 생성하고 동기화되도록 만든다.}

Why I built it

In practice, typography systems are foundational but still surprisingly manual. Even with clear design rules, designers often have to separately create styles, variables, naming, and exports, then reconnect everything again when changes happen. I wanted to reduce that fragmented workflow and turn system setup into a repeatable, reusable process.

^{KR
실무에서 타이포그래피 시스템은 기본이지만, 구축 과정은 여전히 많이 수동적이다. 규칙이 명확해도 스타일, 변수, 네이밍, export를 각각 만들고, 수정이 생기면 다시 연결해야 한다. 이 분절된 워크플로우를 줄이고, 시스템 세팅을 반복 가능하고 재사용 가능한 과정으로 바꾸고 싶었다.}

Research & Gaps in Existing Tools

토큰스튜디어 스크린샷

Tokens Studio

Tokens Studio is one of the most widely used plugins for managing design tokens. It allows designers to define tokens (color, spacing, typography) and sync them across files or even with code via JSON and GitHub.

However, while powerful, it revealed several gaps in real workflows:

It focuses on managing tokens, not generating systems
Typography still needs to be defined manually (scale, hierarchy)
Style creation and token binding are often separate steps

^{KR
Tokens Studio는 가장 널리 사용되는 디자인 토큰 관리 플러그인 중 하나로, 색상, 스페이싱, 타이포그래피 등의 토큰을 정의하고 JSON이나 GitHub와 연동할 수 있다.

하지만 실제 사용하면서 다음과 같은 한계를 발견했다:

토큰을 관리하는 데 집중되어 있고, 시스템을 생성하지는 않음
타이포그래피는 여전히 스케일과 위계를 수동으로 설계해야 함
스타일 생성과 토큰 바인딩이 분리된 과정

Tokens Studio = “관리 중심”

TypeFlow = “생성 + 적용 중심”}

Typescale plugins
Typography-focused plugins like Typescale help designers generate balanced typographic scales based on ratios.

They are useful for calculating sizes, but:

No connection to tokens or styles
No support for multi-device logic
Output is not reusable as a system

^KR
^{Typescale 같은 플러그인은 ratio 기반으로 타이포그래피 스케일을 계산해주는 도구다.

하지만 다음과 같은 한계가 있었다:

토큰이나 스타일과 연결되지 않음
멀티 디바이스 대응이 없음
결과물이 재사용 가능한 시스템으로 남지 않음

Typescale = “값 계산”
TypeFlow = “시스템 생성 + 구조화”}

Core idea

Existing tools either manage tokens, calculate scales, or generate initial systems — but none connect generation, binding, and reuse into a single workflow.

TypeFlow was designed to unify these fragmented workflows into a single system:
define once → generate → bind → export → reuse

^{KR
기존 툴들은 토큰 관리, 스케일 계산, 초기 생성 중 하나만 해결할 뿐,
생성 → 바인딩 → 재사용까지 하나의 흐름으로 연결하지는 못한다.

TypeFlow는 이 분절된 과정을 하나의 흐름으로 통합하기 위해 설계되었다:
한 번 정의 → 생성 → 바인딩 → export → 재사용}

What it does

Generates type scales from base size + ratio

Supports mobile / tablet / desktop modes

Creates typography tokens

Creates text styles

Binds styles to variables

Exports JSON and CSS

Supports JSON import and presets for reuse

_{KR

base size + ratio 기반 타입 스케일 생성
mobile / tablet / desktop 모드 지원
타이포그래피 토큰 생성
텍스트 스타일 생성
스타일과 변수 바인딩
JSON / CSS export 지원
JSON import 및 preset 저장/불러오기 지원}

Product decisions

Why typography first
I chose typography as the first scope because it is structured, measurable, and highly reusable. It was the clearest domain to test the idea of “design system generation” before expanding to color or spacing.

_{KR

왜 타이포그래피부터 시작했는가

타이포그래피는 구조적이고 수치화가 가능하며 재사용성이 높아서, “디자인 시스템 생성”이라는 아이디어를 검증하기에 가장 적절한 첫 범위라고 판단했다. 컬러나 스페이싱보다 먼저 다루기에 적합했다.}

Why multi-device modes were necessary
Typography is rarely one-size-fits-all. A scale that works on desktop can feel oversized on mobile. Supporting mobile, tablet, and desktop made the plugin more realistic and better aligned with responsive product workflows.

_{KR

왜 멀티 디바이스 모드가 필요했는가
타이포그래피는 하나의 값으로 끝나지 않는다. 데스크탑에서 적절한 스케일이 모바일에서는 과하게 느껴질 수 있다. 그래서 mobile, tablet, desktop 모드를 넣어 실제 반응형 제품 환경에 더 가깝게 만들었다.}

Why token generation, style creation, and binding were core
Many workflows still require designers to create styles and variables separately, then connect them manually. That means the system may exist conceptually, but not operationally. TypeFlow was designed to generate styles, generate variables, and bind them together so the result becomes a real editable system.

_{KR

왜 토큰 생성, 스타일 생성, 바인딩이 핵심이었는가
기존 워크플로우에서는 스타일과 변수를 따로 만든 뒤 수동으로 연결해야 하는 경우가 많다. 즉, 시스템이 개념적으로는 있어도 실제로 작동하는 시스템이 되지는 않는다. TypeFlow는 스타일 생성, 변수 생성, 바인딩을 한 흐름으로 묶어 실제 수정 가능한 시스템이 되도록 만들었다.}

Why export / import / presets were included

I wanted the plugin to support persistence, not just one-time generation.

Figma Dev Mode is useful for inspecting values of individual UI elements, but it does not define a system.
Export JSON provides a structured system that developers can reuse and scale.
CSS export improved handoff and inspectability
Import JSON completed the loop by allowing saved systems to be restored and reused
Presets reduced repeated setup and supported experimentation

Together, these features turned the plugin from a one-time generator into a reusable workflow tool.

_KR
_{이 플러그인을 일회성 생성기로 만들고 싶지 않았다.

Figma Dev Mode는 개별 UI 요소의 값을 확인하는 데 유용하지만 시스템을 정의하지는 않는다.

Export JSON은 시스템 자체를 구조화하여 재사용과 확장이 가능하도록 만든다.
CSS export는 핸드오프와 inspect를 더 쉽게 만든다.
Import JSON은 저장한 시스템을 다시 불러와 재사용할 수 있게 했다.
Preset은 반복 세팅 비용을 줄이고 실험을 쉽게 만들었다

이 기능들은 플러그인을 단발성 툴이 아니라 반복 사용 가능한 워크플로우 툴로 바꿔주었다.}

Type scale logic

Why base size + ratio

I wanted the system to be rule-based rather than a collection of arbitrary font sizes. Using a base size plus ratio makes the hierarchy proportional and easier to maintain.

_KR
_{타입 스케일을 임의의 폰트 크기 집합이 아니라, 규칙 기반 시스템으로 만들고 싶었다. base size와 ratio를 기준으로 하면 위계가 비례적으로 유지된다.}

UI direction

I initially explored polished design-system references, but many of them felt more like consumer apps than working tools. Since TypeFlow is a system-building interface, I shifted the UI toward a darker, denser, more tool-like direction inspired by Figma and developer tools: panel-based layout, subtle borders, compact spacing, and minimal decoration.

_KR
_{초기에는 polished한 디자인 시스템 레퍼런스도 참고했지만, 대부분 소비자 앱처럼 느껴졌다. TypeFlow는 시스템을 구축하는 작업 도구이기 때문에, Figma와 개발자 툴에 가까운 다크하고 dense한 방향으로 전환했다. 패널 기반 레이아웃, subtle border, compact spacing, 최소한의 장식이 핵심이었다.}

AI-assisted workflow

This project was also an experiment in AI-assisted product making. I used:

Claude Code for UI generation, refactoring, and implementation iteration
Cursor for editing, debugging, and rapid code iteration
Figma MCP to explore the potential and limitations of design-to-code workflows
DESIGN.md as a text-based design rule system to improve consistency in generated UI

One key learning was that AI is much stronger when following explicit rules than when inventing polished product UI on its own.

_KR
_{이 프로젝트는 AI를 실무형 제품 제작 흐름에 어떻게 활용할 수 있는지에 대한 실험이기도 했다.

_{Claude Code: UI 생성, 리팩토링, 구현 iteration}
_{Cursor: 편집, 디버깅, 빠른 코드 수정}
_{Figma MCP: design-to-code 워크플로우의 가능성과 한계 탐색}
_{DESIGN.md: 텍스트 기반 디자인 규칙 문서로 UI 생성 일관성 강화}

중요한 인사이트는, AI는 혼자 polished한 UI를 발명할 때보다 명확한 규칙을 따를 때 훨씬 더 강력하다는 점이었다.}

Key challenges

Making a powerful system tool feel approachable

Balancing flexibility with clarity

Making AI output feel less generic and more tool-like

Designing for repeated workflows, not just one-time generation

_KR

_{강력한 시스템 툴을 너무 복잡하지 않게 만드는 것}

_{유연성과 명확성 사이의 균형}

_{AI 결과물을 generic한 앱 UI가 아니라 tool-like한 방향으로 다듬는 것}

_{일회성 생성이 아니라 반복 사용 워크플로우를 설계하는 것}

Outcome

TypeFlow resulted in a working Figma plugin that generates type scales across multiple modes, creates tokens and styles, binds them together, and supports export, import, and presets. More importantly, it helped me explore how product thinking, system design, and AI-assisted iteration can come together in one workflow.

_KR
_{TypeFlow는 다중 모드 타입 스케일 생성, 토큰/스타일 생성, 바인딩, export/import, preset을 지원하는 작동 가능한 Figma 플러그인으로 완성되었다. 더 중요하게는, 이 프로젝트를 통해 제품 사고, 시스템 설계, AI 기반 iteration을 하나의 워크플로우로 묶는 경험을 할 수 있었다.}

One-line takeaway

TypeFlow started as a typography plugin, but became a way to design a better workflow for generating, applying, and evolving design systems.

_KR
_{TypeFlow는 타이포그래피 플러그인으로 시작했지만, 결국 디자인 시스템을 생성하고 적용하고 발전시키는 더 나은 워크플로우를 설계하는 프로젝트가 되었다.}