Utopia

今天，我们宣布的乌托邦的阿尔法版本，一个设计和编码环境的反应项目和组件，运行在浏览器。它结合了 VSCode 与设计和预览工具，以及完全双向同步：设计和代码实时更新。与任何设计工具不同，它使用反应代码作为真实源泉。

我们构建了乌托邦，将设计工具的速度与代码的力量相结合。我们想这样做，以便它与真正的代码，在真正的项目工作。近年来，在更好的协作模布、交接模布、代码导出、原型插件方面出现了爆炸式增长。但很多时候，它们也会增加复杂性，增加脆性，并引入更多的故障点。

乌托邦是不同的。最终，设计只和实际发货的一样好！因此，我们问自己一个问题：如果这是目标，为什么不从那里开始呢？结果是一种读取、运行、理解和操作生产级反应代码的产品。没有不遵循您的约定、无批量重写和无差异的"代码导出"。最重要的是，我们保证了它的安全：无论乌托邦（尚未）理解什么，它都会如现在这样离开。

我们希望乌托邦是令人难以置信的快速和容易拿起。部分原因在于让您感觉自然 - 带来行为、功能和键盘快捷方式，您已经拥有肌肉记忆。由于乌托邦是一个编辑器 - 不是图书馆， 不是一个框架 - 你可以使用 （和学习！如果您有一种首选的方式来造型组件、管理状态或在文件中拆分代码，则可以工作。

在其最简单的形式，你可以使用它作为一个在线编码游乐场的反应项目，并包括自定义资产，外部包和组件库通过节点。为了编辑代码，我们包括 VSCode，微软的开源代码编辑器 - 配有 ESLint、更漂亮、主题支持。有一个用于调试的控制台、用于与世界共享创建的外部预览和运行时间错误消息。还有一个画布，可以让你呈现一个或多个组件，并更新为您键入。

一旦你把画布切换到编辑模式，乌托邦的超级大国就真的脱颖而出了。画布上的每个元素和组件都变得可选、可配置和可编辑。我们在这里有雄心勃勃的目标，特别是希望创建一个熟悉、强大且适应编辑真实、生产级代码的独特挑战的工具。以下是此工作的一些方法：

跟我来，让你保持同步：Utopia 默认为"关注我"模式，其中单击设计中的元素会自动打开文件、滚动到正确的位置并将光标放置。这工作的另一种方式，以及周围！

组件是一流的概念。乌托邦是从头到脚构建的，可与可以通过道具配置的嵌套组件配合工作。例如，您可以在查看实例和编辑组件本身之间快速切换，无需上下文切换。

处理生成和有条件的内容：真正的 UIs 不仅仅是 "由数据驱动"， 而且经常从数据中生成。它们包含大量有条件呈现的内容。乌托邦相对轻松地处理生成和有条件的内容，并了解它们指的是什么"来源"。对于条件，您可以查看它们应用的位置，手动切换它们，并进行所需的更改。

具有真实CSS的布局：我们建立了乌托邦来处理真正的布局。这不仅包括布局系统（如 Flexbox / 自动布局），还包括内容驱动的大小，以及您在许多组件中找到的嵌套块级元素级联。

代码感知设计：通常，您的UI部分由变量和函数呼叫填充。这是从主题或有条件应用的文本颜色中挑选的传递式道具、颜色和背景。对于其中一些，我们已经内置了用于编辑它们的工具。对于他们，我们的编辑知道他们在那里，清楚地叫他们给你，甚至让你迅速覆盖他们。或直接跳转到代码。

设计与真正的css：基于 CSS 的布局与大多数设计工具中找到的全球布局系统中的绝对定位框相去甚远。元素根据内容大小本身，内容可能会溢出或被切断，布局系统（如 Flexbox 或网格）无处不在。虽然这些处理布局的方法更具可扩展性和适应性，但它们也提供了相当缓慢和不直观的设计体验。为了绕过这一点，我们构建了新的工具，以"抓住盒子，拖动它"的精神，但使它适合现实生活中的布局系统。我们增加了几十个小便利，使工作与多层次嵌套布局更直观。

乌托邦准备好了吗？乌托邦的编码游乐场方面工作得很好，我们一直在内部使用它原型和实验编辑器本身的一部分！设计工具还很早，但我们很想看看你能用它做什么。我们的雄心壮志是让React社区以最快的速度从创意到生产级代码，而我们今年剩余时间的路线图包括对设计和构建体验的大量改进。

为了实现这一雄心壮志，我们还有一件事要分享：乌托邦是一个开源的，麻省理工学院许可的软件项目托管在Github上。如果您有兴趣连接设计和代码，想要贡献和讨论从以产品为中心的选色器到视觉操纵数据流的想法，或对实时代码操作感到兴奋，我们很乐意听到您的意见（无论您是否编写代码！玩乌托邦，看看吉图布，并加入我们的不和谐。

🌴，
乌托邦团队