03. 設計、原型制作和檢查代碼(右側欄)

原文:Design, prototype, and inspect (right sidebar)

誰可以使用此功能


・任何團隊或計劃中的用戶・具有文件編輯權限(can edit)的用戶可以訪問所有屬性面板・對文件具有查看權限(View access)的用戶只能訪問代碼(Code)部分
當在編輯器(editor)中時,在畫布的每一側可以看到一個側邊欄。這些側邊欄與工具欄(Toolbar)一起構成了 Figma UI。
Figma UI 允許您訪問、創建和調整設計元素。
・左側邊欄可訪問文件中包含的圖層、資產和頁面。我們稱之為圖層面板。了解有關導航“圖層”(Layers panel)面板的更多信息。・右側邊欄的“設計”選項卡可讓您查看和調整任何對象的屬性。您還可以訪問文件的原型設置並在“檢查”面板(Inspect panel)中查看任何選定對象的代碼。
在本文中,我們將帶您瀏覽右側邊欄。面板頂部有三個選項卡。

設計(Design)


“設計”(Design)選項卡允許您查看、添加、刪除或更改設計中對象的屬性。
當在“設計”面板中沒有選擇任何內容時,將能夠查看文件本地的任何樣式。還可以更新畫布的背景顏色。

選擇圖層後,“設計”(Design)選項卡將包含許多不同的設置。所選擇的圖層類型將決定“設計”(Design)選項卡中可用的功能。
例如,選擇查看一個文本對象和調整文本格式。當選擇一個組件(component)時,可以在“實例”菜單(Instance menu)中查看、分離或交換實例(swap instances)。

當前處於可用狀態的任何屬性都將以黑色顯示。未應用於所選圖層的非可用屬性將顯示為灰色。
“設計”選項卡中提供以下屬性:

・對齊和分佈Alignment and Distribution
・框架尺寸和方向Frame Size and Orientation
・畫布上的位置(X 和 Y)🔗Position on the Canvas (X and Y) 🔗
・對象的尺寸(宽度和高度)🔗Dimensions of the Object (Width and Height) 🔗
・實例Instance
・自動佈局Constraints
・佈局網格Layout Grid
・圖層(混合模式)Layer (Blend Modes)
・文本Text
・填充Fill
・邊框Stroke
・效果Effects
・導出設置Export Settings

原型(Prototype)


“原型”(Prototype)選項卡可訪問所有原型制作功能。
可在設計的框架之間建立連接並模擬用戶交互的過程。
原型選項卡由五個部分組成:
1.選擇交互(Interaction)
允許您定義任何交互的觸發器(Trigger)、操作(Action)和目標(Destination)
2. 應用動畫(Animation)允許定義在幀之間移動用戶的過渡。還可以調整方向、緩動、持續時間和智能動畫
3. 自定義疊加(Overlay)允許創建工具提示(too-tips)、交互式菜單(interactive menus)、警報或確認(alerts or confirmations)
4. 定義溢出行為(Overflow Behavior)允許定義原型(prototype)如何響應滾動。可創建更高級的用戶交互,例如旋轉木馬(carousels)、畫廊(galleries)或交互式地圖(interactive maps)
5. 調整原型設置(Prototype Settings)允許您調整原型的設備、背景和原型放映展示的起點(從哪張開始原型展示)

Learn more about about prototyping in Figma →

檢查(Inspect)


右側欄中的第三個選項是“檢查”(Inspect)選項卡。可以了解設計元素所對應的代碼
可以選擇以下格式:
・CSS(網頁開發)・iOS (Swift)・安卓Android (XML)
還可以使用提供的圖標在代碼和列表視圖之間切換:

Learn more about using the Inspect panel →