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

Vaadin 是一个面向企业级应用的现代 Web 开发框架，专注于 Java 全栈开发、组件化 UI 构建，并提供丰富的开箱即用 Web Components。Vaadin 的优势包括：

• Java 到前端的统一开发体验
  
• 企业级安全性与长生命周期支持
  
• 高质量 UI 组件库与设计系统
  
• 与 Figma 无缝衔接的 Copilot AI 辅助开发能力
  

在最新版本中，Vaadin Copilot 新增了 Figma Importer API，实现“从设计到代码”的自动化，让开发者可以直接将 Figma 组件复制并粘贴到 Vaadin 项目中，生成 Java 或 React 代码。
本文基于 Vaadin 官方示例并由慧都整理改写，帮助国内开发者快速上手。
获取Vaadin产品试用  请联系慧都科技>>>
1. 功能概览：从 Figma 复制、到 Vaadin 自动生成代码

通过 Vaadin Copilot 的 Figma Importer API，你可以做到：

• 从 Figma 复制组件或实例（如卡片、按钮）
  
• 在 Vaadin 项目中直接粘贴
  
• 自动生成对应的 Java（Flow） 或 React（Hilla） 组件代码
  

Figma Importer API 用于将 Simple Design System Card 映射到 Java SDSCard 组件。
官方项目基于：

• Demo 项目
  
• Figma 组件与实例示例
  

2. 使用前准备

启用 Vite 热重载（推荐）

在 Spring Bootapplication.properties中加入：

1. vaadin.frontend.hotdeploy=true

复制代码

3. Figma 组件体系与 Importer API 原理

许多公司（包括 Vaadin）都有自己的 Figma 设计系统，也可使用公开设计系统（如 Simple Design System）。
Vaadin Copilot 24.9 引入的 Figma Importer API 用于将这些组件映射为真实代码。
Figma → Vaadin 的映射关系：

• Figma 的 Component ≈ Java/TS 中的 class
  
• Figma 的 Instance ≈ Java/TS 中的 object
  
• 属性可被实例覆盖
  
• 通过“标记属性（marker property）”来区分组件类型
  

例如，Figma 中 Card 组件的属性：

1. type = SDSCard

复制代码

Importer 仅匹配带有此属性的组件。
4. 目标 Java / React 组件示例

以 SDSCard 与 SDSButton 为例：
若手动创建 Java 组件：

1. var sdscard = new SDSCard();
2. sdscard.setTitle("Great news!");
3. sdscard.setBody(sayHello);
5. var sdsbutton = new SDSButton();
6. sdsbutton.setLabel("Sure!");
7. sdscard.add(sdsbutton);

复制代码

若使用 React：

1. <SDSCard title="Great news!">
2.    Did you know that Vaadin Copilot can import Figma components?
3.    <SDSButton label="Sure!" />
4. </SDSCard>

复制代码

示例工程已包含这些组件。
5. 编写 Importer：从 Figma 转换为 Java/React

Importer 是一个 TypeScript 函数：

• 输入 FigmaNode
  
• 输出 ComponentDefinition
  
• 根据目标语言（Java 或 React）生成代码结构
  

5.1 SDSCard Java Importer 示例

文件：frontend/sdscard-java-importer.ts

1. function sdsCardJavaImporter(node, metadata) {
2.   if (node.properties.type === 'SDSCard' && metadata.target === 'java') {
3.     return {
4.       tag: 'SDSCard',
5.       props: {
6.         title: node.properties.title,
7.         body: {
8.           tag: 'Span',
9.           props: { text: node.properties.body },
10.           javaClass: 'com.vaadin.flow.component.html.Span',
11.         },
12.       },
13.       children: createChildrenDefinitions(node, metadata, n => {
14.         return n.properties.type === 'SDSButton';
15.       }),
16.       javaClass: 'test.vaadin.copilot.flow.testviews.ui.customcomponents.components.SDSCard',
17.     };
18.   }
19. }
20. registerImporter(sdsCardJavaImporter);

