原視頻鏈接: B站視頻

零基礎(chǔ)學(xué)Figma學(xué)習(xí)筆記

• 心得體會(huì)
• 第1課 - 蘋果商店頁(yè)設(shè)計(jì)
• 第2課 - 線性圖標(biāo)設(shè)計(jì)
• 第3課 - 面性圖標(biāo)設(shè)計(jì)
• 第4課 玻璃擬態(tài)頁(yè)設(shè)計(jì)
• 第5課 樣式組件功能入門
• 第6課 - 連線動(dòng)畫效果說(shuō)明
• 第7課 - 參考線和柵格應(yīng)用
• 第8課 - 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)
• 第9課 - B端表格頁(yè)設(shè)計(jì)
• 第10課 - B端規(guī)范搭建

心得體會(huì)

沒(méi)有學(xué)習(xí)之前，七拼八湊自己也上手做了一些。學(xué)了之后，發(fā)現(xiàn)走了很多彎路。非常實(shí)用的一門課程，可以直接被應(yīng)用到工作中去，中間介紹的很多概念思路和快捷操作常看常新。

第1課 - 蘋果商店頁(yè)設(shè)計(jì)

• 可以直接拖拽.fig文件進(jìn)drafts 導(dǎo)入figma文件
• 圖層：包括畫布上所有的元素
• Shift+R 顯示標(biāo)尺 可以從屏幕左邊拖拽出紅色的參考線
• windows安裝本地字體：安裝后運(yùn)行C:\Users\admin\AppData\Local\FigmaAgent\figma_agent.exe
• 蒙版：不會(huì)出方框
• 選中元素
  • 按住Alt后松開 可以查看元素之間的間距
  • 一直按住Alt 復(fù)制并拖動(dòng)元素

第2課 - 線性圖標(biāo)設(shè)計(jì)

• 圖標(biāo)呈現(xiàn)是一個(gè)小方塊 一定會(huì)有固定區(qū)域 邊緣留白 這樣方便進(jìn)行對(duì)齊的操作
• 畫愛(ài)心的步驟
  • 畫兩個(gè)矩形，呈90度
  • 分別選中矩形的兩個(gè)頂點(diǎn)，拉大圓弧
  • 按住shift旋轉(zhuǎn)愛(ài)心角度
• 每次新建圖標(biāo) 先新建一個(gè)Frame 需要多大的圖標(biāo)就新建多大的Frame

第3課 - 面性圖標(biāo)設(shè)計(jì)

• 彩色面性圖標(biāo)中間的圖案 和線性圖標(biāo)一樣 先單獨(dú)用frame畫好
• 中間需要留空的部分用substraction減掉
  • 不要試圖用背景色在圖標(biāo)上面畫，顏色調(diào)整起來(lái)會(huì)很麻煩
• Linear做漸變最好左右采用同色系 過(guò)渡會(huì)比較自然

第4課 玻璃擬態(tài)頁(yè)設(shè)計(jì)

• https://baijiahao.baidu.com/s?id=1685482409595179684&wfr=spider&for=pc
  • 玻璃擬態(tài)
    • 透明度（使用背景模糊的磨砂玻璃效果）；
    • 物體漂浮在空間中，通過(guò)前后關(guān)系表現(xiàn)層次感；
    • 鮮艷的色彩突出了模糊的透明度；
    • 半透明物體邊緣的微妙處理，采用細(xì)膩的邊框表現(xiàn)玻璃質(zhì)感。
• 背景圖片玻璃擬態(tài)
  • 新建白色圖層 effects設(shè)為background blur 參數(shù)調(diào)大到100 fills透明度設(shè)為80%
  • 黑色圖層可以得到不同的效果
• 白色元素玻璃擬態(tài)
  • 填充顏色調(diào)低透明度
  • 添加白色邊框，效果設(shè)成linear漸變，左邊顏色80%透明度，右邊顏色20%透明度，形成切割感邊框
  • 添加background blur effects
  • 添加drop shadow, blur調(diào)大設(shè)成20，顏色變淺，透明度10%
