Try   HackMD

Figma 線上標示文件操作

如何顯示標示內容

點選到右側的 </> 切換到檢視模式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

感覺 Size 好像缺了點

可能是右上角沒有顯示 100%

(如果筆電螢幕較小，切換成 100% 沒辦法看到全部，可以先點擊設計稿，然後兩指在觸控板上平移，如果是使用滑鼠的話需要按住空白健並搭配滑鼠左健來平移)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

依據不同螢幕大小設置適合的 Size

不同裝置裡各種縮放比例對應的 Size 會有所不同，可在右上角調整縮放比例的地方點擊"向下箭頭 icon 圖標"透過下拉選單將縮放比例調整為適合，調整完畢後就會將縮放比例調整為適合的 Size

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

抓元素跟元素之間的距離

卡斯伯老師有提到，點選元素後，按住 alt 再點其他的就可顯示

或是點選一個元素，再把滑鼠移動到想測距離的元素上

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

下載圖片

點擊想下載的圖片，在右側會出現資源的欄位，以及有下載的按鍵，點擊下載後會是 zip 檔，解壓縮後就有圖片的 png 檔了

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

下載整張設計稿

如果想下載整張設計稿圖片，後勤組 Jimmy 寫了份教學

觀看文字大小與行距

以設計稿的「個人資料」文字為例，點選「個人資料」，在右側選單中的樣式欄位就會有相關的文字樣式，滑鼠停留在小圖示上就會顯示他是文字間距、行間距或是段落間距

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

另外點擊一下內容欄位中的文字就可以複製整段文字了

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

行距補充

更：行距有時會和元素上標示的高度不一致，設定行高以右方標示為主，元素上的高度由 Adobe XD 產生，較不準確

以附圖為例，正確行高為 36px，非 28px

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

觀看動態 ( hover ) 效果

點選右邊欄位第一個可檢視動態效果

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Last changed by 
 
六角學院 - HexSchool
萬人學生好評推薦，由淺入深的實戰繁中程式設計教學，每週線上互動社群交流問答會！ 適合無經驗新手入門。帶您學會一技之長。線上帶你學會程式開發。
0
2967

Read more

第一週小組任務

使用 Discord、ZOOM、GoogleMeet 來討論，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論，解答此問題集

Jun 8, 2025
CLN Nina 老師的多益解題術

(提示：記得更改直播成今天日期、確認 tags 是否正確，沒問題後這一行可以刪除)

Jun 6, 2025
直播班，預習課程觀看順序

影音課程連結：https://courses.hexschool.com/courses/enrolled/2522456

Jun 6, 2025
2025 網頁切版直播班｜夏季班引導手冊

同學們好，感謝您註冊程式勇者村系統（以下簡稱 RPG），為了方便管理，我們於 2024 年全新改版升級系統，RPG 整合了 Teachable 第三方帳號登入了！接下來，請依照以下指示使用 Teachable 帳號登入 RPG。

Jun 4, 2025
Read more from 六角學院 - HexSchool
Published on HackMD