【React】前端開發者的斜槓設計技能，打造動態icon，開發Loading page

前言

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

前端開發者素材需求

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

因此本篇會與讀者分享從設計素材準備到React網頁前端的開發，主要還是聚焦在React前端軟體開發流程上。

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

• 對美有堅持
• 擁有一些設計思維
• 可以更完整的掌握前端方面
• x 一份健康檢查

設計環節

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

</>);
}

載入等待畫面成果