❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦

🚀 快速阅读

  1. 功能：将 Figma 设计直接转换为 Vue.js 应用程序，支持低代码渲染和数据绑定。
  2. 技术：基于 Figma API 和 Luisa 框架，实现设计到代码的自动化转换。
  3. 应用：适用于快速原型制作、敏捷开发、MVP 开发等场景。

正文（附运行示例）

Figma-Low-Code 是什么

figma-low-code.png

Figma-Low-Code 是一个开源项目，基于 Luisa 框架，支持开发者直接将 Figma 设计转换为 Vue.js 应用程序。它大幅减少了设计师与开发者之间的交接时间，减少了前端编码工作，确保 Figma 设计作为唯一的数据源。

Figma-Low-Code 支持零代码渲染设计、原型和设计系统，让设计变更无需代码修改，清晰分离 UI 和业务逻辑，让开发者专注于编写业务逻辑代码，让设计师继续用他们熟悉的 Figma 工具。

Figma-Low-Code 的主要功能

  • 设计到代码的转换：将 Figma 设计直接转换为 Vue.js 应用程序，减少设计师和开发者之间的交接时间。
  • 低代码渲染：实现应用设计、原型和设计系统的零代码渲染。
  • 数据绑定支持：支持 Vue 数据绑定，让设计中的元素与应用程序的数据模型同步。
  • 业务逻辑分离：清晰分离 UI 和业务逻辑，让开发者专注于编写业务逻辑代码。
  • 自定义组件扩展：支持开发者添加自定义 Vue 组件，扩展设计系统的功能。
  • 响应式渲染：支持根据不同屏幕分辨率渲染不同的 Figma 页面。

Figma-Low-Code 的技术原理

  • Figma API 集成：基于 Figma API 将设计文件中的元素和布局转换为 Vue 组件。
  • Luisa 框架：基于 Luisa 框架，实现设计到代码的自动化转换。
  • 数据绑定：基于 Vue.js 的数据绑定机制，将 Figma 设计中的元素与应用程序的数据状态连接起来。
  • 组件化：将 Figma 设计中的元素封装为 Vue 组件，实现可重用性和模块化。
  • 插件机制：基于 Figma 插件，支持开发者在 Figma 设计文件中直接设置元素类型、数据绑定和事件回调。
  • 响应式设计：根据 Figma 设计中的响应式规则，自动调整 Vue 组件的布局和样式。

如何运行 Figma-Low-Code

1. 安装 Figma-Low-Code

首先，克隆项目仓库并安装依赖：

git clone https://github.com/KlausSchaefers/figma-low-code.git
cd figma-low-code
npm install
2. 启动服务器

安装完成后，启动服务器：

npm run serve
3. 配置 Figma 文件

在 src/views/Home.vue 中配置 Figma 文件 ID 和访问密钥：

<template>
  <div class="home">
    <Luisa :design="figmaConfig" v-model="viewModel"/>
  </div>
</template>

<script>
import Vue from "vue";
import Luisa from 'luisa-vue'
Vue.use(Luisa);

export default {
  name: 'Home',
  data: function () {
    return {
      figmaConfig: {
        figmaFile: '<Figma 文件 ID>',
        figmaAccessKey: '<Figma 访问密钥>',
      },
      viewModel: {}
    }
  }
}
</script>
4. 数据绑定

通过 Figma-Low-Code 插件设置数据绑定：

  1. 启动插件。
  2. 选择元素。
  3. 在 "Low Code" 标签中设置变量名，如 user.name。
5. 自定义组件

如果需要自定义组件，可以在插件中选择 "Custom" 并输入组件名称，然后在 Vue 中注册组件：

<template>
  <div class="home">
    <Luisa :design="figmaConfig" v-model="viewModel" :config="config"/>
  </div>
</template>

<script>
import Vue from "vue";
import Luisa from 'luisa-vue'
import MyComponent from './MyComponent.vue';
Vue.use(Luisa);

export default {
  name: 'Home',
  data: function () {
    return {
      figmaConfig: {
        figmaFile: '<Figma 文件 ID>',
        figmaAccessKey: '<Figma 访问密钥>',
      },
      viewModel: {},
      config: {
        components: {
          'MyComponent': MyComponent
        }
      }
    }
  }
}
</script>

资源

❤️ 如果你也关注 AI 的发展现状，且对 AI 应用开发非常感兴趣，我会每日跟你分享最新的 AI 资讯和开源应用，也会不定期分享自己的想法和开源实例，欢迎关注我哦！

🥦 微信公众号｜搜一搜：蚝油菜花 🥦