目 录内容提要前言资源与支持第1章 初识Figma1.1 开启Figma之旅1.2 你是这样的Figma第2章 Figma基础2.1 文件浏览器2.2 关于文件的那些事儿2.3 形状和工具2.4 图层2.5 颜色2.6 文本2.7 图片2.8 排版第3章 Figma进阶3.1 样式3.2 组件和变体3.3 原型3.4 导出第4章 社区4.1 插件4.2 社区第5章 团队协作5.1 团队组件库5.2 检查面板的使用第6章 使用Figma设计页面6.1 基础样式和约束规则6.2 基础组件第7章 Framer应该这样用7.1 仪表盘7.2 编辑器7.3 图层7.4 开始设计7.5 使用Framer制作原型附录内容提要本书对Figma和Framer的使用方法进行了详细讲解,为读者提供详细的图文说明,包括软件基础操作、使用团队组件库和界面设计等。本书第1、2、3章讲解Figma的使用,第4、5章讲解Figma社区和团队协作,第6章讲解界面设计,第7章讲解Framer的使用方法。本书附赠案例学习文件和在线视频,便于读者学习使用。本书适合UI/UX设计师、设计团队和计划进入界面设计行业的读者学习与参考。图1-1 多人在线编辑2.Figma的特点支持多个平台:可以在Windows、macOS、Linux、Chrome OS上使用Figma。自动保存:实时在线保存设计文件。唯一来源:每个设计文件对应一个链接。支持历史版本恢复:免费版可保存30天,付费版无时间限制。安全:Figma所有的基础架构都分布在3个AWS数据中心,若其中任何一个数据中心发生故障,其他数据中心仍然可以继续工作。3.Figma对软硬件的要求计算机设备:Figma使用WebGL(Web图形库)来进行渲染,它对图形的要求非常低,可以在大多数浏览器上完美运行,所以大部分的计算机都适合。移动设备:可以在手机或平板电脑上访问Figma文件的“仅查看”版本。1.1.2 创建Figma账户任何人都可以创建免费的Figma账户。1.通过电子邮箱地址注册步骤01 访问Figma官网,单击右上角的“Sign up”按钮,如图1-2所示。|图1-2 Figma 官网步骤02 在弹出的页面中输入电子邮箱地址和密码,如图1-3和图1-4所示。|图1-3 通过电子邮箱注册Figma|图1-4 电子邮箱地址和密码输入完成步骤03 填写完注册信息后单击“Create Account”按钮进行提交,如图1-5所示。图1-5 提交Figma 注册信息2.通过登录谷歌账户(Google SSO)注册步骤01 访问Figma官网,单击右上角的“Sign up”按钮。步骤02 单击页面顶部的“Sign up with Google”按钮。步骤03 如果已经登录谷歌账户,则会弹出确认授权信息窗口,否则会提示登录谷...