Figma：浏览器的协作界面设计工具 - 美国设计网站
全球领先的云端UI/UX设计平台，让设计师和开发者在浏览器中实时协作创建界面原型，被誉为“设计界的Google Docs”。
行业分类： 美国界面设计工具、UI/U[文]X设计、设计协作、原型制作[章]、设计系统管理
成立时间： 2016年
所属国家： 美国网站（2022年被Ad[来]obe宣布收购后因监管反对[自]交易终止，独立运营）
网站语言： 支持多语言（以英语为主，社[C]区翻译含中文、日语等多语言[c]资源）
服务区域： 全球
官方网站： www.figma.com
网站介绍： www.figma.com 是全球领先的云端协作界面设计平台，由Dylan Field和Evan Wallace于2016年正式上线。Figma的革命性在于将界面设计从“设计师本地保存文件、发邮件传版本、工程师从截图提取参数”的碎片化工作流迁移到基于浏览器的实时多人协作画布上——如同Google Docs对Word的颠覆，Figma让多名设计师、产品经理和开发者在同一文件上同时编辑，彼此的光标、选区和修改均实时可见。2022年Adobe宣布以200亿美元收购Figma，引发全球设计界震动，后因英美监管机构反垄断反对于2023年底交易终止，Figma保持独立运营。
Figma的编辑器以画布为[c]中心，左侧是图层和页面面板[c]，右侧是属性检查器（设计属[n]性、原型交互、代码检查面板[.]），顶部工具栏提供形状工具[c]、钢笔工具、文字工具、评论[o]、操作和资源库。Figma[m]的核心概念包括Frames[文]（画框，类似Artboar[章]d但更灵活，支持嵌套）、C[来]omponents（组件，[自]创建后可跨文件复用，修改主[C]组件所有实例同步更新，类似[c]于代码中的类定义）、Var[c]iants（组件变体，将按[c]钮的悬停/禁用/默认状态或[n]不同尺寸打包为切换选项）、[.]Auto Layout（自动布局，类[c]似CSS Flexbox，设置间距、[o]内边距和排列方向后，内容变[m]更时容器自动拉伸适配）和C[文]onstraints（约束[章]，设定元素在父画框缩放时的[来]锚定方式）。FigJam是[自]Figma旗下的白板协作工[C]具，用于头脑风暴、用户流程[c]图和敏捷回顾会议，设计小组[c]可以贴便签、连线绘图和投票[c]。
Figma的设计系统（De[n]sign System）功能是大型组[.]织的核心价值。团队可在Li[c]brary中发布组件和样式[o]（颜色、文字排版、阴影、网[m]格）供跨项目统一调用。An[文]alytics面板可追踪组[章]件使用频率和设计文件的活跃[来]度。分支（Branchin[自]g）功能让设计师在独立分支[C]上探索实验性改版，提交Me[c]rge Request请求合并至主[c]设计文件。Dev Mode是面向开发者的专用[c]视图，工程师选中任何元素即[n]可查看其CSS、Swift[.]UI或Compose代码片[c]段，复制颜色值和间距参数，[o]标注导出切图（SVG、PN[m]G、PDF等格式和分辨率）[文]，以及测量元素间距——设计[章]到开发的交接自此无歧义。
Figma的社区（Figm[来]a Community）是共享[自]设计资源的开放生态。设计师[C]和公司在此发布模板、UI套[c]件、图标包、线框图库和插画[c]集，其他用户一键复制到自己[c]的文件库。Figma Plugins是扩展编辑器[n]功能的插件生态——自动生成[.]Lorem Ipsum、图表插入、可访[c]问性检查、自动翻译文本、导[o]出为多语言JSON等数百款[m]插件可安装，支持在编辑器中[文]通过Web API调用外部服务。Fig[章]ma API允许开发者程序化导出[来]资源、生成设计文件和与CI[自]/CD管道集成。定价上，F[C]igma提供Starter[c]（免费，3个Figma和F[c]igJam文件）、Prof[c]essional、Orga[n]nization和Ente[.]rprise方案，教育和学[c]生可申请免费专业版。
操作流程： 访问figma.com，使用邮箱或Google账号注册。在文件管理页点击“New design file”创建新文件。使用Frames工具（F键）选择设备画框（iPhone、Android、Desktop等），在右侧属性面板精确设置宽度和高度。使用形状工具（R矩形、O圆形等）和Text（T）创建界面元素，调整颜色、圆角、阴影和不透明度。将元素转换为Component（Ctrl+Alt+K），创建Variants和Auto Layout。点击顶部“Prototype”标签切换原型模式，拖拽元素间的蓝色节点建立页面跳转交互（点击、悬停、延时），右侧设置动画类型（溶解、智能动画、滑动）。点击“Share”生成链接邀请协作者，点击“Present”全屏预览原型。Dev Mode通过文件页切换开关激活，供开发者查看设计参数。