💡 Figma.com 是什麼呢？
可參考 Jasmine Lin 所發表：Figma — 異軍突起的設計協作神器 一文
紀錄與 Fornt-end 工程師一同探索的過程：
問題是怎麼發生的，來回反思與檢驗，最後又是如何解決的呢？
狀況描述
在 Figma 上設計好美美的 Gradient Buttons（漸層按鈕），交付給前端工程師手中後，不久就從 Local 端上截圖回報問題，讓我們來比對看看：
是不是可以發現這兩者之間的不對勁，相較下明顯質地很平、不光滑晶透。
怎麼會沒對起來？！
到底是哪個環節出了問題呢？😵😱😱（崩潰
檢驗過程
這時候開始進入以下的邏輯流程，是借鏡「*科學方法」精神而來。
大膽假設，小心求證。
*註解：科學方法（Scientific Method）
觀察大自然並且對於自然現象提出有意義的問題，然後再想出假說來解釋自然現象，之後設計實驗來檢驗這些假說，核對從這些假說所給出的預言是否正確無誤。為了要防範在做實驗時發生錯誤或誤解，這些步驟必須具有可重複性。 -來自 Wiki[假定]
定義可能發生的原因：
(1) 漸層圖層過於雜亂，或是被蓋上奇怪的圖層導致無法輸出成 Code
(2) 手動拖拉而產生的小數點，有著不乾淨的數值（例如 56.0321）
(3) Buttons 的高 Hight 與設計稿差了 10px
[檢驗]
從假設中一個一個反覆檢查與實驗：
- 第 (1) 點：每一個 Button 的漸層圖層，像是 Normal Button 本來有用到 3 層，其中漸層透明高光的部分有做 2 層調整為 1 層。
都是按照介面上所提供的功能去做，也沒有到雜亂，而且工程師也刻了其他有 3 層同樣做法的漸層 Buttons，在前台瀏覽都很正常，明顯問題不是出在這。
- 第 (2) 點：在想會不會是手動拖拉的緣故，產生的百分比數值是小數點，而導致在瀏覽器上顯示有所誤差？
查到 Figma 討論區可能有關的文章，整串看下來都環繞在「漸層顏色的位置，處理上能不能更精確」的問題上。
也是在討論位置百分比數值是小數點這一點，似乎沒有人反應顯示上有太大問題，如果我想法沒有錯的話，都是希望數值能夠*漂亮一些。
*註解：簡單解釋何謂漂亮的數值？像是
52.9 調整到 53
52.88 調整到 53
53.45 調整到 53.5這之間差距肉眼判斷差異不大，才會去微調成漂亮的數值。（可以不限整數或採 8-Point Grid System，端看習慣，甚至討論決定怎麼樣。）
💡如何讓漸層位置的百分比數值，調整成漂亮的「數字」？
如果還是堅持要漂亮、完美的百分比位置數值的話，上段的文章有提供了目前 Figma 版本的雞肋方法，就是：
畫面放到最大，手動拖拉每一個你設置的漸層，一個一個對準到每一格 Pixel 的位置，最後切換到 Code 看一下數值是否是整數。
恩
很累…對吧？
**2019/11/21更新**據 2019/11/13 Luis Camino 在同串回覆：
「Figma 官方來信回應他，目前漸層數值手動輸入這一項功能，在不久的將來內是不會推出的。」
我難過QQ
- 第 (3) 點：目測發現 Button CSS height 有少，會不會因為這樣導致漸層數值沒有對到設計稿的位置？結果工程師立馬改了，但問題依舊嗚嗚。
檢驗後原因都不是這些！
確立問題點
[再次假定]
又假設了另一種可能
(4) 來自於 Figma 本身產品的 Bug
「自己手打 Code，比起藉由某項工具生成出來的，都還要來得乾淨。」
會冒出這樣的想法，是學生時期使用過 Dream Weaver 這款 Adobe 網頁設計軟體，當時這軟體所產出的 Code 非常之髒，生成的頁面很容易有各種光怪陸離的事發生，想必有使用過的朋友應該能理解。（好像暴露年齡了XD 沒到這麼老就是）
從這點的方向去追追追，製作按鈕的過程中從有使用到的每個功能、參數一個一個去檢查 ：
\發現系統產出的 CSS Code 有個數值不一樣！/
BINGO！
這兩種顯示方式，一比對之下讓我找到問題點在哪。
把 Radial Gradient 的 Code、Table 分開兩組，
並用粗體標示出來給大家仔細對照：
[Code]background: radial-gradient(100% 100% at 50% 14.58%, #FFF5CC 0%, rgba(255, 255, 255, 0) 100%), #F7A500;
奇怪？那個 Code 的 rgba(255, 255, 255, 0) 純白色怎麼會沒有 Position 數值？反而 Table 的是對的。
[Table]Fill: Radial Gradient
#FFF5CC @ 14.58%
rgba(255, 255, 255, 0) @ 61.04%
趕緊問了一下前端夥伴，回覆說是照 [Code] 貼上去的。
（畢竟 Panel 預設是 Code 最被先顯示出來，當下一定是優先看那部分）
確定是貼了 [Code] 的部分，果真也發現 [Code] 跟 [Table] 數值不一樣！
是少了純白色的 61.04% 位置，應該要修正成：
[Code]background: radial-gradient(100% 100% at 50% 14.58%, #FFF5CC 0%, rgba(255, 255, 255, 0) 61.04%), #F7A500;
🎊🕺 皆大歡喜 💃🎊
能幫助到前端工程師夥伴，實在太開心了～～～
當我在撰寫這邊文章時，又去檢查一下官方有沒有修正：
不但修正了 RGBA 位置的數值問題，也調整 radial-gradient 那串 Code：
[原本]background: radial-gradient(100% 100% at 50% 14.58%, #FFF5CC 0%, rgba(255, 255, 255, 0) 100%), #F7A500;
看來就這問題被官方好好修正好囉！大家可別太擔心 ✌️
[現在]background: radial-gradient(100% 100% at 50% 0%, #FFF5CC 14.58%, rgba(255, 255, 255, 0) 61.04%), #F7A500;
不過！！很難說
哪天 Figma 更新、改版，甚至有可能*程式重構了！
*註解：代碼重構（Code Refactoring）通常是指在不改變代碼的外部行為情況下而修改原始碼，有時非正式地稱為「清理乾淨」。
如果往後製作上也遇到跟我一樣的情況，
多留意是否也是生成的 Code 出的問題，
可以直接試著從 Panel 所生成的 Code 著手檢查看看吧！
自己活生生血淋淋的例子，分享給大家警惕外，希望可以縮短一些檢驗的時間，使工作不會被耽誤太久。
Murmru: 關於「重構」聽說是工程師人人聞之喪膽的關鍵字，可能說的有些誇張，但似乎真的是個麻煩事。我的想法 Figma 工程部門真要這麼做心臟一定很大顆，不然就是個個都很神ＸＤ後記
「或許有些人一定會碰到跟我一樣的問題。」
因而萌生出想要將經歷過的所見所聞，給它分享出去。
思考過程遠比答案來得重要，領會了過程的意義，才能夠得出正確的結果。
所以這篇著重在分享過程這件事上，從中實踐了反覆的思考、驗證，並且詳實把過程記錄起來，除了整理思緒，也便於審視哪些有需要改善的地方。
中間看了不少資料，很意外學會了新的技巧（文中的調整漸層位置的整數百分比），因此增加了學習廣度，也滿推薦大家可以考慮運用看看哦！
往後設計過程上有任何值得分享的經歷、知識，
會找個時間送給大家 :)
PS: 感謝文中前端工程師 Jared 夥伴，跟我一起煩惱、一起解決難題。
未來一起加油！
Hi 非常謝謝你看完我的文章：喜歡的話，
別忘了按下 👏👏👏 拍手鼓勵鼓勵。有了無形地鼓勵，
將會成為驅動下篇文章的精神糧食哦！- 很歡迎 Follow Yakko Wu 接收最新文章
- 或者是 Follow Yakko Twitter（不時有遊戲、設計、創作、開發心得的分享）歡迎追隨、一起交流互動 ：）若有疑問的地方，
非常歡迎文章底下留言或來信 imyakkowu@gmail.com 一起討論～謝謝
