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

常常感叹于那些富有创造力,绚丽动画的网页是如何被想象出来的,作为开发者,只是在设计工作者头脑风暴出成品之后照样子展现在网页/移动端上,感觉这样好像就缺少最重要的从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

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

section1 : head

description 和 图片

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

buttons

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

section 2 :distrube

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

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

背景 blur 效果

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

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

相似section

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

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

section6 : use as mask

  • 创建一个 EllepseRectangle

  • 将图片层级放置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

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

figma to react

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

可以自定义转换的语言

在沙箱中看看效果

效果还不错!收工!

参考

资源链接

相关推荐
Summer不秃4 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰8 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye15 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm17 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x43 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap2 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图