交作业:微博搜索话题 #优设每日作业# 进入话题页即可发布作业
文章编辑:@十豆
欢迎来到涛哥UI设计,这个系列教程我会带着大家学习如何在 Figma 中实现组件化设计。
通过本节课的学习,你将掌握如何创建文字样式、颜色样式以及栅格系统。
详细操作请看文章开头的视频教程演示。
首先我们对 page one 进行重命名为“样式”,然后粘贴已经建立好的文字样式,包括大标题、小标题、导航正文以及说明文字。字号从 24 像素到 14 像素,行高设为从 32 到 22。行高通常是字体大小的 1.6 到两倍,按照最小栅格计数为四进行设定,上下文字的间隙为四像素,即每个字号加上八即为行高。
我们单击选中大标题,然后在 FIGMA 右侧编辑区的 text 文本模块中设置字号、行高和间距。点击右侧的小点,出现 style,然后单击它出现 text style 对话框,点击加号并命名为大标题。如果需要删除样式,可以鼠标悬浮后出现 detach style 后单击它,或者在 local style 模块中右键点击 delete。
选择主色和辅色,然后在非要填充模块中点击小点,存储为主色或辅色。对每一个文字的颜色进行建立,然后将所有的文字颜色建立为一个编组。
选择屏幕宽度为 1440 的尺寸,点击 layout grade,选择12列类型,设置左右边距为 160 像素,蓝与蓝之间的间距为 32 像素,然后存储起来。
学完这篇教程的人还在学…
非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。
转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
发表评论 快来秀出你的观点