前端開發者的斜槓設計技能，打造動態icon，開發Loading Page

前言

前端開發者常會遇到需要網頁素材的情況，雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師，但在這個多工高效的時代不免也需要前端開發者來處理簡單的設計，提升設計審美或與設計師溝通的能力。

前端開發者素材需求

而前端開發者也被要求擁有設計師的審美，表達方式是透過程式碼來完成平面設計，將網頁的每個介面都視為平面設計，對介面的美感或是素材UI元件都會有所要求，開發人員理想上是與設計師合作或購買素材會是更加效率的，但事實上有許多素材跟規畫都是開發者有機會實現的，也可以在製作簡單設計素材的過程讓前端與設計師溝通更加順利，這是一定的加分技能。

因此本篇會與讀者分享從設計素材準備到React網頁前端的開發流程。

前端工程師斜槓設計師你可能需要:

• 對美有堅持
• 擁有一些設計思維和能力
• 能獨立掌握前端方面的知識

⊗ 一份健康檢查

設計環節

Figma 官網

首先先設計出一個自己需要的素材，並將整個素材群組成一個Componet，Figma提供常見的輸出檔案格設(SVG、JPG、PNG…)，程式碼轉換格式(CSS、React…)，及外掛工具(Widgets)。

Jitter video 官網

在Figma中使用插件找到Jitter來完成動畫，Jitter也是獨立的工具，只是Figma提供工具整合更方便的將素材匯入，這裡將剛剛的組件(Componets)匯入至Jitter 。

在Jitter就可以開始來製作動畫，Jitter需要用到一些動畫觀念，如:

1. 時間軸
2. XY軸的開始位置、結束位置
3. 過渡特效
4. 動畫速率貝茲曲線

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 /> : <></>}

</>);
}

載入等待畫面成果