Figma的学习

Figma 设计实践核心技巧
登录界面模块设计
在Figma中还原了微信风格的登录页布局，包括品牌图标、输入框（手机号/密码）、登录按钮及辅助文字（找回密码/注册）的排版

聊天界面设计图
自动布局运用：为聊天气泡、头像+气泡组合、输入框组添加 垂直/水平自动布局，设置气泡内间距（10px）、头像与气泡间距（8px），输入框文字输入时宽度自动扩展。

• 网格与对齐技巧：基于 8px网格系统 排版，所有元素对齐网格线（如头像中心对齐气泡左侧、时间戳右对齐气泡），通过Figma“左对齐/垂直居中”工具保证界面整洁。

• 视觉分层技巧：为聊天气泡添加 轻微阴影（模糊度4px，透明度10%），区分聊天双方气泡颜色（己方蓝色、对方灰色），提升界面层次感与辨识度。

界面视觉层设计
学会在Figma中制作带渐变背景的头部模块，搭配装饰元素（星星、圆点）增强视觉层次，同时完成头像与背景的融合排版；

• 图标组件复用：调用已创建的功能图标组件（如商店、定位等），按统一间距排列成功能栏，保证图标样式与尺寸的一致性；

• 抠图与素材整合：掌握在Figma中对图片进行抠图处理（提取头像主体），并将抠图素材与界面元素（渐变背景、功能栏）组合成完整模块。

个人中心界面
组件复用技巧：调用之前创建的 图标按钮、卡片组件，如个人信息卡片复用通用卡片组件，功能菜单复用图标+文字组合按钮，减少重复设计。

• 布局排版技巧：采用“上-中-下”分层布局，顶部个人信息区、中间功能菜单区、底部设置区清晰划分；功能菜单用 垂直自动布局，统一图标与文字间距（12px），所有菜单项左对齐。

• 样式体系运用：严格遵循自定义样式库，标题文字（16px/粗体）、正文文字（14px/常规）、辅助文字（12px/轻量）层级分明，主色（蓝色）用于重点功能图标，中性色（灰色）用于常规文字。

多风格按钮组件

• 设计图标、文字、图标+文字三类可复用按钮，配置默认/hover/禁用3种状态变体

• 统一圆角、内间距、字体大小，调用时可灵活替换图标、修改文字，不破坏原始样式