Framer 测试版内置代码编辑器2019-4-4
最新
- React + Framer 夏令营您好，我是 Linton，我是一名热爱设计的 Developer，目前居住在加拿大。多年来我一直专注于为设计师定制进阶课程，至今已经帮助了世界各地的几千名设计师和前端工程师朋友提升编程技能，希望也能帮到您！ 上个月我组织了一场英文活动 React+Framer Summer Challenge。一共有500多名设计师和前端工程师参加，大家一起忙活了一个月，场面很热烈。**活动全免费，不需要Framer License，也不需要编程经验。**优秀作品将获得一年的Framer订阅优惠券（价值$144美刀） 有这么好的福利当然不能忘了国内的小伙伴们！我正在考虑再办一个中文版，时间大概是7月到8月，为期4周，每周两场一个半小时的直播公开课，然后大家一起做作业，最后提交最终课程项目，届时我会提供必要的帮助。每周大概需要10个小时。 感兴趣参加的小伙伴可以点击[此链接](https://wj.qq.com/s2/4055073/51b2)报名！ ================= **报名人数满200就开课！** =================
- DesignCode Framer Playground 教程DesignCode 出品的 Framer Playground 交互动效教程。内容包含布局、动画、手势交互、Lottie、API 等，教你做出一个完整的 App。目前该教程免费。 
- 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，这对于设计与开发之间的协作是很有帮助的。
教程更多
- DesignCode Framer Playground 教程DesignCode 出品的 Framer Playground 交互动效教程。内容包含布局、动画、手势交互、Lottie、API 等，教你做出一个完整的 App。目前该教程免费。 
- 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 在手机上预览；如果你设计的是桌面端原型，可以在浏览器上直接预览。
资源更多
- React + Framer 夏令营您好，我是 Linton，我是一名热爱设计的 Developer，目前居住在加拿大。多年来我一直专注于为设计师定制进阶课程，至今已经帮助了世界各地的几千名设计师和前端工程师朋友提升编程技能，希望也能帮到您！ 上个月我组织了一场英文活动 React+Framer Summer Challenge。一共有500多名设计师和前端工程师参加，大家一起忙活了一个月，场面很热烈。**活动全免费，不需要Framer License，也不需要编程经验。**优秀作品将获得一年的Framer订阅优惠券（价值$144美刀） 有这么好的福利当然不能忘了国内的小伙伴们！我正在考虑再办一个中文版，时间大概是7月到8月，为期4周，每周两场一个半小时的直播公开课，然后大家一起做作业，最后提交最终课程项目，届时我会提供必要的帮助。每周大概需要10个小时。 感兴趣参加的小伙伴可以点击[此链接](https://wj.qq.com/s2/4055073/51b2)报名！ ================= **报名人数满200就开课！** =================
- 最简单的一个示例代码组件这是官方一篇[教程博客](https://www.framer.com/blog/posts/creating-code-components/)的示例文件。这篇博客介绍了怎样使用代码来写一个代码组件，从基本的代码概念，到语法，由浅入深，很适合初次接触 React 代码组件的同学跟着学习。