【技术干货】如何在Vaadin应用程序中使用自定义Figma组件

外边暮雪 發表於 2025-12-9 10:45:00

【技术干货】如何在Vaadin应用程序中使用自定义Figma组件

<img src="https://image.evget.com/attachment/keditor/image/20251209/100106_6.png">
Vaadin 是一个面向企业级应用的现代 Web 开发框架，专注于 Java 全栈开发、组件化 UI 构建，并提供丰富的开箱即用 Web Components。Vaadin 的优势包括：
<ul>
<li>
Java 到前端的统一开发体验
</li>
<li>
企业级安全性与长生命周期支持
</li>
<li>
高质量 UI 组件库与设计系统
</li>
<li>
与 Figma 无缝衔接的 Copilot AI 辅助开发能力
</li>
</ul>
在最新版本中，Vaadin Copilot 新增了 Figma Importer API，实现“从设计到代码”的自动化，让开发者可以直接将 Figma 组件复制并粘贴到 Vaadin 项目中，生成 Java 或 React 代码。
本文基于 Vaadin 官方示例并由慧都整理改写，帮助国内开发者快速上手。
获取Vaadin产品试用  请联系慧都科技>>>
<hr>
<h3>1. 功能概览：从 Figma 复制、到 Vaadin 自动生成代码</h3>
通过 Vaadin Copilot 的 Figma Importer API，你可以做到：
<ul>
<li>
从 Figma 复制组件或实例（如卡片、按钮）
</li>
<li>
在 Vaadin 项目中直接粘贴
</li>
<li>
自动生成对应的 Java（Flow） 或 React（Hilla） 组件代码
</li>
</ul>
<img src="https://blog.vaadin.com/hs-fs/hubfs/undefined-Dec-01-2025-01-02-00-9097-PM.png?width=1600&height=362&name=undefined-Dec-01-2025-01-02-00-9097-PM.png">
Figma Importer API 用于将 Simple Design System Card 映射到 Java SDSCard 组件。
官方项目基于：
<ul>
<li>
Demo 项目
</li>
<li>
Figma 组件与实例示例
</li>
</ul>
<hr>
<h3>2. 使用前准备</h3>
<h4>启用 Vite 热重载（推荐）</h4>
在 Spring Bootapplication.properties中加入：
<pre class="prettyprint highlighter-hljs"><code>vaadin.frontend.hotdeploy=true</code></pre>
<hr>
<h3>3. Figma 组件体系与 Importer API 原理</h3>
许多公司（包括 Vaadin）都有自己的 Figma 设计系统，也可使用公开设计系统（如 Simple Design System）。 Vaadin Copilot 24.9 引入的 Figma Importer API 用于将这些组件映射为真实代码。
<h4>Figma → Vaadin 的映射关系：</h4>
<ul>
<li>
Figma 的 Component ≈ Java/TS 中的 class
</li>
<li>
Figma 的 Instance ≈ Java/TS 中的 object
</li>
<li>
属性可被实例覆盖
</li>
<li>
通过“标记属性（marker property）”来区分组件类型
</li>
</ul>
例如，Figma 中 Card 组件的属性：
<pre class="prettyprint highlighter-hljs"><code>type = SDSCard</code></pre>
Importer 仅匹配带有此属性的组件。
<hr>
<h3>4. 目标 Java / React 组件示例</h3>
以 SDSCard 与 SDSButton 为例：
<h4>若手动创建 Java 组件：</h4>
<pre class="prettyprint lang-java highlighter-hljs"><code>var sdscard = new SDSCard();
sdscard.setTitle("Great news!");
sdscard.setBody(sayHello);

