刚接触 Framer X 的时候还有点不适应，毕竟以前使用密度最高的是 OmniGraffle，OmniGraffle 是以对象为中心的绘图软件，新建文件就是一个空白的版面（画布），在这个没有「边界」的画布上可以自由的创建绘图对象，然后选择对象对其进行属性设定和操作。如果同样用来设计原型页面，既可以按版面、也可以使用 「画板」（Artboard） 来框选需要输出的范围。
Framer X 与 OmniGraffle 这类传统绘图软件不同，它是服务于原型输出的软件，使用观念上也有很大的不同，Framer X 的构图核心是一个个的框架（frame），顺序上是先有框架再有对象，大到输出单元的画板，小到具体的图标都是如此。
画布
新建 Framer X 文件，在 Framer X 界面我们看到的是灰色的画布，第一步要做的工作是绘制一个 Framer 框架，并以此为画板来承载更多的对象。
如下图所示，按 F 键进入框架绘制模式，可以直接在灰色的画布上绘制一个区域，或者直接在右侧向导栏里选择设备的尺寸。
简单的一个新建文件，已经让人感受到了原型绘图和普通绘图的不同， 原型绘图是布局为先，普通绘图是对象为先。框架是页面布局的基础，基于框架的嵌套和相对位置控制，可以约束对象在页面拉伸、变化时依旧保持版面内容的协调。这样能最大限度的实现设计稿的复用，便于快速适配不同分辨率的多种设备。
了解了框架的作用，就不难理解 Framer X 的工作流，前期更像是在纸上画草图的阶段，先勾勒一个个线框来体现大致的页面布局，然后补充线框内的元素和对象，最后用文本和图示补充说明和描述。落实到 Framer X 的具体绘图上，就是先定外围的框架（按设备或输出页面分辨率来设置），然后按照先大后小、由左往右的方式逐层绘制框架进行布局，布局完成后再补充细节元素。
Framer X 中框架是布局对象，如果要在框架内输入文本，需要添加独立的文本对象并移动到框架内。这一点和 OmniGraffle 等绘图软件不同，OmniGraffle 中矩形是绘图对象，所以可以直接双击添加文本。
坐标
基于框架进行布局的原型绘图中，还有一个和传统绘图软件不同的地方就是坐标模式的区别。
OmniGraffle 是以绝对坐标模式对视图进行定位，绘图对象的坐标基准是整个背景画布，对象的位置是基于版面原点来体现的，随便绘制一个对象，都能在「几何形状」中看到距离左边（X 轴） xx 像素，距离顶部（Y 轴） xx 像素。
Framer X 的坐标模式是相对于父框架的，框架内的对象以父级框架或者同级的其它对象为参照。例如，下图所示的 Logo，中间的图标部分上下（50）左右（60）的尺寸，都是相对于作为白色背景的父级框架而定的。
相对坐标模式保证了对象布局的相对稳定，在缩放时框架内部的对象可以一起变化。如上图示例中锁定（点亮蓝色的短线）了上下的位置，结果会怎样呢？当我们缩放白色背景的外围框架时，中间的图形会在高度发生变化时等比变化，但是宽度方向变化是则不会一起变化。
对象的定位上除了固定（Fixed）的尺寸，相对（Relative）百分比，还有弹性尺寸（Fraction），后面会结合具体案例具体介绍。
快捷
工具栏中展示了常用的操作的快捷热键，在键盘上按单个的字符就可以。布局操作有：F（框架）、U（圆角）、T（文本）、S（堆栈），交互操作有 L（连接）。移动画布和其它绘图软件一样，按住空格拖移。
工具栏快捷方式
| 工具 | |
|---|---|
| F | 框架（Frame） |
| U | 圆角（Round） |
| T | 文本（Text） |
| S | 堆栈（Stack） |
| L | 连接（Link） |
| 按住空格 & 双指拖移 | 平移画布 |
画布内容显示上，主要会用到的是缩放和选择对象，Framer X 目前只支持 12 级的缩放，10%、25%、50%、75%、100%、150%、200%、300%、400%、800%、1600%、3200%，习惯了 OmniGraffle 的无级缩放会觉的 Framer X 的缩放略显渣渣。
⌘9 可以帮助我们快速的缩放并定位到选中的对象，结合工具栏中的「图层」选择对象并缩放能提到操作效率。
画布的缩放操作热键和快捷键组合
| 查看 | |
|---|---|
| Z | 缩放（Zoom） |
| ⌘ + | 放大（Zoom In） |
| ⌘ - | 缩小（Zoom Out） |
| ⌘ 1 | 缩放以显示所有对象（Zoom to Fit） |
| ⌘ 9 | 缩放到选中的对象（Zoom to Selection） |
| ⌘ 0 | 缩放到 100%（Reset Zoom） |
Framer X 里也可以进行矢量绘图，利用线条、矩形、圆形、多边形来完成绘制和形状拼合。拼合后的形状是可逆的，绘图模式中会以层级的方式来显示组成部分。Graphic 可以理解成是一个绘图框架，绘图前一样是先画框架，然后在其内部绘制图形。
绘图模式会列出所有当前文件的绘图对象，按 G 键或者双击已有的图形进入绘图模式。退出绘图模式点击左栏顶部的「Done」。由于 Framer X 的缩放和画布拖移很不平滑，所以在 Framer X 里绘图的体验并不好。
绘图模式下的操作热键
| 图形 | |
|---|---|
| G | 图形框架（Graphic） |
| P | 线条（Path） |
| R | 矩形（Rectangle） |
| O | 椭圆（Oval） |
| ⌘G | 群组（Group） |
| ⇧⌘G | 取消群组（Ungroup） |
Framer X 通过图层（Layers）是组织和管理所有对象，以画布上的框架为一个组织单元。框架既是承载对象的容器，也是布局和输出对象的基本单位。Framer X 没有 OmniGraffle 中页的概念，灰色画布上相对独立的框架就是一个「页」，或者称之为「画板」（artboard），同一个画布上允许创建 N 个框架。框架绘制模式中，Framer X 会基于已有框架单元以灰色区域预判新框架的布局和位置，只需要点击就能快速的完成添加。
图层
| 图层 | |
|---|---|
| ⌘ return | 为选中对象添加框架（Add Frame） |
| ⌘ ← | 为选中对象移除框架（Remove Frame） |
| ⌥ ⌘ ↑ | 在图层中调整位置，前移（Move Forward） |
| ⌥ ⌘ ↓ | 在图层中调整位置，后移（Move Backward） |
Framer X 为框架创建提供了很多智能化的操作，多个框架嵌套时，Framer X 会自动基于当前框架的位置变更其层级隶属关系，移动外围的框架就能移动它以及它包含的所有内部对象。拖移框架时，Framer X 会动态显示参考辅助线，帮助用户快速对齐。
由于 Framer X 的框架嵌套特性，所以操作交互上也有些区别。
例如，选择对象时，鼠标指针滑动高亮的往往是最外层的框架，要「穿越」外面的框架选择里面的对象，既双击鼠标，也可以按住 ⌘ 键点选。
⌘D，创建副本，布局时常用的操作，例如，堆栈中新增一个一样的对象，没有比选中对象后 ⌘ D 更快的操作。
⌥⌘C 和 ⌥⌘V 可以当格式刷来使用。快速选择同级对象或者子级对象可以用 ⇧⌘A 和 ⌥⌘A 组合键。
编辑操作经常用到的热键和快捷键组合
| 编辑 | |
|---|---|
| ⌘ 箭头 | 对象尺寸调节（Object Size） |
| ⇧ ⌘ 箭头 | 以 10 为递进值调整尺寸（Object Size by 10） |
| 0 ～ 9 | 框架透明度（Opacity）快速设置 0=100% 2=20% 依此类推 |
| ⌥ | 显示间距（Show Distance），选中对象和鼠标悬停对象直接的间距（同层级或与父级框架的间距） |
| ⌘ D | 创建对象副本（Duplicate In Place） |
| ⌥ 拖移 | 复制选择的对象（Duplicate Selected Object） |
| ⌥ ⌘ C | 拷贝样式（Copy Style） |
| ⌥ ⌘ V | 粘贴样式（Paste Style） |
| ⌃ C | 拾色器（Color Picker） |
| ⌘ A | 选择所有图层（Select All Layers），选择当前主框架内的所有未锁定（Lock）的图层 |
| ⇧ ⌘ A | 选择所有与当前图层处于同级的图层（Select All Siblings） |
| ⌥ ⌘ A | 选择当前图层下的所有子图层（Select All Children） |
组件
组件是 Framer X 让人最激动的地方，安装组件后直接拿来就用极大的提高了的效率，对于团队来说更是如此。为了熟悉可用的组件，花时间翻阅一下 Store 里的组件是很有必要的，感觉合用的收藏（Favorites）起来，节省后续使用的时间。
通过 Favorites 的次数和下载量可以对组件的受欢迎度有个判断。Framer X 的组件是随文档走的，所以用的时候才下载到文档中，另外需要注意的是，组件也涉及到一个 Framer Library 库更新的问题，Framer X 升级后可能会在打开文档时因为版本不兼容报错。所以，可供选择的组件虽然很多，还是要审慎的 Install 必要的组件，不要一股脑下载一堆可能用不到的。
组件很多都包含设定参数，可以进行一定的变化，例如图示中的菜单栏组件，可以调节主题色，自行填写菜单项。
下载的组件能进一步改造，存储成自己的组件。组件上右键 Copy Code 复制需要的组件的代码，然后点击组件栏顶部的 New from Code，为新组件取一个名字点击「Create and Edit」，Framer X 会关联打开系统内的代码编辑器，将复制的代码粘贴替换掉默认的代码，根据自己的要求可以修改代码并保存。
选择文档中的任何框架都可以右键 Create Component 将其存成组件，方便复用。
使用组件的过程中需要留意，组件有 Master 和 Instance 的主从区别，Master 的改变会同步到 Instance 组件上，反过来就不会。在 Master 组件的属性定义中可以勾选允许 Instance 组件自定义的部分，例如图示中 Message box 组件的三个 Text 文本。