Framer 测试版内置代码编辑器2019-4-4
最新教程更多
- Framer Playground 试玩教程前几天，设计工具 Framer X 又更新了一个版本，按他们的话来说是 2019 年以来最大的一次更新。既然是最大的更新，肯定有一个重磅功能，这一次的重磅功能就是 Playground——一个内置的专属于设计师的代码编辑器。  那么这次发布的 Playground 到底是什么呢？和以前的代码编辑器又有什么不同呢？ 我大概看了一下官方的博文，总体来说就是做了两件事：提供了一个基于 React 的基础代码库，同时还提供一个针对这个库优化过的代码编辑器。 那么具体该怎么用呢，你可以参考这篇文章：https://mp.weixin.qq.com/s/V0ijT0ciC3AHxOgZ6N_95A。 **参考链接：**<br/> - [Framer X Playground 介绍](https://www.framer.com/blog/posts/introducing-framer-playground/) - [Code 文档](https://www.framer.com/docs/code) - [API 文档](https://www.framer.com/api) - [Framer React 指南]( https://paper.dropbox.com/doc/Framer-ES6-React-Guide-Th7joG9fFSSiyZgOFYqj6) - [在线示例](https://codesandbox.io/embed/z2j2q261k3)
- 写给设计师的 React 入门指南Facebook 推出的前端框架 React 现已被广泛使用，其组件化开发理念大大提高了开发效率。对于设计师来说，这种组件化思维和设计工具中的组件式设计也是相通的，而且设计工具 Framer 已经支持设计师直接使用 React 构建交互式组件。因此，设计师有必要了解或学习一下 React，这对于设计与开发之间的协作是很有帮助的。
- 用 Framer X 做一个评论组件Framer X 已经发布好几个月了，相较于之前的 Framer Studio，X 不再分为设计模式和代码模式了，而是提供了「设计组件」和「代码组件」。「设计组件」和 Figma 的组件、Sketch 的 Symbol 大同小异，而代码组件则是完全使用代码编写的组件。同时，X 也摒弃了过时的 Coffeescript，而采用时下火热的 React。 代码组件，顾名思义是使用代码编写的，而不是通过拖拽图形组合而成的。X 的代码组件很特别的一点是可以自定义它的哪些属性可以调节，就像你在右侧设置一个矩形的背景色、圆角一样，你可以在右侧调整一个组件的自定义属性。 今天，我将通过一个简单的评论组件来介绍在 X 中如何使用代码编写组件。
- 用代码让不同组件、图层交互起来这是一篇译文，原标题 “How to create a simple prototype with Code Overrides in Framer X”，原作者是 Framer.com 的设计师 Benjamin den Boer 。这篇文章主要讲解的是，如何在 Framer X 中使用 Code Overrides 在不同的组件、图层之间进行连接，使其产生交互反应。
- Framer X 新版体验感受早在 6 月份， Framer 官方就在网站上放出了新产品 Framer X 的消息，并表明这是一个“突破规则的产品，能够更好地融合设计和开发”。同时，这款产品最开始的一条 Slogan 是 “React meets design” ，React 是 Facebook 2013 年开源的一款组件化构建界面框架，主要特点是用数据维护界面状态。这一切都给我们很丰富的想象空间。 终于，我在这周收到了 Framer X 的测试版，简单把玩了一下，试着写一下我的感受。 先抛出结论：Framer X 更像一个设计工具了，布局、组件、路径这些功能都很完善；但是对于想要实现高保真可交互原型的人来说，却更难了，因为要学会使用 React 构建组件；不过它却更接近一个可以构建设计系统的设计工具了。
- 代码，一种看不见的设计工具上个月 Framer 放出了新产品 Framer X 的预告片，让我想起了这篇旧文。这篇文章讲的是代码给我们的设计流程带来了怎样的变化，以及在不久的未来我们可以怎样利用这个工具。 除了设计工具标配的图形编辑、响应式布局以及快速连线原型，最大的变化是 Framer X 引入了组件——可以使用 React （ Facebook 创建的一种用于组件式开发的代码框架）编写组件，并存入组件库用以复用。借助于代码“唯一数据源”的优点，构建一套完整而强大的设计系统变成了可能。 对这个新的设计工具有什么特性好奇可以前往 https://framer.com/x 查看，阅读下面的文章可以了解代码在设计流程中的演进。
- Framer 项目分享指南对于设计师来说，世界上最孤独的事就是自己的作品只能自己欣赏。 正因为此，今天我要给大家介绍几种方法来分享自己的 Framer 作品。比较常见的两种方法是这样的：如果你设计的是移动端 App ，可以安装 Framer Preview 在手机上预览；如果你设计的是桌面端原型，可以在浏览器上直接预览。
- Framer 学习资源汇总Framer 不是一款很大众的原型工具，因此网上可以找到的学习资源不多。今天我把自己接触到的资源进行汇总，希望能帮助你更好地学习 Framer。 需要说明的是，目前英文资料比中文资料更加丰富，所以英语不太好的设计师朋友们还是尽量逼迫自己啃一下英文，对自己以后的设计生涯帮助会很大（来自一个英语四级没过但毕业后狂补并至今受益的我的建议）。