現(xiàn)在，您已經(jīng)定義了全局樣式，是時候從Figma文件中導(dǎo)出所有資產(chǎn)了。
如果您在工作時一直在努力標(biāo)記圖像，圖標(biāo)和其他要導(dǎo)出的資產(chǎn)，只需按Command / Control + Shift + E，不選擇任何內(nèi)容即可彈出導(dǎo)出對話框。點擊導(dǎo)出按鈕，完成后，F(xiàn)igma會詢問所有這些超棒資產(chǎn)的保存位置。如果要限制導(dǎo)出的內(nèi)容（例如僅特定父框架上的資產(chǎn)），請選擇該框架并使用相同的快捷方式。
石家莊網(wǎng)站定制開發(fā)將這些文件全部導(dǎo)出后，您可以找到正確的文件夾并將其拖到Webflow中，或打開資產(chǎn)面板，單擊“上傳”按鈕，然后以這種方式選擇它們。
專業(yè)提示1：繼續(xù)建設(shè)性能網(wǎng)站，我建議您將所有PNG和JPG拖放到tinypng.com或其他壓縮網(wǎng)站中。是的，它增加了一些步驟，但是您可以節(jié)省大量的網(wǎng)站加載時間。一個很小的網(wǎng)站就是一個快樂的網(wǎng)站。
專業(yè)提示2：如果在Figma圖層名稱中使用正斜杠，則在導(dǎo)出時，F(xiàn)igma將自動為您創(chuàng)建子文件夾。因此，請嘗試將圖層命名為“ icon / back”，而不是“ icon-back”?？梢怨?jié)省大量時間。
在網(wǎng)頁寄存服務(wù)中尋找什么
那里有大量的網(wǎng)絡(luò)托管選項-但是您如何知道要尋找的功能？了解如何實現(xiàn)Webflow托管。
了解有關(guān)托管的更多信息
第4步：對您的網(wǎng)站進行分幀
接下來，我想做一些我稱為div-frameing的事情。為此，我查看了Figma文件中所有較大的組/框架，并嘗試在Webflow中使用div復(fù)制它們。如果沒有幫助，可以跳過此步驟，但從長遠來看，它可以使我井井有條。
對于Hopper站點，我還向每個div部分添加了不全角的容器，因為這是大多數(shù)原始文件的定義方式。
將這些div放在畫布上后，為每個div指定一個唯一的類名稱。不需要定義這些類，但是您將要轉(zhuǎn)到“設(shè)置”選項卡并給每個ID分配一個ID。如果您要向站點添加錨鏈接，則此功能將在以后派上用場。
如果需要石家莊網(wǎng)站定制開發(fā)，您還可以在網(wǎng)站上使用grid元素（或?qū)iv的display屬性設(shè)置為grid）。我不會在這里介紹網(wǎng)格的最佳實踐，但是如果您想探索網(wǎng)格，Webflow的使用網(wǎng)格的登錄頁面教程將使您快速入門。
步驟5：設(shè)定內(nèi)容風(fēng)格
樣式化類是Webflow最簡單也是最困難的部分。它非常容易上手，但是在大型站點中保持整潔可能是一個挑戰(zhàn)。
在我的系列文章中，我寫了很多有關(guān)如何建立代理網(wǎng)站的文章，這可能會有所幫助。確保使您的類具有通用名稱，干凈且盡可能少。
例如，不要命名為“ Black Hero Text”，而應(yīng)嘗試創(chuàng)建“ All H1 Headings” +“ Black Text”的組合類。這將使您的1類標(biāo)題能夠處理大小，重量和位置，而無論顏色如何。然后，您可以添加輔助類來更改特定用例的顏色（或其他屬性）。
石家莊網(wǎng)站定制開發(fā)當(dāng)我從Figma轉(zhuǎn)到Webflow時，我發(fā)現(xiàn)自己要做的另一件事是更改布局以使事情更容易實現(xiàn)。我?guī)缀蹩偸窃O(shè)計師和開發(fā)人員，因此我可以做出這些決定，但對您而言可能并非如此。
無論哪種方式，這都是一個建議：不要嘗試將您的Figma文件的像素與像素匹配。我知道，我知道-每個人都與像素完美有關(guān)。但是，如果您是設(shè)計師，那么您就有機會查看自己認為簡單的布局實際上帶來的麻煩，而不是值得的。
無論您對建立網(wǎng)站的熟悉程度如何，代碼在行為上都與設(shè)計工具不同。在Figma中，移動?xùn)|西就像拖放一樣簡單，每個元素都可以生活在自己的小世界中，而不會影響其他世界。但這不是網(wǎng)絡(luò)工作的方式。
如果您不是設(shè)計師，這將不那么容易。從個人經(jīng)驗中我知道，我們的設(shè)計師總是希望設(shè)計中的準確度達到102％，但有時必須有所取舍。Webflow可能為您提供更好的方法來闡明某些事情的實現(xiàn)復(fù)雜性。
