常常感叹于那些富有创造力,绚丽动画的网页是如何被想象出来的,作为开发者,只是在设计工作者头脑风暴出成品之后照样子展现在网页/移动端上,感觉这样好像就缺少最重要的从0->1的那部分。于是乎想学习设计,学习成为一个 Reactor && Designer
于是在油管找到一个figma教程 配有案例 遂记录下来 最终实现效果 6v5pn7.csb.app/
准备部分
这个链接打开就是这样,会有一个Setup Materials
- 第一部分是一个sketch,一个非常简易的草稿,只包含主要的层次和结构设计
- 第二部分就是一些准备渲染的图片
- 第三部分页面主要颜色搭配,和使用字体,还有一些对图片细节的描述
新建一个Frame,这样可以把Frame之下的所有折叠起来,结构组织化 再创建一个Desktop
页面层次Frame layout
- 调整页面高度为3355px,看起来差不多就行
- 点击选中Frame,出现这个右边选择栏,选择layout grid为Columns
- 调整Columns具体的参数为12个columns(方便组织结构),透明度调为10%,Type选择居中,再调整间距
- Figma取色可以用快捷键
Ctrl + C 或 i
填充background Fill
- 快捷键
command + 双指上下滚动
可以调节视图大小,不知道window是怎么操作的,也可以直接调节右上角的百分值
12个columns组织结构就很方便了(2,3,4,6的最小倍数) 复制图形技巧:按住option键然后拖动Rectangle
, easy copy
导航栏navigation
- 选中这行navigation,垂直居中
- 选中这行navigation,切换字体为Outfit
auto width
设置宽度为自身content的宽度- 选中右边蓝色标记的三个点,然后点击AG就可以
toUpperCase
- 改字体
color
为 white - 选中这行navigation,使他们成为一个group 快捷键
command + G
然后再重命名为navigation
快捷键command + R
section1 : head
description 和 图片
- description 和 图片就是俩边布局,贴着那12个cloumns就行
- 步骤1和2可以直接按
上 下
来调节 AG是首字母大写 - 步骤四中,因为网页中有很多需要用到这个样式所以在我们可以添加一个Text style之后就方便操作
buttons
- 注意需要把俩个
Rectangle
层级放在文字T
之下,这样文字才能显现 - 实现容器内简单垂直居中办法:选中容器和文字, 然后点击步骤2那栏的第二项(水平居中)和第五项(垂直居中)
- 第一个buttons是填充(fill),第二个buttons是描边(stroke)都用
ctrl + c
取色 - 最后调整一下总体desctions和图片的布局,最后group一下
command + G
section 2 :distrube
- 选中这个四个图片可以同时放大缩小,差不多占到90%的宽度
- 这个文字样式其实就是上面button的样式,可以将Text style应用到这里
- 将蒙板的层级放在四个图片之上
- 然后给蒙板加上透明度就能实现遮罩效果
选中这四个图片,然后Tidy up
就可以简单实现 space around
最后再group + rename
背景 blur 效果
- 添加一个
Ellipse
层级放置最低 - 添加blur效果, 再上下调试数值,也可适当加些透明度
然后按住option
复制一个改填充色就行
相似section
这俩个section其实就是和第一个section拼拼凑凑改改图片字体位置就可以出来,就不再赘述了
这个居中就很简单了,选择第二个水平居中,然后再点...
的alignment
的第二个实现文字居中
section6 : use as mask
-
创建一个
Ellepse
和Rectangle
-
将图片层级放置
Ellepse
并选中use as mask
超过圆形的图片会被遮住,就可以实现头像丝滑变成圆形 -
再填充文字,一个人物卡片就OK了
-
之后按住
option
复制改改文本图片就行 -
最后给每个卡片人物
group + rename
,然后将三个人物group
gradient 效果
但是到这里高度就已经不够了,如果直接伸长高度会发现许多样式都要变形,这是因为figma默认设置但是Frame中的内容都是相对于Frame的 可以选中Frame中的所有内容将Constraints
属性的水平值改为center
,垂直值改为top
,这样就符合直觉了
创建一个Rectangle
点击fill
的调色板,然后点击gradient
属性
可以直接在Document colors
找到文档中常用的颜色值
然后填充文字和buttons,选中之后居中对齐这一part就完成了
section7 :footer
- 在最下面的footer再加上一个类似上面的gradient样式
- 每一列按照2个columns来设计,再水平对齐
- 再添加俩个
Rectangle
其中submit文本
层级最高,不应该蒙板遮住,email address文本
层级最低 需要被遮住 然后submit button
是在蒙板层级之上 ctrl + c
取颜色 保持高度和border-radius相同
figma to react
在figma插件中一些Figma to Code插件 例如
可以自定义转换的语言
在沙箱中看看效果
效果还不错!收工!