前端工具效率暴增-figma&vue

10年前玩剪视频，说过，那时候工具真的很多，但很难用。如今剪映让这件事的门槛极度拉低。正好周末两天研究一下前端，看看前端工具是不是也让我眼前一亮？

Figma

前端之前学过课程，有基础概念，但嫌太麻烦，一直没有练习。想着如果前端工具进化得也很给力，也许可以抽空玩玩。

首先就是原型工具，这里面工具很多。Figma是2024年初最火的了。就拿来玩玩。

这个是个团队写作的前端工具，可以方便的多人编辑一个页面。

看了下，页面上手很容易，结构就是Frame套Frame，非常简单。

玩了一两个小时，就很方便了。

用Figma的方式的好处，就是可以很容易的临摹别人的作业。

这也是这两天挖出来的。很多前端就是在临摹别人的作业，从而熟悉使用这个工具。

VUE

然后是VUE，这个是绝对的主流框架了。应该也很容易，下载一个cli就可以建工程了。

大概步骤如下：

1. 安装Node.js：Vue CLI 需要Node.js环境。推荐使用最新的LTS版本。
2. 安装Vue CLI：通过npm安装Vue CLI，命令如下：

      npm install -g @vue/cli
      ```
   3. 创建一个新项目：使用Vue CLI创建新项目，命令如下：

   vue create my-project

      之后按照提示选择配置，或者直接使用默认配置。
   4. 进入项目并运行：
      ````
      cd my-project
      npm run serve

   这样就会启动一个本地服务器，通常在localhost:8080，你可以在浏览器中预览你的应用。

从figma到vue的打通

没有直接的功能，但是插件大法好啊。

figma里面有一个anima的工具，可以直接导出到vue代码。

最简单的就是直接设计，然后改代码。

在实际的开发流程中，如果MVP（最小可行产品）版本上线之后，我们通常不会重新生成整个项目。我们会通过版本控制系统（如Git）管理项目的变更历史。当设计在Figma中更新后，可以通过以下步骤进行同步更新：

1. 使用anima插件导出最新的设计到Vue代码。
2. 对比当前项目代码和新导出的代码，找出变更点。
3. 将新的设计变更手动合并到现有项目中，确保功能代码和设计的一致性。
4. 测试新的设计在项目中的表现，修复可能出现的任何问题。
5. 提交这些变更到版本控制系统，并部署到生产环境进行再次上线。

这个过程需要前端工程师和设计师紧密协作，确保设计的变更可以高效且准确地反映在最终产品中。这样的工作流程既能保持产品的迭代速度，同时也确保代码的可维护性和稳定性。

赏

The best way to give someone money, is to be a customer.Whatever they’re selling, just buy it. --纳瓦尔

支付宝