一、创建页面登录后点击Crete-Design进入设计页面二、设计页面1、基础组件介绍主界面样式点击左上角输入框可以修改文件的名称设计名称免费版可以添加3个页面图层设置后续会用到2、工具栏介绍3、设计工具介绍首先在工具栏随意画出一个矩形框右侧就会出现一个属性面板包含当前选择元素的各种属性设计左侧的原型面板Prototype点击进入原型模式在设计完成后可以在在这里创建交互原型、动效等等。三、实例设计首先选择设计模式点击可以根据自己的喜好选择背景颜色1、建立基础视觉元素包含颜色、字体、图标等它们作为基础视觉元素贯穿所有页面帮助我们建立品牌视觉和用户体验一致性设计开始前先确定好这些元素可以帮助我们提高效率1颜色在右侧选择 Style-Color-命名Name-选择颜色-Create Style参考颜色的命名如下图然后依次创建style样式分别是Ⅰ.Brand 品牌色产品主题色①Brand Primary 品牌主色产品核心识别色全局高权重使用导航栏、按钮、重点标签、提交按钮、高亮选中态、Logo 主色、关键行动引导。②Brand Secondary 品牌辅助色次要强调、区分不同功能模块成功提示、标签分类、次要按钮、进度完成态、正向反馈。Ⅱ.Text 文字层级色控制阅读层级①Text Primary 主文本页面最重要文字标题、正文、表单输入内容、核心信息最高对比度保证可读性。②Text Secondary 次级文本次要辅助信息描述文字、备注、时间、说明小字、非重点标签弱化不抢视觉。③Text Invert 反色文字深色底色上的文字深色按钮、深色导航栏、深色卡片内的文字白底黑字反过来使用。Ⅲ.Icon 图标层级色和文字逻辑完全对应①Icon Default 默认图标常规功能性图标首页、返回、搜索、菜单等页面主要图标和 Text Primary 配套。②Icon Secondary 次要图标弱化类图标次要操作、详情箭头、置灰选项、辅助装饰图标和 Text Secondary 配套。③Icon Invert 反色图标深色背景内图标深色按钮、深色头部、深色弹窗里的图标和 Text Invert 配套。Ⅳ.Surface 页面容器 / 背景色页面基底Surface 直译「表面、面板、容器」控制页面分层、卡片、底色①Surface Default 默认页面底色App / 网页全局底层背景绝大多数页面的底色柔和不刺眼。②Surface Dark 深色面板分层卡片、弹窗、折叠面板、分割区块比页面底色深一点用来区分模块层级。③Surface White 纯白面板纯白色容器弹窗、表单卡片、顶部导航栏、白底弹窗干净高亮的模块区域。2字体通常一个APP或Web中字体不要超过两种字体的大小、样式可以帮我们区分内容的视觉级别和重要程度样式名称字体字重字号行高核心使用场景H1SF ProExpanded Semibold3240页面大标题、首页主标题、弹窗大标题H2SF ProExpanded Semibold2028板块二级标题、分区小标题、卡片头部标题TitleSF ProBold1624模块小标题、列表项标题、表单分组标题Body BoldSF ProSemibold1624强调正文、列表重点内容、加粗提示文本BodySF ProRegular1624页面标准正文、列表常规内容、表单输入文字CaptionSF ProRegular1422辅助小字、备注说明、时间、标签、底部注释在Figma界面3图标Simple Design System是Figma提供的组件库随意选择一个图标拖拽到中间画面中选择刚才创建好的颜色这样就创建好一个基础的图标接着按照这样的方式创建好所有图标2、创建基础的页面和网格系统1创建页面也可以修改尺寸如下或鼠标拖拽修改2创建网格系统网格系统可以帮助我们规范元素的排列、对齐更重要的是网格系统可以帮助页面实现响应式修改参数