34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置

最新推荐文章于 2025-11-17 05:50:17 发布
原创 最新推荐文章于 2025-11-17 05:50:17 发布 · 2.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #figma #ui设计

本文详细介绍Figma组件库的搭建流程，包括组件命名规范、组件的放置位置、组件与实例间的跳转以及如何实现组件共享等内容。

34-Figma-项目组件库搭建与整理-组件命名规范-组件放置位置

1. 组件命名规范

在这里插入图片描述

页面/类型/具体名称

2.组件放到统一页面中

在这里插入图片描述

3.组件和实例之间跳转

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqIxoQe1-1643002740506)(34-Figma-项目组件库搭建与整理.assets/image-20220123170627605.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z899yubC-1643002740506)(34-Figma-项目组件库搭建与整理.assets/image-20220123170650960.png)]

4.组件共享

最低0.47元/天 解锁文章
移动UI组件库搭建指南：打造企业级设计系统的完整流程
移动开发前沿的博客
05-31 776
你是否遇到过这样的场景？A团队开发了一个“商品详情页”的按钮组件，B团队却在重复造轮子开发类似的按钮；设计师修改了品牌色，但需要逐个通知前端调整100+页面的颜色代码；新入职的开发者面对混乱的组件命名，根本分不清哪个组件是最新版……这些问题的根源，是企业缺乏一套统一的“设计系统”（Design System）。本文将聚焦移动UI组件库这一设计系统的核心载体，覆盖从需求分析到持续维护的完整流程，适合中大型企业的前端团队、UI设计团队参考。用“建房子”的比喻解释核心概念；
Sass与Storybook集成：组件驱动开发实践
小白菜的博客
05-26 729
样式代码重复率高，变量命名不统一，修改一个颜色可能需要全局搜索；组件在页面中依赖复杂上下文，开发时难以单独调试；团队协作时，设计师的样式规范难以快速落地为代码。本文将聚焦“如何通过Sass+Storybook的组合”解决这些问题，覆盖从环境搭建到实战开发的全流程，帮助开发者掌握组件驱动开发的核心技巧。先理解Sass、Storybook、CDD的核心作用；再一步步完成Sass与Storybook的集成配置；通过“按钮组件”实战演示完整开发流程；最后总结最佳实践与未来趋势。Sass。
Figma批量重命名终极指南：提升设计效率工具的使用技巧
最新发布
gitblog_00040的博客
11-17 597
在现代设计工作流程中，图层和画板的命名规范性直接影响团队协作效率和项目管理质量。本文将为您详细解析如何通过Rename It这款强大的设计效率工具，实现Figma项目的批量重命名操作。 ## 设计文件命名的核心痛点 设计师在日常工作中经常面临以下命名困境： - 手动逐个修改图层名称耗时耗力 - 团队协作时命名规范不统一 - 设计系统组件命名缺乏一致性 - 原型设计中的页面结构不清晰 - 与开发
【Figma学习】组件管理
weixin_47050107的博客
08-12 3378
Figma学习
3款顶级Figma组件库，让shadcn/ui设计效率提升10倍
gitblog_00178的博客
10-11 247
你还在为shadcn/ui组件设计反复调整样式？是否因开发与设计脱节导致项目延期？本文精选awesome-shadcn-ui项目中3个高质量Figma组件库，帮你实现设计开发无缝衔接，从根本上解决UI一致性问题。 读完本文你将获得： - 3个精选Figma组件库的深度对比 - 组件库安装与使用的完整指南 - 设计系统落地的最佳实践 ## 为什么需要专业的shadcn/ui Figma组件库 ...
设计师必备的Figma可视化组件库资产已更新至 7.0版本
weixin_46664875的博客
12-20 2229
在当今数字化时代，大屏可视化设计越来越受到重视。然而，大屏可视化设计项目中重复性元素的设计往往耗费大量时间和精力，影响设计效率。Figma可视化组件库可以帮助设计师快速创建和设计这些元素，提高设计效率，提升设计质量。
元件库命名规范
09-26
绝对是原创的！经历了很多时间才完成。。相信这份资料会对你有帮助
设计师必备的Figma可视化组件库资产合集 5.0版本
weixin_46664875的博客
04-20 1688
通过库中的预设组件，设计师们可以快速地创建和设计各种元素和交互，从而提高设计效率和缩短工期。同时，数据可视化也成为了越来越重要的一部分，Figma可视化组件库可以帮助设计师们更加高效地创建各种数据可视化图表。在大屏可视化设计项目中，设计师们需要不断地追求新颖的设计理念和技能，以满足客户/老板的需求和市场的变化。然而，设计师们面临的一个普遍问题是，需要花费大量时间来创建和设计重复性的元素，这不仅浪费时间，也降低了设计师的生产力。同时，设计师们还可以根据自己的需求来修改这些组件，以满足不同的数据呈现方式。
figma组件标准化命名（个人版）
mio115的博客
06-12 1290
└ one，two，three，four...：同上。└ Variant：变体（figma原本命名）Property：属性（figma原本命名）Default：原型（figma原本命名）└ category：种类（y、x轴数据）└ value：数值（y、x轴数据）└ yz：y轴分割线。└ xz：x轴分割线。└ yaxisline：y轴纵坐标。└ xaxisline：x轴横坐标。└ 1，2，3...：自定义类型。└ dashed：虚线。└ bottom：底部。└ solid：实线。└ right：右边。
figma-组件库建立
基本无害的博客
03-23 6187
组件库
【Figma设计系统从0到1搭建秘籍】：掌握可复用网页模板组件库的5大核心步骤
结合命名规范与项目架构优化多人协作效率。在交付层面，提出设计Token提取、前端框架对接及版本控制机制，保障设计与开发的精准衔接。最终通过文档化建设与推广策略，推动设计系统在组织内的可持续演进，提升产品...
figma-react-experiments:使用Figma和React创建组件库
05-16
Figma到React转换器 这演示了如何使用Figma REST API将Figma文档转换为React Components。 免责声明：此代码可能不完整，并且可能存在错误。 它不打算用于生产中。 这仅仅是概念证明，以显示存在哪些可能性。 API用法 我们在此项目中使用2个端点： GET /v1/files/:file_key从文件获取JSON树。 这是该项目的主要力量，奠定了React Components的框架。 GET /v1/images/:file_key当我们确定是向量的节点或不能直接用div表示的其他节点时，我们必须将它们渲染为svg。 设置 安装 。 您需要支持async / await的最新版本 在此目录中，运行npm install 按照以下说明运行转换器 用法 默认情况下，该项目在src/figmaComponents.js带有预渲染的组件。 如果运行npm
figma-github-action：将Figma组件和样式同步到React和CSS
02-07
使用TypeScript创建JavaScript操作 使用此模板来引导TypeScript操作的创建。 :rocket: 该模板包括编译支持，测试，验证工作流，发布和版本控制指南。 如果您是新手，也可以进行更简单的介绍。 请参阅 从此模板创建动作 单击Use this Template然后为您的操作提供新的回购详细信息 主码 安装依赖项 $ npm install 构建打字稿并将其打包以进行分发 $ npm run build && npm run package 运行测试 :check_mark: $ npm test PASS ./index.test.js ✓ throws invalid number (3ms) ✓ wait 500 ms (504ms) ✓ test runs (95ms) ... 更改action.yml action.yml包含定义动作的输入和输出。 使用您的
【进阶编程技巧】：为PIE-Engine Studio开发自定义插件
!... # 摘要 PIE-Engine Studio插件开发...本文全面介绍了PIE-Engine Studio插件开发的各个方面，包括插件目录结构、工作原理、生命周期管理、开发环境搭建、插件的编译构建、调试测试、用户界面定制、数据处理、交互和AP
figma构建组件库
buyue
04-18 1897
如何用 Figma 搭建系统组件库 如何构建维护设计组件库？我总结了这6个方法 能快速提高团队生产力的组件库，如何从零开始构建
Figma组件设计
m0_67293291的博客
08-04 994
【figma】使用和设计心得
2025产品经理必看！墨刀/Axure/Figma三大原型组件库全解析
Lemonliyi的博客
03-19 5003
产品经理常用三大组件库各有特点，有的适合敏捷迭代的产品，有些应对复杂逻辑的系统，还有些侧重高保真交付。建议根据自身项目阶段选择适合的组件库进行素材复用，一键复用避免复杂流程。
13-Figma-组件管理
billycoder的专栏
01-21 2897
13-Figma-组件管理 常见操作 创建组件，选择，点击顶部 创建多个组件，框选多个，点击顶部 组件使用，对组件进行复制，就创建了组件的实例 实例跳到模板，右键-》转到组件模板 所有组件如何管理，都在资产面板 变体组件，框选，属性面板中点击"合并为变体" 组件重命名,右侧图层双击组件,或者组件右键,或者ctr+r 组件批量重命名,选中多个组件,或者组件右键,或者ctr+r 变体组件命名规范,key=value,key=value,key=value,key=true/false 总结 添加组件快捷键
Ant Design for Figma设计系统组件库 支持变量 非社区版
weixin_46664875的博客
11-18 2252
Ant Design for Figma 继承了 Ant Design 的设计理念和风格，提供丰富的 UI 组件和交互功能，帮助设计师快速构建高质量的 Figma 设计稿。Ant Design for Figma 的组件涵盖了常见的 UI 元素，如按钮、输入框、标签等，也提供一些高级组件，如表格、图表、图形等。Ant Design for Figma 是基于 Ant Design 设计系统的 Figma 组件库，提供丰富的 UI 组件和交互功能，帮助设计师快速构建高质量的 Figma 设计稿。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值