## Figma排版練習
#### 期許能與原本版本做出類似效果，但有困難
#### 困難點：動態效果做不出來
#### [Photoshop+html](https://demo.grnet.com.tw/lao-jing/homepage/index.html)
#### [Figma](https://reurl.cc/Xqkqra)

## Figma中文社區
#### [連結位置](https://www.figma.cool/#Figma%20%E6%8F%92%E4%BB%B6) 提供中文化與中文教學

#### [基礎介面](https://www.uisdc.com/figma-getting-started-manual)

## Figma效果

### A.輪播效果
#### 1.準備圖數張每張必須是放在各自的Frame裡面

#### 2.將各自放在Frame裡的物件再放到同一個Frame裡面

#### 3.調整畫框變成一個banner的大小,選取左邊Frame位置並按住Ctrl調整成需要的大小

#### 4.複製另外兩份

#### 5.移動位置-中間的才是要保留的
選取橫向三個按住shift拖曳置中間要保留的位置

#### 6.選取中間有Frame的區塊,按下右邊clik content裁切內容

#### 7.創建變體組件

#### 8.右邊切換原型,開始連結1-2 2-3 3-1

After Delay
800ms
smart animate
Ease Out
800ms
### 8.左邊切換Assets

### 9.拉進版型之內

[【Figma動態效果】自動輪播圖](https://www.bilibili.com/video/BV1tt4y1h76D/)

## parallax scroll 視差滾動

### 步驟1-複製畫布

### 步驟2-移動物件位置 像是逐格動畫方式
1.若跑出畫布之外必須放回原本組件之內


### 步驟3-動態效果設定
1.右邊上切換Ｐrototype模式 2.將兩個畫布連結 3.設定動態效果
After Delay
300ms
smart animate
Ease Out
800ms

### [完整教學影片](https://www.youtube.com/watch?v=dMdQOjAFRrI) 5.13效果呈現

### [試做連結位置](https://reurl.cc/RW1yNe)

## Figma 視差滾動效果

步驟紀錄
### 1.準備一張背景圖

### 2.plugins/搜尋/icons8 Background Remover/






1.5mb限制 2.效果不一定符合預期

### 2.Prototype

### 複製同一個畫框(需取消母子關係.會有連動效果)
### 第一個畫框連結第二個畫框
After Delay
800ms
smart animate
Ease Out
2500ms

#### [完整學影片](https://www.youtube.com/watch?v=9GjfUGvjDKc)
#### [犬哥網站教學](https://frankknow.com/figma-tutorial/)

#### [試做連結位置](https://reurl.cc/WRLRDO)