先说说啥是Pencil，干嘛用的

Pencil其实是个超轻量级的设计插件， 直接装在IDE里写代码的同时还Neng画图， 省得切来切去打开Figma啥的， 说实话，这玩意儿真的是懒人福音。 哈哈，你懂的，省时省力还省脑细胞。

先打开你常用的编辑器，点左侧 搜索"Pencil"， 点安装，然后等它弹出一个小窗口。 别急，这时候要新建一个空白文件——点“新建”，选“画布”。 咱就是说尺寸随意，我这边爱玩就设成430x800，适配手机。 记得把画布背景调成暖色系，温馨卡通风格ZuiNeng打动用户。

画个圆角矩形Zuo背景，用淡橙+浅黄混合一下暖呼呼的。 再放个logo，用手绘风格的字体写上APP名字。 输入框直接拖个组件进来记得加上占位文字：“请输入手机号”。 按钮颜色选深橙，文字白底黑字，一眼就Neng点。 别忘了加个“小记住我”复选框，小圆点配上淡灰色勾。 这个页面完成后就Neng让用户有种“好像回到童年”的感觉啦。

先划分三个大块：顶部导航、内容区、底部Tabbar。 导航栏放一个返回箭头和标题，“首页”，简约不累赘。 内容区放几张卡片式报表，用圆角和轻微阴影区分层次。 每张卡片里摆几个数字指标，用大号字体突出重点。害 底部Tabbar直接套iOS 26风格——四个图标：聊天、发现、消息、我的。 记得把图标颜色设成灰色未选中，蓝色选中，这样视觉上geng舒服。 整个页面保持留白，让信息呼吸，不要挤在一起。

这里Ke以玩点个人头像，大圆形放在顶部居中。 头像下方写用户名，再来几个设置项：账户安全、主题切换、关于我们。 每一行dou用列表组件，把右侧的小箭头对齐，好像iPhone原生设置页一样自然。

其实搬家这事儿也不算难，只要把Pencil里的层级结构导出来就行了。

在Pencil里点“文件”→“另存为”，选JSON格式保存。

打开Figma，新建文件后点左上角的“导入”。选择刚才保存的.pen文件。

导入后会kan到所有画板和组件Yi经出现，但有些属性比如阴影或自定义字体可Neng需要手动调一下。

不对不对，我忘了说Ru果你想保留动画效果，那只Neng在Figma里重新加交互，因为Pencil本身不支持复杂动效。

颜色丢失？别慌！

有时候导入后颜色会变成默认灰，这时候直接在右侧面板里重新挑选原来的颜色值即可。

字体兼容问题

Pencil使用系统自带字体，而Figma可Neng没有同名字体，要么换成相近的，要么把字体文件一起上传。

顺便聊聊SEO——为什么百度不收录？

hen多站长经常问，“为什么百度不收录？”其实原因五花八门：

页面没有备案或备案信息错误；

服务器响应慢或频繁报错；

内容重复度高，被认为是低质量；

缺少有效的Meta标签和结构化数据；

所以咱们写文章的时候，多加一点原创度，加上标题标签和描述，就Neng提高被抓取几率啦。

实战演练：把记账APP搬到Figma去kankan效果吧！

按照前面的步骤，把记账APP的.pen文件导入Figma：

Pencil里新建项目——命名叫“记账APP”；

设计完登录、主页、报表和我的四个页面；

保存为JSON；

打开Figma导入；

检查并微调细节。

完成后你会发现整个界面在Figma里依旧保持原来的排版，只是Ke以利用Figma强大的协作功Neng，让团队一起审稿改稿，geng爽啊！哈哈。

玩转Pencil&Figma，你也Ke以是设计大神！

Ciao~ 说实话，这篇文章虽然随性，但每一步dou踩着坑走出来的经验，希望Neng帮你少走弯路。

Ru果你还有其他疑问，比如插件冲突或者怎么快速生成代码，欢迎留言交流呀！咱们下次再聊geng多前端+设计的小技巧~祝创作愉快！