npm 包 react-figma 使用教程

阅读时长 8 分钟读完

简介

react-figma 是一个用于将 React 组件和 Figma 图层相互转换的 npm 包。该工具在前端开发与设计协作中发挥着重要作用。这篇文章将会介绍 react-figma 的使用教程,包括它的安装,基本功能以及实例操作。

安装

在安装 react-figma 之前,需要确认已经安装了最新版本的 NodeJS 并且项目已经建立完毕。开始安装如下:

基本功能

将组件转换为节点

-- -------------------- ---- -------
------ - --------- - ---- --------
------ - -------------------- - ---- --------------

----- ---------------- ------- --------- -
  -------- -
    ------ ---------- -------------
  -
-

--- ---- - -------------------------------------- ----

这样就可以将 ExampleComponent 转换为 GUI 中的组件。其中 nodeFromReactElement 函数就是用于转换的。

在节点之间共享数据

如果需要在不同的节点之间共享数据,就需要使用 react-figma 提供的 Data 组件。例如:

-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ------- ---- - ---- --------------

----- ---------------- ------- --------- -
  -------- -
    ------ -
      -----
        ----- ----------------- -------- ---- ------- -- --
        ---------- ------------
      ------
    --
  -
-

------------------------ ----

在这个例子中,我们定义了一个名为 sharedData 的数据,并给它设置了值 { key: 'value' }。这个数据将会在各个节点之间共享。

设置节点的属性

我们可以通过在 React 组件中添加自定义属性来设置 GUI 的节点属性。例如:

-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ------ - ---- --------------

----- ---------------- ------- --------- -
  -------- -
    ------ -
      ----
        -------- ------ ---- ------- ---- ---------------- ------ --
        ------------- -----
      -
        ----- -----
      ------
    --
  -
-

------------------------ ----

React 组件的 stylename 属性将会被转换为 GUI 中组件的属性。

实例操作

我们来实现一个 React 组件,并尝试在 Figma 中使用它。

首先我们创建一个新的 React 组件 ExampleComponent,并将其渲染到 GUI 中:

-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ------ - ---- --------------

----- ---------------- ------- --------- -
  -------- -
    ------ ---------- ------------
  -
-

------------------------ ----

运行该程序后,可以看到 GUI 中出现了一个组件包含着文本内容 “Hello World”。

接着我们需要将它添加到 Figma 的面板中。我们在 index.html 文件中添加如下代码:

该代码片段中的 plugin.js 是我们将在下面编写的脚本文件。

在项目根目录中,创建一个名为 ui.html 的文件,并添加如下代码:

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- --------------- --
    ------------ ------ ----------
  -------
  ------
    ---- ----------------
  -------
  ------- --------------------------
-------

该代码片段中,我们通过 root 组件初始化了一个 UI 窗口。

接着,我们在项目的根目录中创建一个名为 plugin.ts 的文件,并添加如下代码:

-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------ - ---- --------------
------ - ---------------- - ---- -------------------------
------ - ------- --------------- - ---- ------------------
------ ----------------

----- --- - -- -- -
  ----- --------- ----------- - ----------------------

  ----- ------- - -------------------- -- -
    -- --------- -
      ----------------------
    - ---- -
      ------------------------
    -
  -- -----------

  ----- ----------------- - -------------------- -- -
    ----- --- - ---------------------------------- -- -- -- ----
    ----- --------- - -------------------- -------- ----------
    ----------------------
  -- ----

  ------------------ -- -
    --------------------------- -------------------
    ------ -- -- -
      ---------------------------- -------------------
    --
  -- ---------------------

  ------ -
    ---- ----------------
      ----------------- --
      ------- ------------------- ------------------
        ---- ---------
      ---------
    ------
  --
--

----------- --- ---------------------------------

该代码片段中,我们使用 react-figmaExampleComponent 渲染到了 UI 当中。同时,我们还添加了一个 Test Selection 按钮,用于在 Figma 的面板中测试当前的选中状态。

在项目的根目录中,我们需要创建多个样式文件(sass 文件),用于自定义 UI 当中的样式。这里我们直接使用一个名为 styles.scss 文件:

项目文件目录示意图:

运行该程序,可以看到 Figma 面板中除了 Test Selection 按钮,还显示了一个文本内容为 “Hello World”的文本组件。同时,我们还可以通过点击按钮测试 Figma 中当前选中状态的有效性。

总结

本文介绍了 npm 包 react-figma 的基本知识,包括其安装、基本功能和实例操作。通过学习本文内容,你已经可以在前端开发与设计协作中使用 react-figma 了。其方便的数据共享、自定义属性设置和丰富的节点操作功能,可以使开发中的效率和设计的准确性得到提升。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedafaeb5cbfe1ea06110ad

纠错
反馈