Framer学习备忘录:图层样式

翻译徐小马 原文作者:Tess Gadd

原文链接:https://blog.framer.com/framer-cheat-sheet-layer-styling-9d32246716e8

本文由非科班设计翻译小组翻译


我为了像我一样不是很精通代码(但是善于粘贴复制)的人写下Framer学习备忘录系列。我们将专注于最最基本的属性和最常用到的样式。


如果你还没有Framer,点击这里来下载一个为期两周的试用版。


在这篇Framer学习备忘录里,我们将设计下列话题:


  1. 如何给图层添加样式

  2. 布局

  3. 大小、形状和旋转

  4. 描边

  5. 颜色和透明度

  6. 图像

  7. 排版

  8. 阴影

  9. 创建一个样式表



1、如何给图层添加样式

首先你需要创建一个图层,


Framer学习备忘录:图层样式


然后给它添加属性,


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


有两种不同的方式来给图层添加样式。你可以在定义图层的时候添加属性,或是稍后引用这些属性。


Framer学习备忘录:图层样式


注意:存在一些你无法在定义图层时添加的样式,比如:


Framer学习备忘录:图层样式


现在你知道如何给图层添加样式了,让我们看看更多的属性。引用Groove Armada的话“We Super styling”。



2、布局

我们可以通过改变x和y的值在屏幕上移动图层。当你想让一个图层居中对齐(或左、右、顶、底等)时,图层会和屏幕或他的父图层对齐。


基本布局

运用x和y轴,你可以在屏幕上移动图层。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


图层对齐

运用对齐属性,你可以将你的图层和屏幕上的其他元素对齐。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


代码片段:


Framer学习备忘录:图层样式


运用公式来使你的图层居中

你可以运用对齐公式来使你的图层在x轴或y轴(或两个轴)居中。当运用 centerX() 或 centerY() 时,你可以通过在括号内输入数字来微调位置。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


代码片段:


Framer学习备忘录:图层样式



3、大小,形状和旋转

我们可以通过运用若干的属性来改变图层的大小和形状。我们可以绘制任意大小的正方形、矩形、圆角矩形、圆形等形状。


标准形状

运用高和宽属性,你可以改变图层的大小。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


利用屏幕尺寸来绘制图层

利用“屏幕尺寸”来绘制图层会比直接输入屏幕的高和宽要方便。这个方法也可以让图层根据平台进行重新绘制。你可以基于另一个图层来绘制新的图层,只需要在下面的案例代码中用另一个图层的名字替换掉“Screen”即可。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


重新布置

即时你设定图层和屏幕等高等宽,当你改变屏幕尺寸时图层大小也不会跟随变化。


Framer学习备忘录:图层样式


为了解决这个问题,我们创建一个监听机制来使图层尺寸随着屏幕尺寸而变化。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式

窍门:window.onresize = ->可以实现同样的效果,且明显输入方便。(感谢Manas Vaze)


Framer学习备忘录:图层样式


边界圆角

边界圆角可以把你的图层变成比正方形或矩形更有趣的形状。因为真正的图层,都有美妙的弧线。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


窍门:如果你设定boder radius为“50%”,图层将永远是圆形;


Framer学习备忘录:图层样式


缩放

缩放属性可以改变图层的尺寸,也会影响这个图层所有的子图层。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


尺寸属性

尺寸属性使你不仅可以绘制一个矩形图层,也可以把一个图层的高和宽拷贝给另一个。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


旋转

你可以用下面的属性来旋转图层。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式



4、描边

正确地运用描边可以给你的设计画龙点睛。错误的使用则会显得很奇怪,但是你也可以试一试再说。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


更多描边样式


Framer学习备忘录:图层样式



5、颜色和透明度

Framer JS有许多的色彩模型和色彩特性。我们可以利用渐变、混合模式、透明度、色彩效果和其他等等特性随意发挥设计。


背景颜色


Framer学习备忘录:图层样式


色彩标准

不必使用超过一种的色彩标准。确保当若干色彩通过动效变化时,使用的是同一个色彩标准。


Framer学习备忘录:图层样式


透明度和可见性

有很多方法可以让图层变透明。取决于你用了哪个属性,你可以影响子图层,无论子图层是否激活。


背景颜色-transparent属性

如果你想事背景透明且保持激活,那就使用backgroundColor属性。在你给图片添加触摸热区时,这个方法异常好用。


