Back to Plugins
Font Flex: Framework-Based Typography Sync / 字型 style 管理

Font Flex: Framework-Based Typography Sync / 字型 style 管理

Use framework structures as a reference to quickly generate font styles and replace fonts globally.

Plugin Preview

Font Flex: Framework-Based Typography Sync / 字型 style 管理 preview

About this plugin

A typography management tool built for flexible design workflows. Instead of enforcing rigid specifications, we provide the "typographic structures" of popular frameworks as a starting point, allowing you to choose your fonts while maintaining a systematic development logic.


Key Features:

  1. Framework-Based Structures: Use the hierarchy of Bootstrap, Tailwind, and Material 3 (e.g., fs-1, text-9xl) as a template. Apply your chosen font to these structures and sync them to Local Text Styles instantly.
  2. Full Customization Control: Create your own Desktop and Mobile H1-H6 scales. With direct numeric input for font size, line height, and letter spacing, you have total control over your design system.
  3. Smart Global Replacement: Automatically scan all fonts used in your file. Replace fonts across the entire document or specific styles with a single click.
  4. Streamlined Experience: An optimized UI featuring numeric-only inputs and real-time font previews. Includes an EN/ZH language toggle to suit your preferred workflow.

-------

這是一款專為靈活設計工作流打造的字型管理工具。我們不強制您遵循死板的規範,而是提供主流框架的「排版結構」作為起點,讓您自由決定字型,同時保持系統化的開發邏輯。


核心功能:

  1. 參考主流框架結構: 內建 Bootstrap、Tailwind 及 Material 3 的排版階層(如 fs-1, text-9xl),讓您在選擇字型後,能快速以此結構建立 Local Text Styles。
  2. 完全自主的自定義規範: 自由定義 Desktop 與 Mobile 的 H1-H6 級別。您可以精確手動輸入字級、行高與字距,完全掌控設計系統的細節。
  3. 智慧全域替換: 自動掃描檔案中使用的字型,並針對樣式面板或畫布上的節點進行一鍵替換,讓字型調整不再是負擔。
  4. 無縫輸入體驗: 優化 UI 移除多餘控制項,支援純數字輸入與即時字型預覽。內建中英文語系切換,適配您的工作環境。

Plugin Details

Version4
CreatedDecember 30, 2025
Last UpdatedDecember 31, 2025
CategoryFile organization plugins
CreatorEric Kuo
Stats6 installs, 0 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none