Back to Plugins
Design To Code

Design To Code

convert the figma design draft into html and css code

csshtmljsxcode-generators

Plugin Preview

Design To Code preview

About this plugin

Introduction:Select the area in figma and convert the figma design draft into html and css codeExport:inline CSS styles and separately exported stylesjsx html and normal htmlThis project aims to explore the possibility of converting Figma design drafts into front-end code. Currently, the generation of flex layouts is still under exploration, and discussions and suggestions are welcome.A version that generates flex layouts to enhance maintainability is expected to be released in Version 2. Stay tuned.简介:在Figma中选择区域,点击按钮可将Figma设计稿转换为HTML和CSS代码导出内容:内联CSS和单独的css样式jsx html以及普通html代码本项目旨在探索figma设计稿转换前端代码的可能性,现在关于生成弹性布局的内容仍在探索中,欢迎讨论和建议。生成弹性布局,增强可维护性的版本,预计将在V2版本发布,敬请期待。by:高途-用户前端组

Plugin Details

Version19
CreatedDecember 25, 2023
Last UpdatedNovember 6, 2024
CategorySoftware development
Creatoryeyu
Stats374 installs, 31 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:./dist/index.html
  • main:./dist/code.js
  • Editor Types:
    figma
  • Allowed Domains:
    • https://i.gsxcdn.com
    • https://internal-api.gaotu.cn
    • https://p.gsxcdn.com