Figma 插件开发最佳实践：使用 Svelte 构建插件界面

温欣晶Eve

于 2025-05-26 09:00:15 发布

阅读量349

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00373/article/details/148218703

Figma 插件开发最佳实践：使用 Svelte 构建插件界面

figma-plugin-ds-svelte Figma Plugin DS components made with Svelte 项目地址: https://gitcode.com/gh_mirrors/fi/figma-plugin-ds-svelte

1. 项目介绍

Figma 插件开发中，构建用户界面是一个关键环节。本项目使用了 Svelte，一种现代的 JavaScript 框架，来构建轻量级且高效的 Figma 插件界面。Svelte 的特点在于它不是在客户端运行，而是在构建时生成最终的 JavaScript 代码，这使得插件运行更为高效。本项目提供了一套基于 Svelte 的 UI 组件，使得开发者可以更容易地构建出美观且功能丰富的 Figma 插件。

2. 项目快速启动

首先，您需要在您的 Svelte 项目中安装 figma-plugin-ds-svelte：

npm i -D figma-plugin-ds-svelte

接下来，您可以在 Svelte 组件中引入并使用这些 UI 组件。以下是一个快速启动的例子：

<script>
  import { GlobalCSS } from 'figma-plugin-ds-svelte';
  import { Button, Input } from 'figma-plugin-ds-svelte';

  // 应用全局样式
  GlobalCSS();
</script>

<template>
  <!-- 使用 Button 组件 -->
  <Button on:click={handleClick}>点击我</Button>

  <!-- 使用 Input 组件 -->
  <Input placeholder="输入些什么...">
</template>

<script>
  // 处理按钮点击事件
  function handleClick() {
    console.log('按钮被点击了！');
  }
</script>

确保您的 Figma 插件配置文件正确引用了您的 Svelte 代码。

3. 应用案例和最佳实践

在开发 Figma 插件时，以下是一些最佳实践：

组件化开发：将界面拆分成独立的、可复用的组件，这有助于代码的维护和扩展。
状态管理：使用适当的状态管理策略，如 Svelte 的 writable 和 readable stores，来处理插件的状态。
响应式设计：确保您的插件界面在不同大小的 Figma 画布上都能良好展示。
交互反馈：为用户提供清晰的交互反馈，例如在按钮点击或输入框变化时给予响应。

以下是一个简单的组件化开发的例子：

<script>
  import { Input } from 'figma-plugin-ds-svelte';
  import { onMount } from 'svelte';

  let inputValue = '';

  // 当组件挂载时执行
  onMount(() => {
    console.log('组件已挂载！');
  });

  // 处理输入变化
  function handleInputChange(event) {
    inputValue = event.target.value;
  }
</script>

<template>
  <Input value={inputValue} on:input={handleInputChange} placeholder="请输入文本" />
</template>