• Auto Layout
  • 以底部圖層為主要的排版依據(jù)
  • 例如：圖標(biāo)寬度隨里面字?jǐn)?shù)變化 保持字體和邊框的邊距不變

第5課 樣式組件功能入門

• Style
  • Color Styles - 相當(dāng)于顏色的自設(shè)規(guī)范
    • 之后更改這個(gè)color style的時(shí)候，所欲運(yùn)用了這個(gè)color style的元素的顏色都會(huì)跟著改變
    • 如果不想運(yùn)用這個(gè)color style，選擇detach style，即旁邊那個(gè)解開連接的小icon
  • 類似的，effects/ text / layer/ stroke 也可以添加style
• Component
  • 實(shí)心花瓣：父級(jí)component
    • 編輯這個(gè)元素，運(yùn)用相同component的元素都會(huì)相應(yīng)的發(fā)生改變
  • 空心花瓣：子級(jí)component
    • 從父級(jí)復(fù)制粘貼得來(lái)
    • 編輯這個(gè)元素，其他運(yùn)用相同component的元素不會(huì)變
    • 從子級(jí)可以回到父級(jí)
  • 盡量把從創(chuàng)建的組件都放到獨(dú)立的畫布里面 - 方便后期修改
  • 創(chuàng)建的component會(huì)出現(xiàn)在Assets里面

第6課 - 連線動(dòng)畫效果說(shuō)明

• 用Figma實(shí)現(xiàn)的是一個(gè)簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)效果 但不是一個(gè)真實(shí)的交互設(shè)計(jì)工具
• Prototype： 制作原型的面板
  • Interactions
    • 交互方法：click, drag, hover
    • 動(dòng)作
      • Navigate to：跳轉(zhuǎn)到指定頁(yè)面
      • Back：從哪個(gè)頁(yè)面來(lái)回到哪個(gè)頁(yè)面去，可以避免連線過(guò)多過(guò)于繁雜（不論動(dòng)畫效果如何實(shí)現(xiàn)）
      • Open Overlay/ Close Overlay：遮罩
      • Swap Overlay：切換遮罩
      • Scroll to：跳轉(zhuǎn)到當(dāng)前頁(yè)面的某個(gè)位置，即頁(yè)內(nèi)跳轉(zhuǎn)
        • 頁(yè)面滾動(dòng)
          • 需要滾動(dòng)的部分選中，右鍵Frame Selection，調(diào)整Frame的大小到頁(yè)面底部，即可實(shí)現(xiàn)滾動(dòng)
          • 不需要滾動(dòng)的部分，可以在Design里面選中Fix position when scrolling
          • 在左邊的Layer里面可以看到哪些元素是固定的，哪些是滾動(dòng)的
        • 也可以Scroll to直接跳轉(zhuǎn)到當(dāng)前頁(yè)面的某個(gè)元素上
    • Animation: 動(dòng)畫效果
      • Instant：立刻跳轉(zhuǎn)，沒(méi)有動(dòng)畫發(fā)生；底部導(dǎo)航欄一般用這個(gè)
      • Dissolve：慢慢過(guò)渡
        • 300ms是過(guò)渡的時(shí)間，數(shù)字越大，過(guò)渡效果越慢，時(shí)間越長(zhǎng)；最常用的在200-400ms
        • Ease in and out是最常用的
      • Move in/ Move out
      • Slide in/ Slide out：頁(yè)面級(jí)別的跳轉(zhuǎn)一般用這個(gè)；動(dòng)作更小，更緩和
      • Smart animate：關(guān)鍵幀動(dòng)畫效果
        • 左右兩個(gè)Frame包含的東西得是一致的
        • 第二個(gè)Frame是從第一個(gè)Frame直接復(fù)制出來(lái)的，只有中間的元素發(fā)生了位置的移動(dòng)
        • 圖層名稱等不要進(jìn)行改動(dòng)
        • 【建議不要在Figma里面做復(fù)雜交互】
• 流程越多，連線越亂，可以通過(guò)Flow來(lái)整理不同的流程

第7課 - 參考線和柵格應(yīng)用

