# SPX的設計稿介紹以及未來如何沿用

## 前言

有鑒於figma是款自由度極高的軟體，產生出多樣的使用方式。
因此，本團隊的設計師與工程師們也有慣用交接方法。
本文旨在**介紹SPX的figma設計稿以及未來如何沿用，不會教導figma操作。**

---
> [!Note]
> - 本文的目標對象：UX/UI設計師
> - figma版本與方案：125.0.7, Education plan
> ```
> * 參考此文章前建議對figma有基礎認識以及熟知設計語言。
> * 交接方法應考慮實際狀況進行調整，並非遵守舊法。
> * 因牽扯專案細部討論，部分截圖會模糊處理。
> ```
---
## a. 進入SPX設計稿
你可以在以下路徑找到figma連結：
[設計相關 位置總覽](/GEKL1TC2RLG1gm3lMXMlow) > UX/UI > ServicePlex 介面設計稿 > 位置

目前Owner改成Star，且anyone has link can edit。
這樣是為了讓設計師（您）進到連結後可嘗試更動設計。
確認可以編輯後，建議請Star將Owner改為設計師。
再將工程師皆改為View權限，避免設計稿被意外更改。

## b. Pages、Layers、Variables和Styles的使用情況
進入到SPX設計稿後，在左上角名稱可以確認是否進對Project。
接著，我將依照介面順序向你介紹本團隊在各項功能使用狀況。
分別是 <font color="#3C00FF">1. Pages</font>、<font color="#00B353">2. Layers</font>、<font color="#D900E9">3. Local variables</font> 和<font color="#EF8F00"> 4. Local styles</font> (如下圖)


---
<div style="background-color: #3C00FF; color: white; padding: 2px 12px; display: inline-block; border-radius: 4px;">
1. Pages
</div>

我們將全部的UI在Pages分成三種類別：**Final**、**設計中**、**討論區**。
您可以透過以下表格了解其中差異：
| layer區塊 | 圖片 | 說明 |
| -------- | -------- | -------- |
|**Final**||定稿or更版定稿 |
|**設計中**||設計師的草稿區（以平台架構分類）|
|**討論區**||設計師與工程師的討論區塊|

<div style="background-color: #4CAF50; color: white; padding: 2px 12px; display: inline-block; border-radius: 4px;">
2. Layers
</div>

基本上在 Layer的部分，除了元件有命名之外，其他都沒有機會整理。最主要也是因為此產品特性是基於其他產品之上，以及我們並無使用付費版進階功能。圖層命名僅對設計師有益，因此我無特別撥空去整理。

<div style="background-color: #E31C8A; color: white; padding: 2px 12px; display: inline-block; border-radius: 4px;">
3. Local variables
</div>

變數的部分，本產品也未使用到design token，也是基於與Layer一樣的原因。
不過在最一開始我是有擬定部分color跟number的token（如下圖）有興趣可以研究或是重新擬定。

<div style="background-color: #DF811D; color: white; padding: 2px 12px; display: inline-block; border-radius: 4px;">
4. Local styles
</div>

在Local style的部分，基本上可以對照著頁面Style guide設計指南中的命名了解。