Figma的开发模式比开发者想象的要丰富得多

我们已经进入2023年，构建UI组件仍然是前端工程师在日常工作中需要做很多的工作。尽管AI每个月都在取得巨大进步，但还没有完全掌握所有技巧。在那之前，很多工作仍然需要手动完成。

常见的情况是，开发者会收到一个Figma文件作为UI设计，然后他们根据重复的模式定义组件，并在所需的框架（如React或Vue）中编写具有动态属性的代码。他们经常会忽略的是，设计师可能已经完成了很多工作。让我来解释一下。

自动布局和弹性盒模型

很久以前，设计应用程序只是画布，设计师将所有内容都以绝对方式放置，这意味着几乎不可能以自动化的方式将其转化为干净的HTML和CSS。

但是，随着Figma的自动布局功能的出现，这一切都发生了令人印象深刻的变化。自动布局基本上只是CSS弹性盒模型的简化实现。正如你可能猜到的那样，使用插件将其转化为CSS相对容易。

以我的插件AutoHTML为例，它可以将设计转化为带有多种框架和样式选项的代码，包括React和Tailwind等流行框架。随着半年前Figma的开发模式的引入，这实际上变得实用了，因为现在只读权限的开发者可以运行插件。

要使这个功能工作，设计师显然需要准备他们的设计以利用自动布局，因为这是额外的工作步骤。但根据我的经验，很多设计师非常熟悉这个功能。作为最后的手段，开发者可以投入一些时间学习Figma并自行准备设计。如果你有编码知识，所有这些布局功能都很容易理解。

将Figma组件转化为代码组件

另一件一些开发者还没有认真对待的事情是Figma创建组件的能力。设计师可以轻松创建布尔值、文本或实例替换等属性。在开发模式中，您可以在类似Storybook的播放区中预览该组件及其所有属性。

由于这些组件信息都可在插件API中使用，因此可以用于自动生成代码。正如你可能猜到的，我也在我的插件中包含了这个功能：你可以导出具有实际工作动态属性的React、Vue和Svelte组件。如果你想尝试，可以使用演示文件 (opens new window)。

让我们简化从设计到代码的过渡。Figma的开发模式是朝着正确方向迈出的一步。