想象你的图层吃了透明果实,你看不见,但他就在那。


当使用transparent,子图层将仍然可见。就好比是吃了透明果实后,穿的衣服仍然可见,只是人不见了。


Framer学习备忘录:图层样式


背景颜色-opacity属性

如果你在图层的背景色彩中设定opacity(比如RGBA标准),那么只有这个图层会被影响。所以透明人会有50%透明度,和100%可见的衣服。


Framer学习备忘录:图层样式


OPACITY属性

使用opacity属性,所有的子图层将被影响。透明人和自己的衣服都只会有50%的可见度。


Framer学习备忘录:图层样式


VISIBLE属性

VISIBLE属性是一个布尔值(只有true和false两个状态),它可以使你的图层可见或者不可见。

visible:false #无法看见这个图层

visible:true #可以看见这个图层


渐变

想赶渐变的时髦?用webkit就可以做到!

如果你需要一些渐变的灵感,点击这里 UI Gradients.


注意:

你无法在切换渐变时运用动效,而切换颜色时却可以。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


颜色效果

Framer里有很多可以运用在背景色和图像的颜色效果。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


混合模式

像PS、sketch和其他设计工具一样,你可以在图层间运用混合模式。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


随机色彩

随机色彩对懒人来说真是大救星,因为它可以随机地生成颜色,无需你煞费苦心。当你在测试一个想法,需要快点选取几个颜色时,这个工具尤其管用。在下面的案例中你可以看见颜色在重新加载(cmd+r)时发生了随机变化。你可以改变括号内的值来给颜色添加透明度。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式



6、图像

给图层添加图像十分容易。由于图像在导入时会自适应图层,你需要保证图层的尺寸正确。把图像存入你framer文件夹中的“图像”文件夹内或是使用图像链接。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


随机图像

随机图像对懒人来说又是一个大救星。使用随机图像,你可以从 UnSplash 上快速导入随机图像。当年在测试一个想法,需要一些图像时,这个方法非常管用。


Framer学习备忘录:图层样式


图像效果

和颜色效果一样,那些属性也可以应用在你的图像上。


Framer学习备忘录:图层样式



7、排版

创建一个文字图层很简单,然而编辑这些文字的样式就很麻烦了。这些文字默认为白色。


Framer学习备忘录:图层样式


从Google导入一个字体

Google给我们做了一个超赞的字体库。我们所要做的就是从里面导入。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


注意:

不幸的是,当你用Chrome镜像自定义字体时,它处理的并不是很好。这时候你用safari或其他浏览器再试试。


给字体添加样式

因为你是在给字体而不是图层添加样式,你需要把它定义成一个样式。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式


更多代码片段:

Framer学习备忘录:图层样式


内嵌文本样式

HTML文本样式非常好用,尤其是在大段落文本上。不像属性,你可以在段落里面添加样式(译者注:用html标签)。Visit W3Schools html formatting.


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式



8、阴影

阴影可以给图层增加深度。试试下面列出的属性吧。


Framer学习备忘录:图层样式


Framer学习备忘录:图层样式



9、创建一个样式表

创建一个样式表将免去你很多的痛苦。你能轻松修改整个原型里的各个样式,而不是浪费时间,找到每个图层挨个修改。这与颜色、字体和间距尤其相关。


样式表中的字体

你在文件的头部创建自己的样式,然后在用到的时候引用这些样式。


Framer学习备忘录:图层样式


样式表中的颜色

当给颜色命名时,最好是使用颜色的应用情况而不是颜色本身。比如说,命名为“ButtonColour”而不是“blue”。


Framer学习备忘录:图层样式


样式表中的大小

在你的样式表中创建间距样式能给省上一大笔时间。并且你能够一步调整所有的布局。


Framer学习备忘录:图层样式


试一试这个example。


Framer学习备忘录:图层样式



最后


大部分的样式属性都是从CSS中继承来的,比如CSS中的font-size在coffeeScript中变成了fontSize。所以如果你找不扰你要的属性,去w3cschool看看。

·End·

生而为赢而不是别输

Play to win instead of playing not to lose.

—— Money

微交互 ∣细节设计成就卓越产品

Framer学习备忘录:图层样式
Framer学习备忘录:图层样式

长按,识别二维码,加关注


  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: