今天我们宣布乌托邦的Alpha版本，一个设计和编码环境，用于在浏览器中运行的React项目和组件。它将vscode与设计和预览工具组合，完整的双向同步：设计和代码彼此更新，实时更新。与那里的任何设计工具不同，它使用反应代码作为真理来源。
我们建立了乌托邦，以将设计工具的速度与代码的功率相结合。我们想要这样做，以便它与真正的代码一起使用，在实际项目中。近年来已经看到了更好的协作工具，切换工具，代码导出，原型插件的爆炸。但是，他们经常也增加复杂性，增加脆性，并引入更多的失败点。
乌托邦不同。最终，设计只有其实际发货的好！所以我们问自己这个问题：如果这是目标，为什么不开始那里？结果是一种读取，运行，理解和操纵生产级别反应代码的产品。没有“代码导出”，它不会遵循您的约定，没有批量重写，没有差异。最重要的是，我们让它安全：无论乌托邦都没有（又一）了解，它就会离开。
我们希望乌托邦快速且易于接送。其中一部分是让您感到自然的行为，功能和键盘快捷键，您已经拥有肌肉记忆。由于乌托邦是一个编辑 - 而不是图书馆，而不是框架 - 你可以使用（和学习！）vanilla javascript并反应。如果您有一个首选方式来打造组件，管理状态或在文件中拆分代码，它将工作。
在其最简单的表单中，您可以将其用作反应项目的在线编码游乐场，并通过节点包含自定义资产和外部包和组件库。要编辑代码，我们包含vscode，微软的开源代码编辑器 - 完成eslint，漂亮，主题支持。有一个控制台用于调试，将与世界共享创作的外部预览，以及运行时错误消息。并且有一个画布，可授予您渲染一个或多个组件，并且可以更新您的类型。
一旦将画布切换到编辑模式，乌托邦的超级大国真的会出现。 CANVAS上的每个元素和组件都是可选择的，可配置和可编辑的。我们在这里有雄心勃勃的目标，特别是想要创建一个熟悉，强大，也适应编辑真实生产级代码的独特挑战的工具。以下是此工作的一些方式：
关注我允许您保持同步：乌托邦默认为“关注ME”模式，在设计中单击一个元素自动打开文件，滚动到正确的位置，并放置光标。这也在其他方面的作品！
组件是头等概念。乌托邦由地下构建，以便使用可以通过道具配置的嵌套组件。例如，您可以在查看一个模拟组件本身的实例之间快速切换，而无需上下文切换。
使用生成和有条件的内容：真实的UI不仅仅是“由数据提供支持”，而且常常从它们中生成。它们包含很多有条件呈现的内容。乌托邦处理与相对缓解的生成和有条件的内容，并了解他们回顾的“来源”。有关条件，您可以看到所应用的位置，手动切换它们，并进行所需的更改。
具有真实CSS的布局：我们建造了乌托邦以处理真正的布局。这不仅包括像Flexbox / Autolayout这样的布局系统，还包括内容驱动的大小，以及您在许多组件中找到的嵌套块级元素的级联。
代码感知设计：通常，UI的部分由变量和函数调用填充。从主题摘挑选的样式道具，颜色和背景，或有条件地应用文本颜色。对于其中的一些，我们已经有了内置的工具来编辑它们。对于所有这些，我们的编辑理解他们在那里，清楚地称为你，甚至让你很快覆盖它们。或直接跳转到代码。
使用真实CSS设计：基于CSS的布局是在大多数设计工具中找到的全局布局系统中绝对位置的框。元素大小本身基于其内容，内容可能会溢出或被切断，而Flexbox或网格之类的布局系统无处不在。虽然这些处理布局的方式更具可扩展性和适应性，但它们也使得一种非常缓慢和不行性的设计体验。为了解决这个问题，我们建立了采用“刚刚抓住盒子并拖动它”的精神的新工具，但它适合现实生活布局系统。我们添加了几十条便利，使得使用多级嵌套布局更直观。
乌托邦准备好吗？乌托邦的编码游乐场面很好，我们已经在内部使用它来原型和实验与编辑本身的部分！设计工具仍然很早，但我们很乐意看到你能做什么。我们的野心是给予反应社区，从而获得生产级代码的最快方式，以及我们今年剩余时间的路线图包括对设计和建立体验的大量改进。
为了使这种野心成为现实，我们还有一件事要分享：乌托邦是在Github上托管的开源，麻省理工学院的软件项目。如果您有兴趣连接设计和代码，那么希望从以产品为中心的颜色选择器贡献和讨论任何关于视觉操纵数据流的想法，或者对实时代码操作兴奋，我们很乐意听到你（无论你是写代码吗！）。玩乌托邦，查看GitHub，加入我们的不和谐。