前言
前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者來處理簡單的設計，提升設計審美或與設計師溝通的能力。
前端開發者素材需求
而前端開發者也被要求擁有設計師的審美，表達方式是透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，對介面的美感或是素材UI元件都會有所要求，開發人員理想上是與設計師合作或購買素材會是更加效率的，但事實上有許多素材跟規畫都是開發者有機會實現的，也可以在製作簡單設計素材的過程讓前端與設計師溝通更加順利，這是一定的加分技能。
因此本篇會與讀者分享從設計素材準備到React網頁前端的開發流程。
前端工程師斜槓設計師你可能需要:
- 對美有堅持
- 擁有一些設計思維和能力
- 能獨立掌握前端方面的知識
⊗ 一份健康檢查
設計環節
Figma 官網
首先先設計出一個自己需要的素材，並將整個素材群組成一個Componet，Figma提供常見的輸出檔案格設(SVG、JPG、PNG…)，程式碼轉換格式(CSS、React…)，及外掛工具(Widgets)。
Jitter video 官網
在Figma中使用插件找到Jitter來完成動畫，Jitter也是獨立的工具，只是Figma提供工具整合更方便的將素材匯入，這裡將剛剛的組件(Componets)匯入至Jitter 。
在Jitter就可以開始來製作動畫，Jitter需要用到一些動畫觀念，如:
- 時間軸
- XY軸的開始位置、結束位置
- 過渡特效
- 動畫速率貝茲曲線
Jitter提供很多好用的過渡特效，我自己在使用上覺得Jitter提供的功能非常容易上手，可以完成大部分的icon需求，至於更多細節或是酷炫的設計，還是交給專業的設計師吧!
最後在Jitter輸出做好的動畫，Jitter提供(GIF、MP4、WebM、MOV)格式，選擇自己熟悉處理的格式，這裡我選擇MOV格式來作處理，最後再用設計軟體來轉檔輸出一張GIF。
React 開發環節
這邊使用React框架來開發，首先需要一個React compenent，底下示範提供一個範本，由LoadingPage.tsx來執行載入的畫面，這裡也提供一個空白置中於最上層的css屬性給大家參考。
LoadingPage.tsx
<div className="loadingPage">
<img style={{ width: "250px"}} src="/yourpath.gif" alt="GIF Example"></img>
</div>
LoadingPage.css
.loadingPage {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
background-color: rgb(255, 255, 255);
z-index: 5000;
display: flex;
justify-content: center;
align-items: center;
}
透過控制useState來決定何時要開啟，一般配合await的等待過程來設置true & false。
home.tsx
function Home() {
const [isLoading, set_isLoading] = useState(true);
return (<>
{isLoading ? <LoadingPage /> : <></>}
</>);
}
載入等待畫面成果
