一個 rem 等於文件根元素計算後的字型大小，所以在根字型大小為 16 px 時，24 px 的數值會變成 1.5 rem，公式為 rem = 像素 ÷ 根元素像素。設計師從 Figma 檔案中讀取數值時，通常看到的長度都是以像素表示，因為 Figma 的畫框、元件與文字樣式，一律以原始 px 數值儲存尺寸，不論這些尺寸日後在網頁上會如何重新實作。把這些數字換算成 rem，能讓間距、字型大小與元件尺寸，跟著使用者偏好的文字大小一起縮放，這也是設計師一開始就會在 CSS 中選用 rem 的主要原因。這項換算在數學上很簡單，但答案取決於一個單一數值——根元素字型大小——而許多人即使它並非如此，也會默默假設它是 16 px。PX to REM Converter接受你輸入的像素值與實際的根元素大小，並回傳一個可以直接複製、貼進樣式表的 CSS 數值，這樣一來，問題就不再只是算術，而更多是要從你正在編寫程式碼所依據的文件中，讀出正確的根元素大小。
為什麼 Figma 的數值是以像素儲存，而不是 rem
Figma 是一款向量設計工具，每一個畫框、限制條件、auto-layout 間距，以及文字樣式，內部都是以與裝置無關的像素單位記錄，並直接對應到 CSS 的參考像素。一個 auto-layout 元件中 24 px 的間距、一個標籤上 16 px 的行高，以及一張卡片上 1.5 rem 的間距，在檢視器中都會顯示為同一種數字：純粹的像素值。設計檔案並不知道你打算在網頁上用 px、rem、em 還是 % 來呈現結果，所以它不會儲存這種意圖。單位的選擇存在於實作階段，而換算工作，也正好必須在那個階段完成。
因此，同一個 Figma 檔案可能會被不同團隊以不同的單位慣例來實作。一位開發者可能會為了像素級精確的畫面截圖，把間距重建為固定的 px；另一位可能會為了考量無障礙的縮放，把它重建為 rem；第三位則可能把部分數值換算成 % 以做出流動式版面。從 Figma 匯出的像素值，是這些不同實作之間唯一的共同基準，而後續的換算，也必須做到可重複且準確，這正是一個嚴謹的換算工具所要填補的落差。其他從 Figma 到 CSS 的轉換也遵循相同的模式：當版面使用漸層時，要對應原始角度與色標，也需要一套類似的檢視並轉換工作流程，詳見matching gradient angle and stops from Figma to CSS。
如何把 Figma 設計中的 px 換算成 rem
- 開啟 Figma 檔案，選取你需要轉換成 CSS 的元素、文字樣式，或 auto-layout 間距。依照檢視器中顯示的樣子讀取數值，如果設計使用了小數位的 px，也要包含像 12.5 這樣的小數。
- 開啟 PX to REM Converter，在輸入之前先確認方向設定為 PX to REM。
- 把來自 Figma 的像素值輸入到數值欄位中。這個欄位接受嚴格的十進位數字與科學記號寫法，例如 2e2 或 1e-3；十六進位語法、逗號、輸入內容中夾帶 CSS 單位後綴，以及混雜文字，都會被刻意拒絕，這樣計算就不會悄悄接受格式錯誤的資料。
- 使用瀏覽器開發者工具，檢視目標文件根元素——通常是 <html> 節點——實際計算出來的 font-size，並把這個 px 數值輸入到根元素字型大小欄位中。只有在你將要上線的那份文件，其根元素計算結果確實是 16 時，才保留這個預設值。
- 執行換算並讀取顯示出來的 CSS 數值，例如 1.5rem。如果換算工具顯示了一個近似值標記，代表這個商數的二進位浮點表示法，在 12 位有效數字的精確度下，與顯示出來的數字不同，所以這個數值在數學上非常接近、但並非完全等於你所看到的結果。
- 點選 copy，把顯示出來的數字與單位放進剪貼簿，再貼進你的樣式表。如果瀏覽器因為權限或安全情境的規則而封鎖剪貼簿存取，這個工具會顯示手動複製的提示，而不是直接清除結果。
找出目標文件中實際的根元素字型大小
依照W3C CSS Values and Units specification，CSS 的 rem 單位是相對於根元素的字型大小來定義的，而這也是換算工具在根元素欄位中唯一需要的數字。十六像素是瀏覽器長期以來的預設值，換算工具也把它預先填入以方便使用，但這個數值並沒有保證一定成立。瀏覽器縮放、最小字型大小偏好設定、使用者樣式表、無障礙設定、像 iframe 這樣的內嵌文件，以及宣告自己根元素大小的應用程式設計系統，都可能產生不同的計算結果。把 16 當成固定值，是最常見的原因，會讓 rem 數值在開發者自己的機器上看起來正確，卻在使用者的機器上悄悄偏離設計。想更全面了解 rem 與其他相對長度單位之間的比較，MDN's reference on root-relative lengths逐一說明了每一種選項及其適用範圍。
| 根元素字型大小的來源 | 如何確認 | 應該在換算工具中輸入什麼 |
|---|---|---|
| 未經修改的瀏覽器預設值 | 在 DevTools 中檢視 <html> 計算後的 font-size | DevTools 回報的 px 數值 |
| CSS 重置或設計系統的宣告 | 讀取設定 font-size 的 :root 或 html 規則 | 該規則在執行時解析出的 px 數值 |
| 內嵌 iframe 或 shadow root | 檢視該 iframe 文件或 shadow host 的根元素，而不是父層頁面 | 該範圍內計算出的根元素 px 數值 |
| 無障礙或使用者樣式覆寫 | 在套用使用者的瀏覽器設定之後再檢視；不要假設是預設值 | 使用者工作階段中實際套用的 px 數值 |
如果你正在從頭打造一份樣式表，並希望做到相對於根元素的縮放，就在 CSS 中明確設定根元素大小，讓換算工具有一個穩定的數字可用，也讓你的團隊有唯一的真相來源。如果文件已經由別人設定好樣式，那麼直接從 DevTools 複製計算後的 px 數值，會比從宣告中反推出來更準確。
讀懂結果上的近似值標記
JavaScript 的運算採用 IEEE 754 二進位浮點格式，這代表某些十進位商數無法以精確、有限的方式儲存。這個換算工具會把每個結果格式化到最多 12 位有效數字，去除多餘的尾隨零，在能更清楚表達數量級時保留科學記號寫法，並在顯示出來的文字與該數字的最簡十進位表示不同時，明確標示輸出為近似值。像 1.5rem 這樣精確的結果不會加上標記，因為 1.5 有乾淨的二進位表示法；而顯示數字經過四捨五入的數值，則會出現標記，讓你一眼就能分辨差異。
這個標記只是提供資訊，並不會阻擋任何動作。十二位有效數字已經遠遠超出任何 CSS 版面工作所需要的精確度，所以近似值標記只是提醒你去檢視這個數值，而不是代表結果有誤。如果你的設計系統要求特定的小數位數，這個標記能告訴你哪些輸出需要手動四捨五入，而不是信任瀏覽器層級的格式化。精確的負零會被正規化為一般的零，所以 rem 輸出結果為 0rem 時，永遠不會因為這個原因而帶有近似值標記。
一個實際範例：把 Figma 中的 24 px 換算成 rem
假設一個 Figma 的 auto-layout 元件，顯示兩張卡片之間有 24 px 的間距，而目標樣式表使用常見的 16 px 根元素大小。
- 公式：rem = 像素 ÷ 根元素像素
- 代入：rem = 24 ÷ 16
- 結果：1.5rem
反向換算同樣是機械式的：一位在根元素為 16 px 的既有樣式表中寫下 1.25rem 的設計師，等於在根元素預設縮放比例下，承諾了 1.25 × 16 = 20 px，你可以在換算工具中選擇 REM to PX、把根元素設為 16，並輸入 1.25 來確認這一點。如果同一個 Figma 檔案，是針對一份根元素已經改成 20 px 的樣式表來實作，同樣的 24 px 間距，換算出來的結果就會變成 1.2rem，而不是 1.5rem；從 Figma 匯出的 px 數值不會改變，但 rem 的表示方式會改變。這正是為什麼換算工具不會假設，一個在某個根元素大小下匯出的設計，換到另一個根元素大小時仍然能保留原本的像素結果，也正是為什麼 Figma 原始數字必須搭配真實的根元素大小，這項換算才能被信任。
換算工具接受的輸入與它所強制執行的限制
數值欄位使用嚴格的十進位語法。整數、小數、像 .5 這種省略開頭的小數、帶正負號的數值，以及像 2e2 或 1e-3 這樣的科學記號寫法，都能正確解析。十六進位語法、逗號、輸入內容中夾帶的 CSS 單位後綴、Infinity、NaN、不完整的指數，以及混雜文字，都會被拒絕，因此不小心貼上的 16px 不會被悄悄裁剪成 16。每個原始欄位也都受限於 100 個 UTF-16 編碼單位的預算，這項檢查會在裁剪之前進行；超出上限的輸入會明確失敗，而不是被截斷。開頭與結尾的空白會被容許，但數字內部的空白不會被悄悄移除。
數值範圍是明確規定的。主要數值接受的範圍是 ±1,000,000,000，根元素字型大小則接受 1 到 1,000 px 之間。這個工具能產生的最大反向結果是 1,000,000,000,000 px，而任何在解析後下溢為零的非零除法，都會被拒絕，而不是悄悄變成零。允許輸入負值，是因為有幾個 CSS 屬性與運算式接受帶正負號的長度，即使個別屬性，例如 margin-top 或 font-size，可能會在 CSS 層級自行施加非負限制。這個換算工具執行的是單位運算；它不會驗證某個輸出結果，對每一個 CSS 屬性而言是否合法，也不會對樣式表進行求值、解析層疊或繼承關係、檢視瀏覽器偏好設定，或預測 rem 在根元素上指向自身初始值的特殊宣告情境。
編輯數值、根元素大小、方向，或重新執行一次換算，都會立刻清除任何先前的複製狀態，這樣一來，過期的剪貼簿通知就不會在輸入值改變後覆寫目前的狀態。每一次複製嘗試都會取得一個世代權杖，這代表一旦新的操作已經開始，來自較舊剪貼簿請求的延遲成功或失敗回應都會被忽略。如果你要一次轉換好幾個 Figma 量測值，並且需要在 px 數值改變的同時保持根元素大小不變，那就在多次執行之間不要動根元素欄位，只更新數值欄位，然後執行 Convert 產生新的 CSS 數值；只要任何輸入值一改變，先前的複製徽章就會被清除。
如果你正在權衡選項，Get a Linear Gradient From Figma Into CSS對此有詳細說明。