虎课网为您提供字体设计版块下的苹果商店页设计-零基础学Figma图文教程，难度等级为新手入门，下面开始学习这节课的内容吧！

本节课讲解网页的基本认识，同学们可以在下方评论区进行留言，老师会根据你们的问题进行回复。

那我们开始今天的教程吧。

1.市场上用的最多的UI设计工具【Sketch】，Figma作为一款专门针对UI界面开发的设计工具，可以完成UI界面、网页、管理系统、H5等题材内容设计。

2.云端协作是以后的趋势，优点：线上保存（不存在闪退未保存）、实时修改（支持多人在线修改）、团队管理、插件获取（支持在线搜索）。

3.通过以下10个实际案例学习Figma。

4.安装Figma的方法有【网页客户端】和【本地客户端】两种，输入网址：figma.com，进入国外网站，点击【Products】-选择【Downloads】，MAC用户安装好后一定要记得拖拽到安装程序。

5.【Figma Mirror for iOS】支持手机预览的功能，【Font installers】是必须安装的字体管理工具，安装好使用前需要注册登入账号，Figma暂时没有中文版。

6.可以登入figma.cool，进入中文社区-点击【Figma 汉化】下载插件，不建议使用【中文客户端】，推荐安装【Chrome浏览器汉化】-【离线包下载】-右上角点击【...】-选择【更多工具】-【扩展程序】。

7.前期素材准备：字体、Figma安装、iOS常用组件，进入操作界面之后，正常创建的文件都在【草稿】的位置，【草稿】-设计文件/Figma文件/导入/...浏览模板。

8.【社区】提供在线素材非常重要的功能，【创建新的团队】功能属于付费功能，上方主要是操作栏，左侧一些导入的工具栏包含【图层】和【资产】，中间是创作区，右侧是属性栏。

9.Figma的操作逻辑：左上角拖拽元素到画布中-通过左侧调整层级-右侧切换对应属性，右侧选择画布【尺寸】，打开两个网页可以通过【tab】切换界面，必备的两个元素是【底部指示器/状态栏】。

10.左上角第一个图标-选择【查看】-点击【标尺】快捷键【Shift+R】，按住【Alt】MAC系统是【Command键】+鼠标滚轮放大缩小画面，字体选用【PingFang SC】苹方的简体中文版本，颜色选择【HSB】-【60】。

11.移动元素的时候按照【Alt键】可以看到【间距】尽量控制在【4像素】的范畴，上方间距控制在【20像素】左右，椭圆快捷键【O】，右侧调整参数的时候建议以【4的倍数】进行调节，点击圆-右键选择【插件】-选择【avatar】头像插件。

12.矩形快捷键【R】-高度【360】-圆角半径【12】-效果【投影】-Y轴【8】-模糊【40】-透明度【15%】。

13.复制元素按【Command+X】覆盖到图层上方，先将复制的字体放在最左上角，按住【Shift 12 12】向左右移动【20像素】，矩形尺寸【80*80】等分间距【12】。

14.元素在同一个画布内，遮罩效果快捷键【Ctrl+L】【Ctrl+V】创建新的图层，将投影关闭，所有矩形元素【编组】，选择元素右键【编组所选项】，点击最后一个图层右键【设为蒙版】。

15.蒙版快捷键【Ctrl+Command+M】，快速粘贴很多图形，先选择矩形，回到素材库，将图片拖拽到矩形里面，网页版可能会出BUG，复制的时候记得将蒙版关闭掉。

16.按住【Command键】选择矩形、文字元素，按住【Alt】键拖拽复制出来，右侧更改基本参数，【底部指示器】元素图层一定要置顶放置，粘贴的图片尺寸不符时，可以点击【图片】-选择【填充/适应/裁切/平铺】。

。

17.回到草稿页面找到【底部导航栏】，底部导航的状态有四个图标，切换对应的图标素材，建议绘制【32*32】/【28*28】的矩形，复制上相应的图标。

18.Figma里面不需要重开画布，制作新的图层，按住【Alt】拖拽复制，元素一样的留着，不一样的直接删掉，绘制一条【横线】-颜色【90】，制作的方式和前面一个方法差不多。

19.复制文字元素，降低不透明度，【获取】元素先制作一个矩形，然后拖拽成椭圆形，缩放状态的时候需要手动调整圆角参数，文字的第二行效果是通过【文字宽度】来控制的。

20.格式差不多的元素，可以编组再进行复制，编组的目的是为了方便识别，课下同学们也可以临摹操作练习，视频下方评论区留言或者提交作业。

以上就是苹果商店页设计-零基础学Figma图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！