设计到代码是一个过程，产品团队（包括设计和开发）使用设计系统，其中包括用户界面 (UI) 组件、UI 模式和样式选项，这些选项由现实世界的组件表示和支持。对于团队来说，这意味着任何“设计”的东西都会变成“代码”。设计到代码和“代码生成器”之间的重要区别在于，设计到代码过程中的代码输出是干净、可用且可自定义的代码。这意味着即使是贵公司的顶级开发人员也会接受这种代码输出，并且与他们手写的代码一样好。

当设计和开发团队同步时，他们可以使用设计到编码解决方案来加速产品交付。使用 Indigo.Design 进行设计到编码的真正好处是节省大量时间 – 设计团队使用 Indigo.Design 设计系统在 Sketch 中创建的所有内容都与我们的 Ignite UI for Angular UI 相匹配。只需单击按钮，开发团队就可以从您的 UX 团队的任何设计中生成高质量的 HTML、CSS 和 Angular 代码。

设计到编码系统可帮助团队和组织通过一系列工具和实践简化应用创建，从而加速将设计转化为可用代码的过程。从历史上看，产品开发和设计团队会单独工作，设计与开发之间存在协作差距，这会减缓创新速度。借助设计到编码系统，团队可以实现无缝协作，消除设计交接，减少昂贵的迭代，并实现真正的用户体验设计开发协作。

可靠且可用的设计到代码系统的基础是确保 UX 设计师和开发人员拥有一个设计系统。有了统一的企业设计系统，加上基于真实组件库的可重复使用的 UI 工具包，在设计到代码系统中设计的任何内容都可以转化为可用的代码输出。

在当今竞争激烈的市场中，考虑缩短上市时间和节省成本的每一个潜在优势至关重要。从设计到编码的系统既可以节省成本，又可以节省时间。如果您的设计团队可以使用他们喜欢的设计工具（如 Sketch）遵循实践的迭代设计，那么 Indigo.Design 云数字产品设计平台可以大规模地进行标记、样式设计、进行用户测试和可用性研究（远程和无人监督），并从设计中获得像素完美的代码输出。有了这样的工具来支持您的团队，您就比竞争对手更具优势。

从历史上看，设计团队和开发团队之间的设计交接是软件开发大的隐性成本之一。研究表明，60% 的开发时间都花在用户界面上，但从批准的设计到正确、无错误的代码的工具却非常有限。使用 Indigo.Design 作为您的设计到代码解决方案，您可以消除任何以 UX 错误形式出现的减速或错误，从而增加成本（就时间和实际金钱而言）。

在迭代设计阶段修复任何 UX 错误需要花费 1 美元来修复/更改，而将同一个错误发布到市场中可能需要花费高达 100 美元来修复。这些只是示例 – 您可以在任何一个数字后添加 2 到 3 个零 – 以了解让低质量设计和 UX 错误流出的真实成本。

使用设计到编码系统可以消除这些代价高昂的错误，甚至更好的是，在设计到编码系统中从设计到开发的交接会生成像素完美的 HTML、CSS 和 TypeScript，您的开发团队可以使用它来构建其余的高质量应用程序，而不会出现任何 UI/UX 错误。

Indigo Design 是一个数字产品设计平台，可帮助团队加速从设计到代码的转化。Indigo.Design 有四个关键支柱：

1. Indigo.Design 是一个原型设计工具
2. Indigo.Design 是一个用户测试工具
3. Indigo.Design 是一款设计编码工具
4. Indigo.Design 是一个所见即所得的应用程序构建器

我们创建了 Indigo.Design，以帮助团队以前所未有的速度交付更高质量的软件。Indigo.Design 减少了从设计团队到开发团队的高成本和耗时的交接。将设计上传到 Indigo.Design 云后，团队可以迭代其原型、与利益相关者协作、获取标记和样式、执行无限制的远程用户测试研究，并从设计中生成像素完美的代码。

通过靛蓝设计，您可以使用应用程序的任何部分 – 四大支柱中的任何一个 – 因为功能设计为无缝地协同工作或彼此独立工作。

• 如果您是一个设计团队，并且想要使用原型设计和用户测试功能，那么您可以。
• 如果您是开发团队，并且想要从 Sketch 设计中获取像素完美的代码，您可以选择使用 Visual Studio Code 插件直接在您的 Angular 应用中获取 HTML、TypeScript 和 CSS。

Indigo Design 是一个完整的解决方案，它是一个数字产品设计平台，能够节省大量成本，加快产品上市时间，但重要的是，如果在软件开发过程中使用所有功能，则可以确保结果的确定性。

