![CleanShot 2023-10-16 at [email protected]](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/CleanShot%202023-10-16%20at%[email protected]) [[Figma 画布.canvas]] ## 待分类 ### Variants 在幕布进行学习,可以查看。 <https://www.mubucm.com/doc/7anDglu4uSP> - 20230622 大更新 - 空格 auto 又回来啦,并且直接双击面板也会切换! ### Properties - 20220511 大更新 - 先创建属性 - Content - 开关类型的 - 然后在组价中创建元素,例如 icon,然后再把 icon 和属性关联就好了。 ## 高效操作 - 原型中的线是可以通过鼠标框选进行多选的 #prototype技巧 - 原型里的 Mouse Enter 和 While Hovering 的区别? - While hovering 在鼠标移出后,会自动回到之前的状态。 - 快速批量批量替换,先复制,然后批量选择你想要替换的元素,**COMMAND + Shift + R**,可以在旧元素的位置上批量替换。 - 快速将元素复制到自动布局中(目标元素同层级的后方) - COMMAND + Shift +V ![image.png](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230219150227.png) - AL 4.0 - Option 双击 fill container - 直接双击父级 frame 自动 hug。 ## 踩过的坑 ### 发布组件前的检查 (重要) - 图层命名是否保持一致 - 结构是否还能优化 - 属性面板的顺序是否合理和一致 - 属性的值大小写保持一致。 - ![image.png|500](https://chi-1259224060.cos.ap-shanghai.myqcloud.com/20230209154553.png) - 自己进行过一次测试 ### 切换图标变色问题 发布图标的时候如果想在切换时保留颜色, - 不能有描边的状态,要 Outline 或者 Flatten - 命名必须为 Union!! 但是在推送前一定要做好这些处理,否则后面重新改图标命名,会导致以前的颜色都变成最新的。**大坑!!因为结构变了!!** ## 记录 - [Figma Beta 地址](https://help.figma.com/hc/en-us/articles/5601429983767#Download_the_beta_version) - [[lemonoO 飞哥]] - [[如果减少 Figma 文件大小]] - [[我的 Figma Token 实践与测试]] - [[Figma 组件设计要点.canvas]] - [(11) Office hours: Figma like the pros (2023) - YouTube](https://www.youtube.com/watch?v=WAcyjPR2JvA) 在这个视频了解到,在 React 中,类似 Hover,disabled 这样的状态是不用能用属性来实现的。 #2023 -2 - [[如何使用 Figma 实现渐变的蒙版渐隐效果?]] - [[不要随意创建组件]] - [[组件已经被大量使用,如何安全的过度。]] - [[Figma设计主题切换的问题]] - [[什么情况下会覆盖组件内容?]] 20220725 - [[关于 Branch(分支功能)]] - 如何发现 Color Style 都用到哪些元素上了? 插件 [[Style Finder]] 可以解决这个问题。 - 组件切换变色解决方案 - 不能有描边的状态,要 Outline 或者 Flatten - 命名必须为 Union!! - 查看 page 有多少个 frame,不包括子 frame - Figma. CurrentPage. Children. Filter (({type}) => type==='FRAME'). Length - [[类似 Master 的免费插件]] - [[Figma怎么画梯形?]] - [[移动已发布的组件和样式]] - [[Figma 快捷键]] - [[来自 Jaylee 的分享]] - [Figma Link Shortener!](http://figma.fun/) Figma 短链接分享。 - 当图层被 fixed 的时候怎么取消?在 design 模式右侧有一个 - ![[Pasted image 20210417154328.png|275]] - [[关于Figma的权限设置]] - [[figma跨账号迁移文件]] ## 推广安利 [[国内使用 Figma 的团队]] [[推荐推广安利 Figma]] ## 团队使用经验 - 小红书 - 微软 - Teambition - [团队 Figma 上手指南 (qq.com)](https://mp.weixin.qq.com/s/SkXq30DADopk6MS7S3qBIQ) ## 资源 ** [[Figma 插件]] [[丁一举办的figma线下会议]] [[主账号的 figma token 指令]] [[Figma 资源]] [13000字的Figma研究笔记,聊聊Product-Led Growth的误区与思考 (qq.com)](https://mp.weixin.qq.com/s/3C43vxrxbkMhNQAdojG0bg)