Figma 组件化设计入门!NO.02 创建样式

B站视频:av316352142
类别:UI设计
水平:入门
观众:7.9k
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

教程作者:@涛哥UI设计(授权转载)

交作业:微博搜索话题 #优设每日作业# 进入话题页即可发布作业

文章编辑:@十豆

一、关于教程

欢迎来到涛哥UI设计,这个系列教程我会带着大家学习如何在 Figma 中实现组件化设计

通过本节课的学习,你将掌握如何创建文字样式、颜色样式以及栅格系统。

二、教程简概

详细操作请看文章开头的视频教程演示。

#01 创建文字样式

首先我们对 page one 进行重命名为“样式”,然后粘贴已经建立好的文字样式,包括大标题、小标题、导航正文以及说明文字。字号从 24 像素到 14 像素,行高设为从 32 到 22。行高通常是字体大小的 1.6 到两倍,按照最小栅格计数为四进行设定,上下文字的间隙为四像素,即每个字号加上八即为行高。

Figma 组件化设计入门!NO.02 创建样式

#02 存储文字样式

我们单击选中大标题,然后在 FIGMA 右侧编辑区的 text 文本模块中设置字号、行高和间距。点击右侧的小点,出现 style,然后单击它出现 text style 对话框,点击加号并命名为大标题。如果需要删除样式,可以鼠标悬浮后出现 detach style 后单击它,或者在 local style 模块中右键点击 delete。

Figma 组件化设计入门!NO.02 创建样式

#03 创建颜色样式

选择主色和辅色,然后在非要填充模块中点击小点,存储为主色或辅色。对每一个文字的颜色进行建立,然后将所有的文字颜色建立为一个编组。

Figma 组件化设计入门!NO.02 创建样式 Figma 组件化设计入门!NO.02 创建样式 Figma 组件化设计入门!NO.02 创建样式

#04 建立栅格系统

选择屏幕宽度为 1440 的尺寸,点击 layout grade,选择12列类型,设置左右边距为 160 像素,蓝与蓝之间的间距为 32 像素,然后存储起来。

Figma 组件化设计入门!NO.02 创建样式 Figma 组件化设计入门!NO.02 创建样式

学完这篇教程的人还在学…

2 收藏 8

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 快来秀出你的观点

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片