Indigo.Design 是一款基于 SaaS 的产品，始终保持新状态。当您登录https://cloud.indigo.design上的 Indigo.Design 云时，您始终在使用新版本的产品。使用 Indigo.Design，新版本包括 Ignite UI for Angular 工具集中新版本的Angular 组件以及 Indigo.Design 设计系统中新的 Sketch UI 套件。

Sketch UI 套件是一组库（如贴纸），其中包括 UI 组件、UI 模式甚至完整屏幕。Indigo.Design UI Kits for Sketch 采用“原子设计”方法，提供三个库。

样式库具有亚原子部分，例如颜色、阴影、字体样式和图标字形，它们定义了组件库中原子和分子的外观。
组件库是代表全功能组件的原子的集合，例如图表、网格等。
模式库是登录表单、用户配置文件和详细信息页面等高级组件的集合。
借助 Sketch UI 套件，设计团队可以为企业中的任何应用构建一致的品牌数字体验。借助 Indigo.Design，Sketch UI 套件与 Angular UI 组件相结合，实现了从设计到编码的系统，可以显著加快产品交付速度。

借助全球先进的数字产品设计平台 Indigo.Design，您可以上传具有无限屏幕和无限交互的完整草图原型，并将其转化为真实运行的 Angular 代码。

从 Sketch 到代码，您可以使用您喜欢的设计工具（如 Sketch）完成整个迭代设计过程，然后将该设计交给开发团队，开发团队可以根据您的 Sketch 设计生成代码。从 Sketch 到代码的好处是，您的开发团队可以完成使用工具完成的屏幕设计中的重复工作，从而节省大量时间和成本。使用 Indigo.Design 作为 Sketch 设计和 Visual Studio Code 之间的中介云平台，您可以获得额外的好处，例如进行额外的交互式原型设计，甚至可以在原型上创建用户测试和可用性研究，然后与无限数量的用户共享以获得即时反馈。

Indigo.Design 完全支持将 Sketch 文件转换为代码。这可以通过将您的 Sketch 原型上传或同步到 Indigo.Design 云来完成。将 Sketch 文件上传到 Indigo.Design 云后，您的开发团队可以使用 Visual Studio Code 代码插件，该插件允许他们选择单个组件、全屏或整个应用程序并生成真正的 HTML 代码、TypeScript 和 CSS。您只需 3 个简单的步骤即可从 Sketch 转换为代码。

使用 Sketch 进行编码可以节省大量时间和金钱。更好的是，您可以直接从 Sketch 设计中获取像素完美的应用屏幕，从而比竞争对手更快地将产品推向市场。

Indigo Design 是一款全面的用户测试工具。借助 Indigo Design，您可以将任何基于图像的原型或 Sketch 设计上传到 Indigo.Design 云，然后创建用户测试和可用性研究。借助 Indigo.Design，只需使用一个简单的点击工具即可完成用户测试，该工具会记录您的操作并将这些操作转化为用户测试，然后您可以将其与您的用户或您希望从其获得反馈的任何用户组共享。

使用 Indigo.Design 用户测试，您无需编写任何代码、任何脚本或具备任何高级知识即可执行用户测试。使用 Indigo.Design 进行用户测试就像创建 PowerPoint 幻灯片一样简单。如果您是产品经理或开发人员，并且只想对少量屏幕截图进行快速用户测试，您可以将屏幕截图上传到 Indigo.Design 云并使用热点原型设计工具创建原型，然后只需单击一下即可将其转换为用户测试。

我们的目标是让任何技能的人都可以轻松进行用户测试。您无需成为拥有高级学位的用户体验研究员，即可使用 Indigo.Design 创建复杂、详细的用户测试，然后实时分析您的用户测试结果报告。

Indigo.Design 是一个综合性的云平台，包括用户测试和任何类型的应用程序或设计的非主持远程用户测试。您可以上传完整的 Sketch 原型或图像（应用程序的屏幕截图），并使用 Indigo.Design 热点原型工具创建交互式原型，这将成为用户测试和可用性研究的基础。该用户测试可以包含您尝试获取 UX 反馈的任意数量的问题。创建用户测试后（您可以使用 Indigo.Design 中的点击记录器轻松完成），只需输入他们的电子邮件或通过电子邮件向他们发送超链接，即可与任意数量的测试人员共享该测试。

无主持的远程用户测试的好处（尤其是在 COVID-19 期间）在于您无需与用户面对面。您可以非常快速地获得结果，并在设计中进行非常快速的迭代更改，实时数据会返回到用户测试报告的分析中。您不受测试人员数量的限制，也不受每个原型的问题数量的限制。您可以将用户测试发送给无限数量的用户，他们可以选择回答无限数量的问题，以便在您开始编写代码之前获得改进原型所需的结果。