D2Code

About this plugin

Features

• default Code Generation： Support react + tailwind, react native +tailwind。 react native +style。 conversion effect preview。
• component conversion Support：Mark the component to convert the corresponding custom component code。 create libs json info.
• code with image url：By configuring filekey and token, it can be displayed with pictures in the design diagram.
• easily custom DSL: such as flutter, vue, swift
• D2C2D：Precipitate the marked figma componentSet, and libs json, which can greatly improve development efficiency

• 默认代码模版：支持react + tailwind、react native +tailwind。react native +style。转换效果预览。
• 组件转换支持：通过标记组件，转换出对应的自定义组件代码。如何创建libs json info
• 生成代码image自带url:通过配置filekey和token，可以在生成代码中用真实图片url
• 非常容易的自定义代码转换模版：如 flutter、vue、swift、小程序等
• D2C2D：沉淀出标记好的figma componentSet，以及libs json，可以大大提高开发效率。

How to use

• d2code document
• Selecting a layer will automatically convert out the code
• mark the layer's name with "#CustomComponent" such as "#Button"
• Copy and paste or save code file to you demo or project
• After the test is perfect, package the custom component, write libs json, and let the designer precipitate componentset with mark

• d2code 文档说明地址
• 通过选择视图后将会自动转换出代码
• 使用 "#CustomComponent" 如 通过标记视图名称后可转换出代码
• 复制或者导出代码到 demo 或 工程中
• 测试完善后，打包自定义组件，编写libs json，让设计者沉淀出带标记的ComponentSet

Tips:

• Currently only autolayout is supported, non-autolayout will be supported in the future
• Try to keep the layer structure as simple as possible to avoid overlapping layers

• 目前只支持 autolayout， 不是autolayout 将来会做支持
• 设计师尽可能使用 层级简单的布局方式