「教程 | Figma」三步創建你的第一個 Figma 設計稿

2021-02-25 非科班設計

最近在知乎看到不少關於 Figma 的安利貼，又重新勾起了我的好奇心。乾脆這次系統的學習一遍，順便記錄學習過程，產出一套接地氣，手把手的教程。需要注意的是，由於 Figma 是牆外好物，你的使用水平下限取決於網速和英文水平，一定要心平氣和。

既然開了「教程 | Figma」這個坑，我承諾按時更完，歡迎大家關注。

教程相關

Figma 地址：www.figma.com

閱讀時長：3分鐘

操作時長：12分鐘

第一步，註冊登錄

Figma 的註冊功能非常友好，並不需要郵箱驗證，你只需要記住自己填寫的帳號密碼即可。

然後 Figma 需要你做一個簡單的自我介紹，即如何稱呼、職業工種。

歡迎來到 Figma，作為一個萬年沉浸 toB 業務的設計師，我稱該頁面為「項目管理頁」。

第二步，熟悉項目管理頁

該頁面可以劃分為三塊功能區，右下角的「Help」是一個全局功能，進入設計工作檯時也可以使用：

導航欄：顯示當前界面的名稱，具備帳號管理、消息、導入、新建功能；

分組欄：這裡可以選擇設計稿的分組：最近、草稿、回收站、團隊；

陳列欄：這裡陳列設計稿，可以對設計稿進行管理，也可以新建設計稿。

第三步，創建設計稿

點擊菜單欄的「+」或工作檯中的「+ New File」即可完成設計稿的創建，筆者有意把 PNG 做成 GIF 是為了讓大家對「網速」更有體感。

歡迎和我討論 Figma，微信號heiheilaugh。也請關注我的個人項目whose.design - 發現更多設計工具。

BorderDesign交流群，加微信號： qawsedr0125   備註交流群

