全栈学习——Figma学习

一、创建页面

登录后点击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中字体不要超过两种，字体的大小、样式可以帮我们区分内容的视觉级别和重要程度

在Figma界面：

（3）图标

Simple Design System是Figma提供的组件库

随意选择一个图标拖拽到中间画面中

选择刚才创建好的颜色

这样就创建好一个基础的图标，接着按照这样的方式创建好所有图标

2、创建基础的页面和网格系统

（1）创建页面

也可以修改尺寸如下或鼠标拖拽修改

（2）创建网格系统

网格系统可以帮助我们规范元素的排列、对齐，更重要的是网格系统可以帮助页面实现响应式

修改参数