原視頻鏈接: B站視頻

零基礎學Figma學習筆記

• 心得體會
• 第1課 - 蘋果商店頁設計
• 第2課 - 線性圖標設計
• 第3課 - 面性圖標設計
• 第4課 玻璃擬態頁設計
• 第5課 樣式組件功能入門
• 第6課 - 連線動畫效果說明
• 第7課 - 參考線和柵格應用
• 第8課 - 響應式網頁設計
• 第9課 - B端表格頁設計
• 第10課 - B端規范搭建

心得體會

沒有學習之前，七拼八湊自己也上手做了一些。學了之后，發現走了很多彎路。非常實用的一門課程，可以直接被應用到工作中去，中間介紹的很多概念思路和快捷操作常看常新。

第1課 - 蘋果商店頁設計

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

第2課 - 線性圖標設計

• 圖標呈現是一個小方塊 一定會有固定區域 邊緣留白 這樣方便進行對齊的操作
• 畫愛心的步驟
  • 畫兩個矩形，呈90度
  • 分別選中矩形的兩個頂點，拉大圓弧
  • 按住shift旋轉愛心角度
• 每次新建圖標 先新建一個Frame 需要多大的圖標就新建多大的Frame

第3課 - 面性圖標設計

• 彩色面性圖標中間的圖案 和線性圖標一樣 先單獨用frame畫好
• 中間需要留空的部分用substraction減掉
  • 不要試圖用背景色在圖標上面畫，顏色調整起來會很麻煩
• Linear做漸變最好左右采用同色系 過渡會比較自然

第4課 玻璃擬態頁設計

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

第5課 樣式組件功能入門

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

第6課 - 連線動畫效果說明

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

第7課 - 參考線和柵格應用

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

第8課 - 響應式網頁設計

• 響應式：拖拽網頁時，網頁的寬度可以根據我們的操作去調整，去適應

• 先做一個標準的1440的界面，再做更寬更大的界面

• Frame selection和auto layout是不一樣的

• Frame會有上下級的從屬關系

  • 最上級的Frame是最底下的這個頁面的大畫布

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

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

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

第9課 - B端表格頁設計

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

第10課 - B端規范搭建

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。