翻译：徐小马 原文作者：Tess Gadd
原文链接：https://blog.framer.com/framer-cheat-sheet-layer-styling-9d32246716e8
本文由非科班设计翻译小组翻译
我为了像我一样不是很精通代码（但是善于粘贴复制）的人写下Framer学习备忘录系列。我们将专注于最最基本的属性和最常用到的样式。
如果你还没有Framer，点击这里来下载一个为期两周的试用版。
在这篇Framer学习备忘录里，我们将设计下列话题：
-
如何给图层添加样式
-
布局
-
大小、形状和旋转
-
描边
-
颜色和透明度
-
图像
-
排版
-
阴影
-
创建一个样式表
1、如何给图层添加样式
首先你需要创建一个图层，
然后给它添加属性，
有两种不同的方式来给图层添加样式。你可以在定义图层的时候添加属性，或是稍后引用这些属性。
注意：存在一些你无法在定义图层时添加的样式，比如：
现在你知道如何给图层添加样式了，让我们看看更多的属性。引用Groove Armada的话“We Super styling”。
2、布局
我们可以通过改变x和y的值在屏幕上移动图层。当你想让一个图层居中对齐（或左、右、顶、底等）时，图层会和屏幕或他的父图层对齐。
基本布局
运用x和y轴，你可以在屏幕上移动图层。
图层对齐
运用对齐属性，你可以将你的图层和屏幕上的其他元素对齐。
代码片段：
运用公式来使你的图层居中
你可以运用对齐公式来使你的图层在x轴或y轴（或两个轴）居中。当运用 centerX() 或 centerY() 时，你可以通过在括号内输入数字来微调位置。
代码片段：
3、大小，形状和旋转
我们可以通过运用若干的属性来改变图层的大小和形状。我们可以绘制任意大小的正方形、矩形、圆角矩形、圆形等形状。
标准形状
运用高和宽属性，你可以改变图层的大小。
利用屏幕尺寸来绘制图层
利用“屏幕尺寸”来绘制图层会比直接输入屏幕的高和宽要方便。这个方法也可以让图层根据平台进行重新绘制。你可以基于另一个图层来绘制新的图层，只需要在下面的案例代码中用另一个图层的名字替换掉“Screen”即可。
重新布置
即时你设定图层和屏幕等高等宽，当你改变屏幕尺寸时图层大小也不会跟随变化。
为了解决这个问题，我们创建一个监听机制来使图层尺寸随着屏幕尺寸而变化。
窍门：window.onresize = ->可以实现同样的效果，且明显输入方便。（感谢Manas Vaze）
边界圆角
边界圆角可以把你的图层变成比正方形或矩形更有趣的形状。因为真正的图层，都有美妙的弧线。
窍门：如果你设定boder radius为“50%”，图层将永远是圆形；
缩放
缩放属性可以改变图层的尺寸，也会影响这个图层所有的子图层。
尺寸属性
尺寸属性使你不仅可以绘制一个矩形图层，也可以把一个图层的高和宽拷贝给另一个。
旋转
你可以用下面的属性来旋转图层。
4、描边
正确地运用描边可以给你的设计画龙点睛。错误的使用则会显得很奇怪，但是你也可以试一试再说。
更多描边样式
5、颜色和透明度
Framer JS有许多的色彩模型和色彩特性。我们可以利用渐变、混合模式、透明度、色彩效果和其他等等特性随意发挥设计。
背景颜色
色彩标准
不必使用超过一种的色彩标准。确保当若干色彩通过动效变化时，使用的是同一个色彩标准。
透明度和可见性
有很多方法可以让图层变透明。取决于你用了哪个属性，你可以影响子图层，无论子图层是否激活。
背景颜色-transparent属性
如果你想事背景透明且保持激活，那就使用backgroundColor属性。在你给图片添加触摸热区时，这个方法异常好用。
想象你的图层吃了透明果实，你看不见，但他就在那。
当使用transparent，子图层将仍然可见。就好比是吃了透明果实后，穿的衣服仍然可见，只是人不见了。
背景颜色-opacity属性
如果你在图层的背景色彩中设定opacity（比如RGBA标准），那么只有这个图层会被影响。所以透明人会有50%透明度，和100%可见的衣服。
OPACITY属性
使用opacity属性，所有的子图层将被影响。透明人和自己的衣服都只会有50%的可见度。
VISIBLE属性
VISIBLE属性是一个布尔值（只有true和false两个状态），它可以使你的图层可见或者不可见。
visible:false #无法看见这个图层
visible:true #可以看见这个图层
渐变
想赶渐变的时髦？用webkit就可以做到！
如果你需要一些渐变的灵感，点击这里 UI Gradients.
注意：
你无法在切换渐变时运用动效，而切换颜色时却可以。
颜色效果
Framer里有很多可以运用在背景色和图像的颜色效果。
混合模式
像PS、sketch和其他设计工具一样，你可以在图层间运用混合模式。
随机色彩
随机色彩对懒人来说真是大救星，因为它可以随机地生成颜色，无需你煞费苦心。当你在测试一个想法，需要快点选取几个颜色时，这个工具尤其管用。在下面的案例中你可以看见颜色在重新加载（cmd+r）时发生了随机变化。你可以改变括号内的值来给颜色添加透明度。
6、图像
给图层添加图像十分容易。由于图像在导入时会自适应图层，你需要保证图层的尺寸正确。把图像存入你framer文件夹中的“图像”文件夹内或是使用图像链接。
随机图像
随机图像对懒人来说又是一个大救星。使用随机图像，你可以从 UnSplash 上快速导入随机图像。当年在测试一个想法，需要一些图像时，这个方法非常管用。
图像效果
和颜色效果一样，那些属性也可以应用在你的图像上。
7、排版
创建一个文字图层很简单，然而编辑这些文字的样式就很麻烦了。这些文字默认为白色。
从Google导入一个字体
Google给我们做了一个超赞的字体库。我们所要做的就是从里面导入。
注意：
不幸的是，当你用Chrome镜像自定义字体时，它处理的并不是很好。这时候你用safari或其他浏览器再试试。
给字体添加样式
因为你是在给字体而不是图层添加样式，你需要把它定义成一个样式。
更多代码片段：
内嵌文本样式
HTML文本样式非常好用，尤其是在大段落文本上。不像属性，你可以在段落里面添加样式（译者注：用html标签）。Visit W3Schools html formatting.
8、阴影
阴影可以给图层增加深度。试试下面列出的属性吧。
9、创建一个样式表
创建一个样式表将免去你很多的痛苦。你能轻松修改整个原型里的各个样式，而不是浪费时间，找到每个图层挨个修改。这与颜色、字体和间距尤其相关。
样式表中的字体
你在文件的头部创建自己的样式，然后在用到的时候引用这些样式。
样式表中的颜色
当给颜色命名时，最好是使用颜色的应用情况而不是颜色本身。比如说，命名为“ButtonColour”而不是“blue”。
样式表中的大小
在你的样式表中创建间距样式能给省上一大笔时间。并且你能够一步调整所有的布局。
试一试这个example。
最后
大部分的样式属性都是从CSS中继承来的，比如CSS中的font-size在coffeeScript中变成了fontSize。所以如果你找不扰你要的属性，去w3cschool看看。