复制代码

核心点说明：

• 匹配type: SDSCard
  
• 生成 Java 组件结构
  
• 子组件过滤以查找 Button
  

5.2 SDSButton Java Importer

文件：frontend/sdsbutton-java-importer.ts

1. function sdsButtonJavaImporter(node, metadata) {
2.   if (node.properties.type === 'SDSButton' && metadata.target === 'java') {
3.     return {
4.       tag: 'SDSButton',
5.       props: { label: node.properties.label },
6.       children: [],
7.       javaClass: 'test.vaadin.copilot.flow.testviews.ui.customcomponents.components.SDSButton',
8.     };
9.   }
10. }
11. registerImporter(sdsButtonJavaImporter);

复制代码

5.3 SDSCard React Importer

文件：frontend/sdscard-react-importer.ts

1. function sdsCardReactImporter(node, metadata) {
2.   if (node.properties.type === 'SDSCard' && metadata.target === 'react') {
3.     return {
4.       tag: 'SDSCard',
5.       props: { title: node.properties.title },
6.       children: [
7.         {
8.           tag: 'span',
9.           props: { slot: 'body' },
10.           children: [node.properties.body.toString()],
11.         },
12.         ...createChildrenDefinitions(node, metadata, n => n.properties.type === 'SDSButton'),
13.       ],
14.       reactImports: { SDSCard: 'Frontend/components/SDSCard' },
15.     };
16.   }
17. }
18. registerImporter(sdsCardReactImporter);

复制代码

5.4 SDSButton React Importer

文件：frontend/sdsbutton-react-importer.ts

1. function sdsButtonReactImporter(node, metadata) {
2.   if (node.properties.type === 'SDSButton' && metadata.target === 'react') {
3.     return {
4.       tag: 'SDSButton',
5.       props: { label: node.properties.label },
6.       children: [],
7.       reactImports: { SDSButton: 'Frontend/components/SDSButton' },
8.     };
9.   }
10. }
11. registerImporter(sdsButtonReactImporter);

复制代码

6. 在项目中启用 Importer

Flow（Java）项目中：

1. @SpringBootApplication
2. @JsModule(value = "./sdscard-java-importer.ts", developmentOnly = true)
3. @JsModule(value = "./sdsbutton-java-importer.ts", developmentOnly = true)
4. @JsModule(value = "./sdscard-react-importer.ts", developmentOnly = true)
5. @JsModule(value = "./sdsbutton-react-importer.ts", developmentOnly = true)
6. public class Application implements AppShellConfigurator {}

复制代码

React 项目：index.tsx

1. if (import.meta.env.DEV) {
2.   import('./sdscard-java-importer');
3.   import('./sdsbutton-java-importer');
4.   import('./sdscard-react-importer');
5.   import('./sdsbutton-react-importer');
6. }

复制代码

7. 自动生成的代码示例

Java 生成代码：

1. SDSCard sdscard = new SDSCard();
2. sdscard.setTitle("Great news!");
3. Span didYouKnowThatVaadin = new Span("Did you know that Vaadin Copilot can import Figma components?");
4. sdscard.setBody(didYouKnowThatVaadin);
6. SDSButton sure = new SDSButton();
7. sure.setLabel("Sure!");
8. sdscard.add(sure);
10. add(sdscard);

复制代码

React 生成代码：

1.       <SDSCard title="Great news!">
2.    Did you know that Vaadin Copilot can import Figma components?
3.    <SDSButton label="Sure!" />
4. </SDSCard>   

复制代码

Vaadin 25 版本更新提醒

在 Vaadin 25 中：

• _registerImporter→registerImporter
  
• _createChildrenDefinitions→createChildrenDefinitions
  

请注意 API 名称变更。
 
获取Vaadin产品试用  请联系慧都科技>>>

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！