相關焦點

  • Figma 教程 | 創建你的 Figma 帳號
    Figma 是世界上第一個設計協作工具。它基於 Web 的特性，讓你無需安裝即可使用，並且便於分享。
  • Figma UI完全教程 15-在Figma中的UI尺寸
    Figma UI完全教程 15-在Figma中的UI尺寸應大家要求，為大家送上Figma
  • Figma 社區遊玩指南
    一直以來設計都是一件「看起來很專業」的事，這一點從設計師們使用的工具就可以看出來。就拿 Photoshop 來說，複雜的操控界面和對設備較高的性能要求都會讓大多數人望而生畏，可現實中，除了設計師以外很多人也偶爾需要去做一些簡單的設計。Figma 降低了大多數人走入設計的門檻，你不需要多好的設備，只要電腦安裝了瀏覽器，註冊個帳號就可以去設計。
  • Figma - 面向未來的設計工具
    最近有一款新興設計工具 「Figma」 逐漸走進了大家的視野，越來越多的人認識或者上手嘗試了這款軟體，不過似乎還是有不少同學對Figma
  • 關於Figma,看這一篇就夠了
    專業或團隊版無限制）是基於自動保存來實現的，舉例一個場景：你老闆說，她想要你半個月前的第一稿的設計，這個時候你你就可以打開Figma，點擊一下，恢復源文件，完事~ 這個網址有詳細的教程可以將 3D 元素插入 Figma 中，更有趣的在於你能將的設計稿置入預設的可交互的 3D mockup 後導出圖片到 Figma 中，從此包裝設計稿不用愁找不到適合的 mockup 了，自己動手豐衣足食。
  • 小白的Figma入門手冊
    在源文件修改後可以快速自動同步給各方，一個figma文件本身即是設計師對應的源文件，也是上遊需要的預覽稿Draft，更是下遊開發需要的輸出標註。維護成為無意識的自動化過程而不需要太多人力介入。例如我需要建立一組橫排的card，此時可以先設計好三個card，然後選中它們，執行Shift+A即可創建一組橫排的自動布局（橫排豎排根據你真實場景下元素的排列情況，也可以在右側更改橫排為豎排）。另外一種小技巧是，直接給一個card執行Shift+A命令，然後選中組內的card執行複製命名cmd+D，後複製出的每一個card也會按照預定規則排列。
  • 乾貨 | Figma詳細的學習資源都在這了
    好了，話不多說作為設計師還是要看軟體好不好用，學習Figma非常簡單，小胖收集了一份比較全的關於Figma的素材資源，學起來毫無壓力：1.https://figmacn.com/resource國內Figma素材資源網站，是juuun.io大神創建的，主要收集 Figma 相關的教程、資源、工具和文章，給國內設計師提供一個學習資源庫。
  • Figma UI完全教程 13-好多免費的插畫可以用了
    Figma UI完全教程 13-好多免費的插畫可以用了應大家要求，為大家送上Figma
  • Figma 學習資源匯總
    Figma 在很多層面擺脫了以往設計工具的固有思維，而採用一種更加符合直覺的操作方式。但是，很多設計師在剛接觸 Figma 時還是會按照以前的思維去設計，從而不能發揮出它的最大化優勢。作為一個使用了很久的人，我決定整理出那些對我有過幫助的 Figma 教程或資源，希望能幫助初學者深入理解 Figma 的設計理念及最佳使用方式，以便快速入門。
  • 一切要從Figma支持中文開始說起
    （看下圖）哦草，figma的漢化插件，還是設計師開發的，哇哦哇哦，我又可以玩信息差遊戲了，於是我就把漢化和Figma的基礎操作整理成教程送給大家，都是可以白嫖的哦。首先打開上面這個地址，進入之後我們看到這樣一個頁面。然後我們根據下面的4步教程，即可將漢化插件安裝完畢。
  • Figma 常見問題與基礎操作
    Figma 收費計劃舉個例子，你同時創建了一個基礎版團隊和一個專業版團隊，在基礎版團隊內可以最多有兩個編輯者，而專業版團隊內每增加一個編輯者要多付 $15（按年付 $144）。除此之外，Figma 還有免費的教育計劃[1]，更多其它細節詳見幫助文檔[2]以我的經驗來看，免費的基礎版足夠前期使用了，等功能都熟悉了再付費使用。
  • 今日預定推薦:《遊戲王VRAINS》「Playmaker」figma登場!
    使用容易擺出姿勢且不易滑動的figma獨創關節零件，再現各種場景。重點部分使用軟材質，確保平衡與可動性。表情零件有帥氣的「普通臉」以及「喊叫臉」。附有「D滑浪板」，以及能裝在左手臂上的「決鬥盤」。此外，配件還有附與Playmaker一同行動的「AI」以及「手牌」、「戰鬥卡」。
  • Figma UI完全教程 04 - Figma的10個插件
    Figma UI完全教程 04 - Figma的10個插件應很多同學要求，我準備為大家補一下
  • Figma UI完全教程 06 - Figma的另5個插件
    Figma UI完全教程 06 - Figma的另5個插件應很多同學要求，我準備為大家補一下
  • 【比遊戲貴了】Max Factory21年8月 figma 對馬島 境井仁
    Max Factory 公司發行的人氣可動系列『figma』今（11. 27）日發表了出自 PS4 人氣遊戲《對馬戰鬼》的最新商品「figma
  • 【WF2018冬】FIGMA系列
    MaxFactory figma FGO Alter Avenger 黑貞德預定連結（手機用戶複製連結至新網頁打開）：https://item.taobao.com/item.htm?id=565031878504
  • Figma新功能發布,看看什麼是才是真正的自動布局
    「在看」，並點擊文章右上角的「...可以說，新版 Auto Layout 是在設計工具中實現了一個 CSS Flex[1] 可視化編輯器。視頻來源：https://twitter.com/figmadesign/status/1329455521355730945獨立的四個方向內邊距之前的 Auto Layout 元素內邊距只能分別定義水平和垂直方向上的，如果你想實現左邊 10px 右邊 2px 這種是不行的。
  • Figma Auto Layout 3.0 發布啦!請看草帽的視頻講解
    可以說，新版 Auto Layout 是在設計工具中實現了一個 CSS Flex[1] 可視化編輯器。視頻來源：https://twitter.com/figmadesign/status/1329455521355730945下面，我給大家匯總一下這次更新帶來的功能。
  • Figma UI完全教程 23 Juuust handoff 也太棒了吧
    Figma UI完全教程 23 Juuust handoff 也太棒了吧應大家要求
  • Goodsmile《寂靜嶺2》三角頭、腫臉護士figma再版!
    再版近日，Goodsmile恐怖遊戲名作《寂靜嶺2》中具備壓倒性存在感和衝擊性，系列首屈一指的人氣怪物，通稱「三角頭」的「Red Pyramid Thing」以及腫臉護士的figma決定二次再販！採用figma專用關節零件，靈活自如，能夠再現遊戲中各種刺激場景。關鍵部位採用軟質素材，在不破壞整體平衡的前提下確保可動性。「Red Pyramid Thing」象徵性的大砍刀之外，槍以及各種替換手以及重視還原遊戲形象的頭部配件都附帶在內。配合同捆的附有可動支柱的figma專用臺座可以擺出各種各樣的姿勢。