Figma设计顶部电量显示怎么设置的图文教程
Figma 是面向产品团队的界面与原型设计平台，Mac 客户端支持 Intel 和 Apple 芯片，可直接调用本机字体。它将矢量绘制、自动布局、组件库、交互原型、评论及多人实时编辑集中在统一工作区。
学习在Figma中从零绘制iOS风格的顶部电量显示图标，掌握矢量布尔运算技巧，并通过Auto Layout实现状态栏的自适应布局与组件复用。
在移动端高保真原型设计中，顶部状态栏往往是容易被忽视却至关重要的细节。很多设计师习惯直接截图或使用现成素材，但这会导致在不同背景色下适配困难，或者无法灵活调整电量百分比。其实，在 Figma 中手动绘制一个标准的 iOS 风格电量图标并不复杂，关键在于理解其几何构成和层级关系。掌握这一技能，不仅能提升界面的精致度，还能让状态栏随着内容自动适应深色或浅色模式。
拆解电量图标的几何结构
iOS 的电池图标并非简单的矩形加圆角，它由主体外壳、内部填充液和右侧触点三个部分组成。理解这三个部分的相对位置和尺寸比例，是精确还原的关键。
主体是一个带有圆角的矩形，右侧连接一个较小的矩形作为正极触点。内部的电量填充部分也是一个圆角矩形，但其圆角半径通常略小于或等于外壳，且必须与外壳保持固定的内边距（Padding）。当电量变化时，改变的只是内部填充矩形的宽度，而外壳和触点保持不变。
电池图标由主体、触点和内部填充三层结构组成
这种结构决定了我们在绘制时不能简单地画一个框，而需要将其拆分为独立的图层，以便后续通过 Auto Layout 或组件变体来控制电量状态。
使用矢量工具绘制基础形状
首先，使用矩形工具（R）绘制电池主体。假设我们设定高度为 12px，宽度为 24px，圆角半径设为 3px。接着，在主体右侧绘制一个高 6px、宽 2px 的小矩形作为触点，并将其垂直居中对齐到主体右侧边缘。
接下来是核心步骤：绘制内部电量。在主体内部绘制一个矩形，高度比主体小 2px（即上下各留 1px 间距），宽度根据当前电量设定，例如 50% 电量则宽度为主体宽度的一半减去左右间距。选中这个内部矩形，设置其圆角半径，注意不要超过主体圆角，否则会出现视觉溢出。
// 建议参数参考
Body: W=24, H=12, Corner Radius=3
Tip: W=2, H=6, Corner Radius=1
Fill (50%): W=11, H=10, Corner Radius=2, Padding Left/Right=1
为了确保电量填充部分不会超出外壳边界，最规范的做法是使用“蒙版”或“布尔运算”。但在 Figma 中，更推荐利用图层层级关系：将内部填充矩形置于主体矩形之上，并确保其位置严格限制在主体范围内。如果希望更严谨，可以将主体设置为父级容器，内部填充作为子级，并开启 Clip Content（裁剪内容）。
利用 Auto Layout 实现动态电量
静态绘制只能满足单一状态，实际设计中我们需要展示不同电量（如 100%、50%、20%）。这时，Auto Layout 就派上了用场。
选中内部填充矩形和主体外壳，但请注意，我们不需要将它们打包成一个 Auto Layout 组来改变整体大小，而是需要单独控制内部填充的宽度。更高效的做法是：将内部填充矩形单独作为一个组件，或者在主组件中使用“约束”（Constraints）。
更好的实践是创建一个名为 Battery_Icon 的组件。在该组件中，内部填充层命名为 Fill。当我们创建变体（Variants）时，可以分别设置 Fill 层的宽度。例如：
- Variant 100%:
Fill宽度填满主体内部空间。 - Variant 50%:
Fill宽度为主体内部空间的一半。 - Variant Low:
Fill颜色变为红色，宽度为 20%。
通过组件变体管理不同电量状态的宽度与颜色
通过这种方式，你在主界面中只需切换组件变体，即可实时更新电量显示，无需手动调整每个图层的宽度。
整合状态栏其他元素
电量图标只是状态栏的一部分。一个完整的 iOS 状态栏还包括时间、信号强度、Wi-Fi 图标等。为了保持整体对齐，建议使用 Auto Layout 将这些元素组合在一起。
创建一个水平方向的 Auto Layout 框架，命名为 Status_Bar。将时间文本放在左侧，信号和 Wi-Fi 图标放在中间偏右，电量图标放在最右侧。设置框架的对齐方式为 Center，间距（Gap）设为 4-6px，内边距（Padding）根据屏幕边缘预留适当空间。
Status_Bar Settings:
Direction: Horizontal
Alignment: Center
Gap: 6px
Padding Left/Right: 16px
这样，无论时间文本是两位数还是三位数，或者电量图标如何变化，整个状态栏都能保持完美的居中和间距一致性。
使用Auto Layout确保状态栏元素对齐与间距一致
适配深色模式与颜色样式
现代 App 必须支持深色模式。在 Figma 中，不要直接使用十六进制颜色值（如 #000000），而应使用颜色样式（Color Styles）。
为电量图标的外壳和填充定义语义化的颜色样式，例如 Icon/Primary 和 Icon/Secondary。在浅色模式下，Icon/Primary 指向黑色；在深色模式下，将其切换为白色。对于低电量警告，可以定义一个 Status/Error 颜色样式，指向红色。
当你在页面中切换颜色模式时，只需更新颜色样式的映射，所有引用了这些样式的电量图标都会自动更新颜色，无需逐个修改图层。
例外情况与设计取舍
虽然手动绘制矢量图标是最灵活的方式，但在某些场景下，直接导入 SVG 或使用插件可能更高效。
如果你正在处理的是 Android Material Design 规范，其电池图标的设计语言与 iOS 不同（通常是实心底座或不同的圆角处理），此时建议查阅官方 Material Icons 库，直接复制 SVG 路径到 Figma，再进行颜色适配。此外，如果项目时间极其紧迫，且不需要动态交互，使用高质量的截图裁剪也是可接受的妥协，但务必确保分辨率足够，避免在高清屏幕上出现锯齿。
另一个例外是超小型屏幕或手表界面。在这些场景下，详细的电池图标可能过于拥挤，设计师通常会简化为一个纯色的圆点或条形，甚至完全省略，仅在设置中显示具体数值。此时，遵循“少即是多”的原则，去掉复杂的矢量细节，仅保留语义传达即可。
在受限空间下简化电量显示的几种设计方案
掌握 Figma 中电量图标的绘制逻辑，本质上是对矢量工具和组件思维的练习。它提醒我们，界面中的每一个微小元素，都可以通过结构化的方式被管理和复用，从而在长期的设计迭代中节省大量时间。
IntelliJ IDEA 是 JetBrains 推出的专业集成开发环境，重点服务于 Java、Kotlin 与 JVM 项目开发。软件集成代码补全、静态检查、重构、调试、测试、版本控制及构建工具，并可借助插件扩展语言和框架支持。
JetBrains PyCharm 是面向 Python 开发者的集成开发环境，提供智能补全、代码检查、重构、调试、测试、版本控制及虚拟环境管理功能。Mac 版兼容 Intel 与 Apple 芯片，核心功能可免费使用。
JetBrains WebStorm 是面向 JavaScript、TypeScript 和现代 Web 技术的专业集成开发环境，可智能理解项目结构，提供代码补全、重构、错误检查、运行调试、测试及 Git 工具。
Adobe After Effects 是面向动态图形、影视特效与视频合成的专业创作软件。它提供关键帧动画、遮罩抠像、运动跟踪、三维空间、文字动画和表达式等工具，并可与 Premiere Pro、Photoshop、Illustrator
Adobe Audition 是面向播客、影视后期、音乐制作及内容创作者的专业音频工作站，提供波形精修、多轨录制与混音、频谱编辑、降噪修复、响度匹配和效果处理工具，并可与 Adobe Premiere 协同完成视频声音制作。
Adobe Bridge 是面向摄影师、设计师及内容团队的免费数字资产管理工具，可集中预览照片、视频和 Adobe 项目文件，并利用评级、标签、关键词、元数据、筛选与收藏集完成分类检索。它还支持批量重命名、格式导出、相机导入及 Camera
Adobe Illustrator 是 Adobe 推出的专业矢量图形设计软件，适合在 Mac 上制作标志、图标、插画、包装、信息图及印刷版面。它以路径和锚点构建可无损缩放的图形，并提供钢笔、形状、文字、图像描摹、渐变、画板及生成式功能。
Adobe InDesign 是面向印刷品与数字出版物的专业版面设计软件，可在 Mac 上制作书籍、杂志、宣传册、海报、报告及交互式文档。它提供精细的文字样式、网格、母版、长文档管理和印前输出能力。
Adobe Lightroom Classic 是面向桌面摄影工作流的照片管理与后期处理软件，可将原始照片保存在本地硬盘，通过目录、关键词、评分和收藏夹高效整理图库，并提供 RAW 冲印、蒙版、镜头校正、批量同步及多格式导出等功能。
Adobe Media Encoder 是 Adobe 推出的专业音视频编码与转码工具，可通过队列、预设和监视文件夹批量完成格式转换、代理文件创建及多平台成片输出，并与 Premiere Pro、After Effects 等软件紧密协作。
Adobe Photoshop 是面向摄影师、设计师和内容创作者的专业图像处理软件，提供图层、蒙版、选区、修复、调色、文字排版、智能对象及生成式编辑等能力。Mac 版支持 Intel 与 Apple Silicon 处理器。
Adobe Premiere Pro 是面向专业视频制作的非线性剪辑软件，提供多轨时间线、调色、音频处理、字幕、代理工作流和多格式输出能力，并可与 After Effects、Audition、Photoshop 及 Frame.io 协同
JetBrains IntelliJ IDEA 是以 Java、Kotlin 和 JVM 项目为核心的专业集成开发环境，提供智能补全、代码检查、安全重构、调试、测试、版本控制及构建工具集成。统一发行版的核心功能可免费用于商业和非商业项目，
PhpStorm 是 JetBrains 面向 PHP 与现代 Web 开发打造的专业集成开发环境，提供代码补全、静态检查、重构、调试、测试、数据库、版本控制及前端语言支持。Windows 用户可直接下载安装程序，
PyCharm 是 JetBrains 推出的 Python 集成开发环境，提供智能代码补全、错误检查、重构、调试、测试、Git、终端及 Jupyter Notebook 支持。统一版安装后可体验 30 天 Pro 功能，
WebStorm 是 JetBrains 面向 JavaScript、TypeScript 和现代 Web 技术打造的集成开发环境。它提供项目级代码分析、智能补全、安全重构、导航搜索，并集成调试、测试、终端、Git 与常用前端工具，
Adobe Photoshop 是面向摄影师、设计师和内容创作者的专业图像处理工具，可在 Windows 上完成照片修饰、选区抠图、图层合成、文字排版、绘画及生成式编辑。软件采用订阅授权，由 Creative Cloud 管理安装、更新与许
Adobe InDesign 是面向印刷与数字出版的专业页面排版工具，可制作书籍、杂志、宣传册、海报、交互式 PDF 和电子书。它提供精细的文字样式、多页面管理、印前检查及多格式输出能力，并能与 Photoshop、Illustrator
Adobe Illustrator 是用于绘制矢量图形、插画、图标、徽标和版式的专业设计工具。它以路径和锚点为核心，作品放大后仍能保持清晰，并提供画板、文字、渐变、图像描摹及精确变换等功能，适合品牌视觉、印刷物料、数字界面和商业插画创作。
Adobe Bridge 是 Adobe 推出的创意资产管理工具，可集中预览、分类和查找照片、视频、PDF及多种设计文件，并支持元数据、关键词、评级、批量重命名和格式导出。它可与 Photoshop、Illustrator 等应用衔接，
Adobe Lightroom Classic 是面向 Windows 桌面摄影工作流的照片管理与无损编辑工具，可通过目录集中整理大型图库，并完成 RAW 显影、局部蒙版、批量调整、打印和多格式导出。它强调本地文件管理与精细控制，
Adobe Acrobat Pro 是面向专业 PDF 工作的综合解决方案，可在 Windows 中创建、编辑、转换、比较、整理和保护文档，并支持表单、电子签名、扫描件文字识别及敏感信息永久遮盖。订阅还包含网页、移动服务和云端协作能力，
Adobe After Effects 是面向动态图形、动画与影视视觉特效制作的专业工具，可完成关键帧动画、图层合成、遮罩跟踪、抠像、文字动画和二维三维元素整合。Windows 版通过 Adobe Creative Cloud 安装及更新，
Adobe Media Encoder 是 Adobe 面向视频与音频制作流程提供的专业编码和转码工具，可批量处理媒体文件、创建代理、套用输出预设并监控文件夹自动执行任务。它与 Premiere、After Effects、Audition