怎么成为一个Reactor && Designer --上手figma

oddpro
1,951 阅读5分钟

常常感叹于那些富有创造力，绚丽动画的网页是如何被想象出来的，作为开发者，只是在设计工作者头脑风暴出成品之后照样子展现在网页/移动端上，感觉这样好像就缺少最重要的从0->1的那部分。于是乎想学习设计，学习成为一个 Reactor && Designer

于是在油管找到一个figma教程 配有案例 遂记录下来 最终实现效果 6v5pn7.csb.app/

准备部分

这个链接打开就是这样，会有一个Setup Materials

Img

  • 第一部分是一个sketch，一个非常简易的草稿，只包含主要的层次和结构设计
  • 第二部分就是一些准备渲染的图片
  • 第三部分页面主要颜色搭配，和使用字体，还有一些对图片细节的描述

Img

新建一个Frame，这样可以把Frame之下的所有折叠起来，结构组织化 再创建一个Desktop

页面层次Frame layout

  • 调整页面高度为3355px，看起来差不多就行
  • 点击选中Frame，出现这个右边选择栏，选择layout grid为Columns
  • 调整Columns具体的参数为12个columns（方便组织结构），透明度调为10%，Type选择居中，再调整间距
  • Figma取色可以用快捷键 Ctrl + C 或 i 填充 background Fill
  • 快捷键command + 双指上下滚动可以调节视图大小，不知道window是怎么操作的，也可以直接调节右上角的百分值 Img

12个columns组织结构就很方便了（2，3，4，6的最小倍数） 复制图形技巧：按住option键然后拖动Rectangle， easy copy Img

导航栏navigation

  1. 选中这行navigation，垂直居中
  2. 选中这行navigation，切换字体为Outfit
  3. auto width 设置宽度为自身content的宽度
  4. 选中右边蓝色标记的三个点，然后点击AG就可以 toUpperCase
  5. 改字体color 为 white
  6. 选中这行navigation，使他们成为一个group 快捷键command + G 然后再重命名为navigation 快捷键command + R Img

section1 ： head

description 和 图片

Img

  • description 和 图片就是俩边布局，贴着那12个cloumns就行
  • 步骤1和2可以直接按上 下来调节 AG是首字母大写
  • 步骤四中，因为网页中有很多需要用到这个样式所以在我们可以添加一个Text style之后就方便操作 Img

buttons

  1. 注意需要把俩个Rectangle层级放在文字T之下，这样文字才能显现
  2. 实现容器内简单垂直居中办法：选中容器和文字， 然后点击步骤2那栏的第二项(水平居中)和第五项(垂直居中)
  3. 第一个buttons是填充（fill），第二个buttons是描边（stroke）都用ctrl + c 取色
  4. 最后调整一下总体desctions和图片的布局，最后group一下 command + G

Img

section 2 ：distrube

Img

  1. 选中这个四个图片可以同时放大缩小，差不多占到90%的宽度
  2. 这个文字样式其实就是上面button的样式，可以将Text style应用到这里
  3. 将蒙板的层级放在四个图片之上
  4. 然后给蒙板加上透明度就能实现遮罩效果

Img 选中这四个图片，然后Tidy up 就可以简单实现 space around 最后再group + rename

背景 blur 效果

Img

  • 添加一个 Ellipse 层级放置最低
  • 添加blur效果， 再上下调试数值，也可适当加些透明度

然后按住option复制一个改填充色就行 Img

相似section

这俩个section其实就是和第一个section拼拼凑凑改改图片字体位置就可以出来，就不再赘述了 Img

这个居中就很简单了，选择第二个水平居中，然后再点...的alignment的第二个实现文字居中 Img

section6 ： use as mask

  • 创建一个 Ellepse 和 Rectangle

  • 将图片层级放置Ellepse并选中 use as mask 超过圆形的图片会被遮住，就可以实现头像丝滑变成圆形 Img

  • 再填充文字，一个人物卡片就OK了

  • 之后按住option复制改改文本图片就行

  • 最后给每个卡片人物group + rename，然后将三个人物group

Img

gradient 效果

但是到这里高度就已经不够了，如果直接伸长高度会发现许多样式都要变形，这是因为figma默认设置但是Frame中的内容都是相对于Frame的 可以选中Frame中的所有内容将Constraints属性的水平值改为center，垂直值改为top，这样就符合直觉了 Img

创建一个Rectangle 点击fill的调色板，然后点击gradient属性 Img

可以直接在Document colors找到文档中常用的颜色值 Img

然后填充文字和buttons，选中之后居中对齐这一part就完成了 Img

section7 ：footer

  1. 在最下面的footer再加上一个类似上面的gradient样式
  2. 每一列按照2个columns来设计，再水平对齐
  3. 再添加俩个Rectangle 其中submit文本层级最高，不应该蒙板遮住，email address文本层级最低 需要被遮住 然后submit button是在蒙板层级之上
  4. ctrl + c 取颜色 保持高度和border-radius相同 Img

figma to react

在figma插件中一些Figma to Code插件 例如 Img

可以自定义转换的语言 Img

Img

在沙箱中看看效果 Img

效果还不错！收工！

参考

资源链接

avatar
文章
阅读
粉丝