• 網(wǎng)頁(yè)尺寸
  • Desktop 1440 和 iMac 1280最常用
  • 從小的做起，再適配1980的大尺寸
• 第一件事是創(chuàng)建格線系統(tǒng) - 規(guī)劃標(biāo)準(zhǔn)，框架
  • Layout Grid
    • Columns：
      • count一般用24個(gè)
      • margin即左右留白
      • type一般就用stretch
      • Gutter即column之間的間距
      • Color記得用一個(gè)在背景中能凸顯出來(lái)的顏色
  • 上下邊距可以通過(guò)Shift + R顯示標(biāo)尺，拖拽一條參考線出來(lái)
    • 這個(gè)例子里面左右邊距留白是45，所以上下也各留45
• 在每個(gè)shape里面也可以通過(guò)stroke來(lái)控制shape里面的上下左右邊距

第8課 - 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

• 響應(yīng)式：拖拽網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)的寬度可以根據(jù)我們的操作去調(diào)整，去適應(yīng)

• 先做一個(gè)標(biāo)準(zhǔn)的1440的界面，再做更寬更大的界面

• Frame selection和auto layout是不一樣的

• Frame會(huì)有上下級(jí)的從屬關(guān)系

  • 最上級(jí)的Frame是最底下的這個(gè)頁(yè)面的大畫布

• Constraints：可以控制按照左上、右上、居中等固定元素在畫布中的位置

  • 需要跟頁(yè)面等比例縮放的，選scale
  • 比如文本框不希望發(fā)生換行等變化的，選center

• 圖片只能使用fill不能使用crop

第9課 - B端表格頁(yè)設(shè)計(jì)

• 元素的寬度可以直接在W-xx xx即為想要縮小的像素，例如1200-80， 寬度就會(huì)變成1120
• Auto layout：會(huì)根據(jù)內(nèi)部元素，調(diào)整外部的寬度
  • 由背景和上層元素組成
  • 上層的元素一定要背景的內(nèi)部，不然就會(huì)變成并列排列
  • 幾個(gè)auto layout可以合成一個(gè)auto layout的組
    • 里面的元素可以調(diào)換順序，復(fù)制粘貼
    • 兩個(gè)auto layout組的元素之間也可以互相調(diào)換
  • 文字 首先是一個(gè)文本框：里面文本多少，框就有多寬
  • 要把a(bǔ)uto layout里面的文本框 和文本框里面的文字 當(dāng)成兩個(gè)內(nèi)容來(lái)理解
  • Hug contents vs Fixed width/ height
• 做列表元素 建議全用auto layout
• Spacing mode
  • packed：元素挨在一起
  • space between：畫面中貼進(jìn)任何元素 自動(dòng)均分

第10課 - B端規(guī)范搭建

• Auto Layout可以和Component進(jìn)行高效緊密的結(jié)合
• 設(shè)計(jì)列表的時(shí)候，里面的每一個(gè)小的元素，每一個(gè)單元格，都可以是一個(gè)單獨(dú)的component
  • 每一個(gè)單元格先Frame Selection，再create component
    • Frame命名中添加斜杠，可以在Assets中顯示的時(shí)候形成分級(jí)菜單，例如 Frame名稱為 列表數(shù)據(jù)/選中信息 在Assets中，第一級(jí)菜單為列表數(shù)據(jù)，展開后顯示選中信息這個(gè)component
    • 斜杠前名稱相同的component會(huì)被歸類到同一個(gè)上級(jí)菜單，例如 列表數(shù)據(jù)/用戶信息
    • 同層級(jí)的component可以互相替換
• Component最重要的是上下級(jí)嵌套思想
• Variants
  • 表現(xiàn)同一個(gè)元素不同狀態(tài)下的樣式
  • 下拉菜單或者開關(guān)選擇, value or boolean
    • 兩個(gè)配合使用（添加兩個(gè)property）可以做出 light/ dark模式
  • 先把各種狀態(tài)分別做成component，然后全部選中，右邊Combine as variants

總結(jié)

以上是生活随笔為你收集整理的【PM学习笔记】酸梅干超人 - 零基础学Figma学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。