Figma Design 中的框架
發(fā)布時(shí)間:2025-01-16 11:22 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: 快樂(lè)小女 閱讀: 64

Figma 中,您可以直接將圖層添加到畫(huà)布。如果您針對(duì)特定設(shè)備或屏幕尺寸進(jìn)行設(shè)計(jì),則可能需要為設(shè)計(jì)創(chuàng)建一個(gè)容器。這時(shí)框架就派上用場(chǎng)了。

  如果您以前使用過(guò)設(shè)計(jì)工具,那么您一定對(duì)畫(huà)板很熟悉。與畫(huà)板一樣,畫(huà)框允許您選擇畫(huà)布上的某個(gè)區(qū)域來(lái)創(chuàng)作設(shè)計(jì)。

  與傳統(tǒng)畫(huà)板不同的是,您還可以將框架嵌套在其他框架中。這樣可以創(chuàng)建更復(fù)雜的協(xié)同設(shè)計(jì)。

  框架還使您能夠訪問(wèn)額外的功能,例如布局網(wǎng)格,自動(dòng)布局,約束和原型設(shè)計(jì)。

  創(chuàng)建框架

  使用框架工具在畫(huà)布中創(chuàng)建框架。有幾種方法可以選擇框架工具:

  使用鍵盤(pán)快捷鍵F或A選擇工具欄中的框架工具。

  然后您可以在畫(huà)布中創(chuàng)建各種尺寸的框架:

  單擊畫(huà)布以創(chuàng)建尺寸為 100 x 100 的默認(rèn)框架單擊并拖動(dòng)畫(huà)布以創(chuàng)建具有自定義尺寸的框架使用右側(cè)邊欄的下拉菜單選擇框架預(yù)設(shè)。選擇流行設(shè)備和資產(chǎn)模板的預(yù)設(shè):電話藥片桌面推介會(huì)手表紙社交媒體Figma 社區(qū)檔案單擊箭頭展開(kāi)該部分并從列表中選擇一個(gè)預(yù)設(shè)。通過(guò)以下方式識(shí)別框架在圖層面板中。

  提示!您還可以在現(xiàn)有對(duì)象周圍創(chuàng)建框架,無(wú)論是單個(gè)圖層還是選定的圖層。使用框架選擇鍵盤(pán)快捷鍵:

  蘋(píng)果? Option? CommandG窗戶Ctrl++Alt?G提示:您可以交出框架進(jìn)行開(kāi)發(fā),而無(wú)需重新組織文件。為框架創(chuàng)建一個(gè)部分,或?qū)⒖蚣苻D(zhuǎn)換為部分。然后,將該部分標(biāo)記為Ready for dev

  框架屬性

  框架具有一些相關(guān)屬性?蚣苤С忠韵聦傩。

  圓角半徑:將框架的角弄圓,以創(chuàng)建更柔和的邊緣。剪輯內(nèi)容:隱藏框架內(nèi)超出框架邊界的任何對(duì)象。布局網(wǎng)格:創(chuàng)建指南來(lái)幫助您的設(shè)計(jì)形成視覺(jué)結(jié)構(gòu)。自動(dòng)布局:創(chuàng)建響應(yīng)其內(nèi)容的動(dòng)態(tài)框架填充:將實(shí)心填充、漸變、圖像(PNG、JPEG、GIF、TIFF 和 WEBP)應(yīng)用于框架。描邊:向框架添加描邊以創(chuàng)建邊框或輪廓效果:為框架添加陰影或模糊

  額外功能

  框架允許您訪問(wèn) Figma 中的額外功能。您需要使用框架來(lái)使用以下特性或功能:

  布局網(wǎng)格:將透明網(wǎng)格、列和/或行應(yīng)用于框架以提供視覺(jué)結(jié)構(gòu)約束:定義調(diào)整框架大小時(shí)子對(duì)象的響應(yīng)方式。對(duì)框架內(nèi)的對(duì)象應(yīng)用約束。自動(dòng)布局:向框架添加自動(dòng)布局,以創(chuàng)建響應(yīng)其內(nèi)容的動(dòng)態(tài)布局原型設(shè)計(jì):創(chuàng)建在畫(huà)布中的框架之間移動(dòng)的交互式原型框架是對(duì)象。這意味著它可以控制或影響您放置在其中的任何子對(duì)象。

  了解有關(guān) Figma 中父/子關(guān)系的更多信息 →

  調(diào)整框架的屬性

  以前,選擇框架時(shí)可以調(diào)整子對(duì)象的屬性,F(xiàn)在,您可以調(diào)整框架本身的屬性。

  使用鍵盤(pán)快捷鍵選擇一個(gè)子對(duì)象:或。EnterReturn按下Tab鍵來(lái)選擇下一個(gè)兄弟。按Shift+Tab選擇上一個(gè)同級(jí)。按Shift+Enter選擇父級(jí)如果您想調(diào)整框架及其子框架的填充和描邊屬性,您可以使用選擇顏色來(lái)查看或調(diào)整混合選擇中的顏色。

  將框架嵌套在其他框架中

  在 Figma 中,你可以在其他框架內(nèi)創(chuàng)建框架。我們將此過(guò)程稱為嵌套。這允許你將具有不同屬性的框架組合在一起以構(gòu)建復(fù)雜的界面。

  這將創(chuàng)建新的層次結(jié)構(gòu)或關(guān)系:

  頂級(jí)框架:任何直接位于畫(huà)布上的框架。如果某個(gè)框架是頂級(jí)框架,則不能將其嵌套在另一個(gè)框架、組或?qū)ο笾?/font>嵌套框架:任何放置在另一個(gè)框架內(nèi)的框架。您可以將框架放置在頂層框架內(nèi),也可以放置在其他嵌套框架內(nèi)。嵌套框架既是父框架又是子框架子項(xiàng):框架內(nèi)的任何對(duì)象了解更多關(guān)于父母、子女和兄弟姐妹關(guān)系

  頂層框架

  Figma在圖層面板中以粗體顯示頂層框架,并顯示畫(huà)布上任何頂層框架的名稱。

  嵌套框架

  嵌套框架是放置在另一個(gè)框架或?qū)ο髢?nèi)的框架。這使它們既是父框架又是子框架。您可以將框架放置在以下框架內(nèi):

  頂層框架其他嵌套框架團(tuán)體在下面的示例中,每個(gè)元素都在自己的框架中。頂部有一個(gè)狀態(tài)欄,底部有一個(gè)導(dǎo)航菜單。我們還有一張卡片,其中包含我們即將購(gòu)買的門(mén)票的詳細(xì)信息。

  使用我們的設(shè)備預(yù)設(shè)之一,我們可以為元素創(chuàng)建頂層框架。我們可以將元素添加到頂層框架,以在我們的移動(dòng)應(yīng)用中構(gòu)建單個(gè)屏幕。

  調(diào)整框架大小

  您可以像與畫(huà)布上的其他對(duì)象一樣與框架進(jìn)行交互,包括更改框架的大小或比例。有幾種方法可以更改框架的大小:

  拖動(dòng)框架

  拖動(dòng)以手動(dòng)調(diào)整框架大小。

  選擇畫(huà)布中的框架,或左側(cè)邊欄中的圖層面板。單擊其中一個(gè)角上的手柄并拖動(dòng)以調(diào)整大小;蛘撸瑔螕羝渲幸粋(gè)邊緣并拖動(dòng)。提示!要忽略對(duì)子對(duì)象的任何約束,請(qǐng)按住修飾鍵:

  蘋(píng)果:? Command視窗:Ctrl

  更改幀預(yù)設(shè)

  選擇另一個(gè)框架預(yù)設(shè)來(lái)更改框架的大小。

  選擇框架。在右側(cè)欄的屬性面板中,選擇框架字段。從列表中選擇一個(gè)預(yù)設(shè)。選擇流行設(shè)備和資產(chǎn)模板的預(yù)設(shè):電話藥片桌面推介會(huì)手表紙社交媒體Figma 社區(qū)檔案Figma 將更新您的框架的尺寸以匹配預(yù)設(shè)。注意:如果您對(duì)任何子對(duì)象應(yīng)用了約束,Figma 將調(diào)整它們的大小以匹配新的框架預(yù)設(shè)。否則,框架內(nèi)的對(duì)象將保持原始尺寸和位置。

  屬性面板

  使用右側(cè)邊欄更新框架的寬度高度。

  WH字段中輸入新數(shù)字,或?qū)⑹髽?biāo)懸停在圖標(biāo)上以清除字段。向左拖動(dòng)以減少,向右拖動(dòng)以增加。

  切換寬度和高度旁邊的鏈接按鈕限制調(diào)整大小為當(dāng)前比例。

  提示:您可以使用尺寸字段進(jìn)行計(jì)算。這允許您快速縮放或調(diào)整對(duì)象大小。

  %百分比,例如 50%+添加,例如 +100-減去,例如 -20*乘法,例如 *4/除法,例如 /8無(wú)法將寬度或高度乘以百分比,例如*50% 將得出原始值的 50 倍,而不是 50%。

  調(diào)整大小以適合

  您可以調(diào)整框架的大小,使其縮小或增大以適合其子對(duì)象。這將重新繪制框架,使其圍繞其中對(duì)象的最外層邊界。

  使用鍵盤(pán)快捷鍵:蘋(píng)果:? OptionShift? CommandR視窗:AltShiftControlR點(diǎn)擊在右側(cè)邊欄的布局部分

  取消框架的分組

  要取消組合框架,請(qǐng)選擇該框架并按:

  Mac:? CommandShiftG或? CommandDeleteWindows:ControlShiftG或ControlBackspace

文章評(píng)論
0 條評(píng)論 按熱度排序 按時(shí)間排序 /350
添加表情
遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī),
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。
V
特惠充值
聯(lián)系客服
APP下載
官方微信
返回頂部