从 Figma 到 Bulma CSS：实用转换指南

相比 Bootstrap 或 Tailwind,Bulma 处在一个有点特殊的位置:它是一个完整的组件框架,却又是纯类驱动的——不带任何 JavaScript,也不需要构建步骤。这让它成为 Figma 导出的一个干净目标,但要把设计手动转换成 Bulma 特定的类词汇,仍然需要充分了解它的网格、间距和修饰符系统,才能每次都选对类。

为什么手动把 Figma 转成 Bulma 很慢

Bulma 基于 flexbox 的网格(columns、column、尺寸修饰符 is-*)写出来之后读起来很简单,但要凭手动从一个 Figma frame 走到那一步,和转换任何其他框架一样,需要做同样重复的翻译工作:

• 把 Auto Layout 映射到 Bulma 的列系统。 Figma 里一行间距均匀的元素,必须变成正确组合的 columns、column is-half/is-one-third 以及 gap 处理方式——全靠肉眼判断,一个 frame 一个 frame 地来。
• 选对修饰符类。 Bulma 的大部分样式都通过修饰符(is-primary、is-rounded、is-large)表达,所以要把 Figma 里的填充色或圆角翻译成"最接近的 Bulma 修饰符",而这种对应关系并不总是完全精确。
• 重建排版和间距,要用 Bulma 自己的刻度(title、subtitle、mb-*/mt-* 辅助类),而不是直接照抄像素值。
• 在每个断点都重复一遍,因为 Bulma 的响应式辅助类(is-hidden-mobile、列宽变化)需要针对设计中的每个屏幕尺寸手动添加。

这些步骤本身都不难,但正是这种重复、依赖大量主观判断的工作,最容易在一个真实的多页面设计里悄悄埋下不一致。

MarkupGen 如何从真实设计生成 Bulma 输出

MarkupGen 直接消除这个翻译步骤,而不只是让它变快。无论输出格式是什么,工作流程都一样:

1. 用 MarkupGen 插件从 Figma 导出 frame,插件会同时捕获结构、样式和图片。
2. AI 根据真实结构构建标记,而不是一个大致的近似值。
3. 在内置编辑器里可视化打磨内容、字体和布局,再最终确定。
4. 导出最终代码包,目标格式为 Bulma 1.0.2。

导出时,Figma 里的 Auto Layout 和间距值会被映射到 Bulma 真实的网格类和辅助类上,而不是靠猜——一行使用 Auto Layout 的元素会变成尺寸相应的 columns/column 结构,padding、gap 和对齐方式会解析成 Bulma 的间距辅助类,而不是内联样式。输出完全不依赖任何 JavaScript,与 Bulma 自身的理念一致,所以不需要额外接线 CSS 就能正确渲染。

Bulma 在 MarkupGen 输出格式中的定位

Bulma 是 MarkupGen 支持的六种 CSS 目标之一,与纯 CSS、Tailwind、Bootstrap、Materialize 和 Pico 并列——在配置面板中按项目选择,而不是提前锁定。当你想要现代、干净的默认外观,又不想像 Bootstrap 或 Materialize 那样引入一整套组件库时,它就是值得选的选项。查看全部六种格式的横向对比,见MarkupGen 支持的 6 种 CSS 框架。

发布前检查生成的标记

自动转换在大部分设计上都能生成正确的类结构,但合并前仍值得过一遍:

• 检查每个断点的列宽——Bulma 的网格很灵活,所以要确认生成的 is-* 尺寸在移动端也符合意图,不只是桌面端。
• 排查重复的修饰符模式,尤其是同一个组件(一张卡片、一种按钮样式)出现多次的地方——它在各处应该解析为相同的修饰符类。
• 确认 Bulma 类下面的 HTML 是语义化的——输出默认偏向有意义的标签,而不是嵌套的 <div>。
• 用内置编辑器做内容或布局调整,而不是手动修改已导出的类,再重新导出。

每次导出还会附带一个自动 AI 质量评分,让你快速判断是否可以发布,还是值得再看一眼。

在你自己的设计上试试

如果你还在手动挑选 Bulma 修饰符类来匹配一个 Figma 文件,不妨看看当类是从设计的真实数值生成时,这部分工作能省下多少。免费试用 MarkupGen,用你自己的某个 frame 试试,或者查看 Figma 转 Bulma 转换器页面,了解开箱即得的内容。