var sdsbutton = new SDSButton();
sdsbutton.setLabel("Sure!");
sdscard.add(sdsbutton);</code></pre>
若使用 React：
<pre class="prettyprint highlighter-hljs"><code><SDSCard title="Great news!">
Did you know that Vaadin Copilot can import Figma components?
<SDSButton label="Sure!" />
</SDSCard></code></pre>
示例工程已包含这些组件。
<hr>
<h3>5. 编写 Importer：从 Figma 转换为 Java/React</h3>
Importer 是一个 TypeScript 函数：
<ul>
<li>
输入 FigmaNode
</li>
<li>
输出 ComponentDefinition
</li>
<li>
根据目标语言（Java 或 React）生成代码结构
</li>
</ul>
<hr>
<h4>5.1 SDSCard Java Importer 示例</h4>
文件：frontend/sdscard-java-importer.ts
<pre class="prettyprint highlighter-hljs"><code>function sdsCardJavaImporter(node, metadata) {
if (node.properties.type === 'SDSCard' && metadata.target === 'java') {
return {
 tag: 'SDSCard',
 props: {
 title: node.properties.title,
 body: {
 tag: 'Span',
 props: { text: node.properties.body },
 javaClass: 'com.vaadin.flow.component.html.Span',
 },
 },
 children: createChildrenDefinitions(node, metadata, n => {
 return n.properties.type === 'SDSButton';
 }),
 javaClass: 'test.vaadin.copilot.flow.testviews.ui.customcomponents.components.SDSCard',
};
}
}
registerImporter(sdsCardJavaImporter);</code></pre>
<h4>核心点说明：</h4>
<ul>
<li>
匹配type: SDSCard
</li>
<li>
生成 Java 组件结构
</li>
<li>
子组件过滤以查找 Button
</li>
</ul>
<hr>
<h4>5.2 SDSButton Java Importer</h4>
文件：frontend/sdsbutton-java-importer.ts
<pre class="prettyprint highlighter-hljs"><code>function sdsButtonJavaImporter(node, metadata) {
if (node.properties.type === 'SDSButton' && metadata.target === 'java') {
return {
 tag: 'SDSButton',
 props: { label: node.properties.label },
 children: [],
 javaClass: 'test.vaadin.copilot.flow.testviews.ui.customcomponents.components.SDSButton',
};
}
}
registerImporter(sdsButtonJavaImporter);</code></pre>
<h4>5.3 SDSCard React Importer</h4>
文件：frontend/sdscard-react-importer.ts
<pre class="prettyprint highlighter-hljs"><code>function sdsCardReactImporter(node, metadata) {
if (node.properties.type === 'SDSCard' && metadata.target === 'react') {
return {
 tag: 'SDSCard',
 props: { title: node.properties.title },
 children: [
 {
 tag: 'span',
 props: { slot: 'body' },
 children: ,
 },
 ...createChildrenDefinitions(node, metadata, n => n.properties.type === 'SDSButton'),
 ],
 reactImports: { SDSCard: 'Frontend/components/SDSCard' },
};
}
}
registerImporter(sdsCardReactImporter);</code></pre>
<h4>5.4 SDSButton React Importer</h4>
文件：frontend/sdsbutton-react-importer.ts
<pre class="prettyprint highlighter-hljs"><code>function sdsButtonReactImporter(node, metadata) {
if (node.properties.type === 'SDSButton' && metadata.target === 'react') {
return {
 tag: 'SDSButton',
 props: { label: node.properties.label },
 children: [],
 reactImports: { SDSButton: 'Frontend/components/SDSButton' },
};
}
}
registerImporter(sdsButtonReactImporter);</code></pre>
<h3>6. 在项目中启用 Importer</h3>
<h4>Flow（Java）项目中：</h4>
<pre class="prettyprint lang-java highlighter-hljs"><code>@SpringBootApplication
@JsModule(value = "./sdscard-java-importer.ts", developmentOnly = true)
@JsModule(value = "./sdsbutton-java-importer.ts", developmentOnly = true)
@JsModule(value = "./sdscard-react-importer.ts", developmentOnly = true)
@JsModule(value = "./sdsbutton-react-importer.ts", developmentOnly = true)
public class Application implements AppShellConfigurator {}</code></pre>
React 项目：index.tsx
<pre class="prettyprint lang-java highlighter-hljs"><code>if (import.meta.env.DEV) {
import('./sdscard-java-importer');
import('./sdsbutton-java-importer');
import('./sdscard-react-importer');
import('./sdsbutton-react-importer');
}</code></pre>
<h3>7. 自动生成的代码示例</h3>
<h4>Java 生成代码：</h4>
<pre class="prettyprint lang-java highlighter-hljs"><code>SDSCard sdscard = new SDSCard();
sdscard.setTitle("Great news!");
Span didYouKnowThatVaadin = new Span("Did you know that Vaadin Copilot can import Figma components?");
sdscard.setBody(didYouKnowThatVaadin);

SDSButton sure = new SDSButton();
sure.setLabel("Sure!");
sdscard.add(sure);

add(sdscard);</code></pre>
React 生成代码：
<pre class="prettyprint highlighter-hljs"><code><SDSCard title="Great news!">

 Did you know that Vaadin Copilot can import Figma components?

<SDSButton label="Sure!" />
</SDSCard></code></pre>
<h3>Vaadin 25 版本更新提醒</h3>
在 Vaadin 25 中：
<ul>
<li>
_registerImporter→registerImporter
</li>
<li>
_createChildrenDefinitions→createChildrenDefinitions
</li>
</ul>
请注意 API 名称变更。
 
获取Vaadin产品试用  请联系慧都科技>>> 
来源：https://www.cnblogs.com/software-Development/p/19325312

頁: [1]

琼殿技术论坛's Archiver

【技术干货】如何在Vaadin应用程序中使用自定义Figma组件