石家莊官網(wǎng)開發(fā)公司哪家好？將您的靜態(tài)設(shè)計轉(zhuǎn)變?yōu)榻换ナ骄W(wǎng)站
當(dāng)您準(zhǔn)備好超越Figma中的原型制作時，Webflow可以幫助您將設(shè)計變?yōu)楝F(xiàn)實(shí)-無需編寫代碼。
Figma很快就從新玩家發(fā)展到設(shè)計行業(yè)。但是，像大多數(shù)設(shè)計工具一樣，它在原型設(shè)計階段會停頓下來。在這篇文章中，我們將向您展示如何通過Webflow將您的設(shè)計轉(zhuǎn)變?yōu)楣δ荦R全的網(wǎng)站來保持魔力。
入門
因此，您已經(jīng)在Figma中創(chuàng)建了一個很棒的設(shè)計，或者從設(shè)計師那里得到了一個不錯的設(shè)計，現(xiàn)在，在Webflow中構(gòu)建它是您的工作。如果您對這種轉(zhuǎn)換是陌生的，請不要擔(dān)心：Figma與Sketch等設(shè)計工具非常相似，但是有一些功能可以幫助您快速入門和運(yùn)行。
出于演示的目的，我使用了Narative Co開源的出色Hopper.com設(shè)計。該網(wǎng)站充滿活力，趣味盎然，并具有良好的互動性。
石家莊官網(wǎng)開發(fā)公司哪家好？我將此演示站點(diǎn)基于派生的Figma文件和我創(chuàng)建的簡化版本。
現(xiàn)在。讓我們開始吧。
步驟1：創(chuàng)建您的Webflow項(xiàng)目
在Webflow中創(chuàng)建網(wǎng)站的第一步是創(chuàng)建一個新項(xiàng)目。就像創(chuàng)建一個Figma文件一樣，這里沒有什么太復(fù)雜的。只需單擊右上角的藍(lán)色按鈕，然后從頭開始。
如果您打算將來在Webflow中創(chuàng)建其他站點(diǎn)，我發(fā)現(xiàn)最好為我處理的每個項(xiàng)目都新建一個文件夾，以保持工作整潔。這種分類遵循Figma項(xiàng)目的結(jié)構(gòu)，因此，如果您對此很熟悉，這將是一件輕而易舉的事情。
第2步：創(chuàng)建全局樣式/樣式指南
我在新站點(diǎn)中要做的第一件事是定義我的全局樣式。全局樣式是每個網(wǎng)站都需要的所有默認(rèn)內(nèi)容，例如段落樣式，標(biāo)題和鏈接外觀。Hopper Figma文檔提供了完整的樣式指南，但是，如果您的項(xiàng)目沒有，您可能想要制作一個，以便所有基本樣式都可以使用。
克隆此HTML標(biāo)簽?zāi)０寮纯蓡訕邮街改稀?/div>
在Webflow方面，我?guī)缀蹩偸菍TML標(biāo)記模板復(fù)制并粘貼到我的網(wǎng)站中，以用作樣式指南的基礎(chǔ)。為此，請克隆上面的站點(diǎn)。您將直接進(jìn)入該項(xiàng)目的畫布，然后從那里可以將元素復(fù)制到剛創(chuàng)建的新站點(diǎn)。您也可以只在模板之上構(gòu)建，但是我總是喜歡重新開始。
專家提示：為使從HTML標(biāo)記模板復(fù)制和粘貼到新項(xiàng)目中更加容易，請在單獨(dú)的選項(xiàng)卡中打開每個項(xiàng)目-是的，您可以同時運(yùn)行兩個Webflow會話。
要定義全局樣式，請在畫布上選擇元素，然后單擊屏幕右上角的類選擇器字段。如果可以全局定義所選元素，則標(biāo)簽名稱中將顯示一個帶有“全部”的淡紫色選項(xiàng)。（例如：正文（所有頁面），所有H3標(biāo)題。）它看起來像這樣：
在選擇器中選擇“正文（所有頁面）”選項(xiàng)時，該選項(xiàng)變?yōu)樽仙?/div>
石家莊官網(wǎng)開發(fā)公司哪家好？設(shè)置基類的樣式既可以節(jié)省您的工作，又可以使網(wǎng)站的樣式表輕巧且易于管理。您可以根據(jù)需要跳過任何這些元素，但是我強(qiáng)烈建議您至少在“正文（所有頁面）”上定義基本字體樣式。這將為您節(jié)省大量時間，因?yàn)槟恍枰x一次字體，并且如果您或客戶改變主意，以后進(jìn)行更改非常容易。
如果定義了基本段落，則可以很容易地更改字體：
用戶選擇主體標(biāo)簽，然后先更改字體，然后更改字體顏色，然后自動更新所有印刷樣式。
說到自定義字體，如果您使用的字體不在默認(rèn)列表中，那么現(xiàn)在是進(jìn)入項(xiàng)目設(shè)置的好時機(jī)，如果是Google字體，請從列表中選擇它。
如果不是Google字體，請上傳TTF或OTF文件，然后選擇所需的粗細(xì)。
專家提示：字體很大，因此，如果您要優(yōu)化網(wǎng)站的性能，請根據(jù)需要選擇盡可能少的粗細(xì)。幾百千字節(jié)看起來似乎很重要，但最好是盡可能減輕重量，以減少加載時間。
現(xiàn)在，回到樣式指南。如果您使用的是我推薦的模板，那么這應(yīng)該很容易。只需定義頁面上的所有內(nèi)容以匹配您的Figma文件即可。如果您使用的是Figma團(tuán)隊風(fēng)格，則以類似的方式組織事物會很有幫助。
定義基本樣式后，現(xiàn)在是添加所有自定義顏色的好時機(jī)。如果您有一個或兩個，這是一個快速的過程，但是如果您有很多，這可能是乏味的。我通常通過添加一個色塊div來執(zhí)行此操作，然后一遍又一遍地更改其顏色，直到所有色板都位于Webflow中為止。
在執(zhí)行此操作時，請確保通過單擊“全局”復(fù)選框?qū)㈩伾只?。如果您在色板的右下角看到一個小三角形并提示其命名，就會知道它們是全局的。
