PayPay
我主導 PayPay 錢包資金進出的設計,涵蓋儲值、ATM 與信用卡付款。
PayPay 的插畫庫有一長串規範:只能使用綁定 variables 的核可色、只能使用扁平形狀、不得有描邊或漸層、不得變形,logo 的使用也有嚴格限制。我設計並打造了一款 Figma 外掛,程式碼由 AI 撰寫,一鍵即可依照所有規範檢查插畫。
每一條規範單獨來看都不困難,但設計師必須在工作時記住整份清單,因此檢查標準會隨著當天的審查者與截止日的遠近而有所不同。

下半年的回顧顯示,這並非個別人員的問題。我對設計團隊進行了問卷調查:每位成員每季至少使用一次插畫,而 83% 的人曾因插畫庫中找不到合適的素材,最後只能另外委託製作。插畫是每個人工作的一部分,但是否符合規範,仍然只能仰賴記憶判斷。上半年的計畫已將這項工作列為可導入 AI 的領域,因此我直接將它實作出來,而不是讓它停留在簡報上的構想。
我分三個階段完成:先確定功能,再將規範轉換為程式邏輯,最後加入深色模式與日文介面,推出給團隊使用。
先確定功能,再設計視覺。 在設計任何介面之前,我先確定了全部六項檢查,讓設計得以保持穩定。
將規範轉換為數學。 規範只寫「保持比例」,並未說明如何偵測變形。我與 AI 逐一分析 frame,將這類規範轉換為幾何計算。
從五個方向收斂為一個。 AI 產生了五種介面方向。我以真實的檢查結果進行測試,再整合各方向的優點。

判斷哪些功能不該做。 需要外掛無法取得的脈絡才能判斷的檢查項目,我都予以刪除。六項可靠的檢查,勝過十項不準確的檢查。
選取一個 frame,點擊 Inspect,外掛便會檢查六個項目:顏色、描邊、漸層、變形、扁平形狀與 logo 使用。每個問題都會連結到對應的圖層,修正時只需點擊該圖層,不必再回頭查閱規範。
我並非受過正規訓練的工程師,程式碼由 AI 撰寫。產品層面的判斷則由我負責:什麼情況算是不合格、問題如何呈現在畫面上,以及何時規範本身有誤、需要調整。
建議最接近的顏色。 對於不在色票中的顏色,外掛會建議最接近的核可色。使用者也可以自行選擇其他顏色,或透過 Apply All 一次全部修正。
Logo 檢查。 PayPay 的 logo 有專屬的顏色與形狀規範,因此外掛也會檢查 logo。
符合團隊需求。 可一鍵切換日文與英文,或深色與淺色模式。
由於仍在初期階段,目前還沒有正式的指標。但現在整個設計團隊都在使用,而不只是我自己。原本各自手動、標準不一的檢查,已整合為一套共用的標準;設計師收到的回饋也能指出確切的圖層,而不是模糊的「不符合品牌」。
它也大幅減輕了插畫團隊的負擔。過去他們必須先完整檢查一遍規範,才能開始討論插畫是否傳達了正確的訊息。如今這部分大多已自動完成,他們可以將時間專注在插畫想表達的意圖上。

幾年前,我很難想像自己在不會寫程式的情況下,也能開發出一款 Figma 外掛。
開發這款工具,改變了我身為設計師對 AI 的看法。重點不在於讓 AI 產出視覺,而在於它賦予我足夠的開發能力,讓我能將心力集中在真正需要設計判斷的地方:什麼情況算是不合格、修正應該帶來什麼樣的感受,以及何時規範在紙上合理,實務上卻行不通。
與 AI 協作的幾個建議: