編輯評分: 用戶評分:[總計:0 平均:0] @media(min-width: 500px) { } @media(min-width: 800px) { }
您是否曾經覺得需要將任何網站轉換為 Figma 設計以重新設計您的網頁或添加註釋。好吧,這是一個很好的方法,使用一個名為 html.to.design 的免費 Figma 插件來實現這一點。
html.to.design 使您能夠轉換任何網站完全可編輯的 Figma 設計。然後,您可以重新設計您的網站,而無需從頭開始構建每個元素。無論您是在重新設計舊網站,還是在 Figma 中創建基準,或者從網絡上抓取設計資源,這個插件都可以輕鬆快速地為您完成工作。
當您想要捕獲情緒板的網站而不進行任何屏幕截圖。此外,團隊成員還可以加載可編輯的網頁以相互協作並提供評論和反饋。用戶體驗編寫者可以使用它生成不同的副本,並準確了解其外觀的快照。 html.to.design 插件有很多這樣的用例。
讓我們快速瀏覽一下它的功能:
批量導入:您可以在幾秒鐘內輕鬆地一次導入多個頁面。成功導入後,即可對頁面進行註釋或重新設計。
多視口:您可以在一個視口中導入台式機、移動設備、平板電腦或筆記本電腦視口無需多次運行插件即可拍攝。
多主題:您可以輕鬆地並排導入淺色和深色主題。
文本和顏色樣式生成:此 Beta 功能為顏色和文本開發本地 Figma 樣式。
工作:
1. 單擊此處導航至 Figma 社區插件頁面,然後單擊在“嘗試一下”上安裝 html.to.design 插件。您必須登錄 Figma 帳戶才能執行此步驟。
2.您現在將導航到 Figma 並創建一個空白設計。接下來,單擊 Figma 工具欄中的“資源”按鈕,選擇“插件”選項卡,然後單擊 html.to.design 插件旁邊的“運行”。
3.粘貼您想要轉換為 Figma 設計的網站的 URL。單擊下拉菜單選擇視口,例如台式機、筆記本電腦、手機等。
4.接下來,單擊相應的按鈕選擇所需的主題(淺色/深色),然後單擊“導入”
5。等待一段時間,插件會分析您的輸入並將網站轉換為 Figma 設計。
6.現在,您可以根據您的要求在 Figma 中添加註釋、評論或重新設計整個網站。
如果您要轉換的網頁需要登錄或 VPN,則必須安裝 html。除了 Figma 插件之外,還有 to.design Chrome 擴展。 點擊此處安裝該擴展程序。要了解更多信息,點擊此處。
關閉評論:
html.to.design 是一個很棒的插件,可以幫助您將整個網頁轉換為完全可編輯的 Figma 設計,您可以完全重新設計或用於評論和註釋。它還可以方便快捷地從網絡上廢棄設計資源。