Web to Figma Pro

About this plugin

html界面转figma，后续不一定更新

目前只能实现简单的还原（线框描边、自动布局、SVG图标）

！不支持图片、渐变色、投影！

！不支持图片、渐变色、投影！

Json获取方法

1. 复制这些代码：javascript:(function(){const parseColor=(s)=>{if(!s||s==='transparent'||s.startsWith('rgba(0,0,0,0'))return null;const m=s.match(/[\d.]+/g);return m?{r:parseFloat(m[0]),g:parseFloat(m[1]),b:parseFloat(m[2]),a:m[3]?parseFloat(m[3]):1}:null};const scan=(el)=>{const style=window.getComputedStyle(el);const rect=el.getBoundingClientRect();if(style.display===%27none%27||parseFloat(style.opacity)<0.01)return null;const data={tag:el.tagName.toLowerCase(),x:window.scrollX+rect.left,y:window.scrollY+rect.top,w:rect.width,h:rect.height,zIndex:style.zIndex===%27auto%27?0:parseInt(style.zIndex),bg:parseColor(style.backgroundColor),radius:[parseFloat(style.borderTopLeftRadius),parseFloat(style.borderTopRightRadius),parseFloat(style.borderBottomRightRadius),parseFloat(style.borderBottomLeftRadius)],border:(parseFloat(style.borderWidth)>0&&style.borderStyle!==%27none%27)?{w:parseFloat(style.borderWidth),c:parseColor(style.borderColor),s:style.borderStyle}:null,children:[]};if(el.tagName===%27svg%27){data.type=%27SVG%27;data.svg=new XMLSerializer().serializeToString(el).replace(/currentColor/g,style.color);data.viewW=el.viewBox.baseVal.width||rect.width;data.viewH=el.viewBox.baseVal.height||rect.height;return data}Array.from(el.childNodes).forEach(child=>{if(child.nodeType===3&&child.nodeValue.trim()){const range=document.createRange();range.selectNodeContents(child);const r=range.getBoundingClientRect();data.children.push({type:%27TEXT%27,text:child.nodeValue.trim(),x:window.scrollX+r.left,y:window.scrollY+r.top,w:r.width,h:r.height,size:parseFloat(style.fontSize),weight:style.fontWeight,color:parseColor(style.color)})}else if(child.nodeType===1){const sub=scan(child);if(sub)data.children.push(sub)}});return data};const result=scan(document.body);const blob=new Blob([JSON.stringify(result)],{type:%27application/json%27});const url=URL.createObjectURL(blob);const btn=document.createElement(%27a%27);btn.href=url;btn.download=`Figma_Data_${Date.now()}.json`;btn.innerHTML=%27📥 下载 V92.0 采集数据%27;btn.style.cssText=%27position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999999;padding:20px 40px;background:#ff5722;color:#fff;border-radius:12px;font-family:sans-serif;font-weight:bold;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,0.5);cursor:pointer;';document.body.appendChild(btn);btn.onclick=()=>{setTimeout(()=>btn.remove(),1000)};})();
2. 浏览器添加书签：名称随便起，url地址粘贴第一条内容。
3. 打开AI生成的HTML文件，点击创建好的书签>点击下载
4. 把下载好的json文件导入插件即可完成

本人VX：sdnycl0218

欢迎交流！