Figma: Make • AI UI/UX設計生成 • Figma 教學 (含CC字幕)

哈囉大家好，這是Alan 我們今天這集來看一下，Figma Make的使用方式 Figma Make的話，基本上就是，我們可以使用AI的這種指令 來生成我們UI/UX的設計物件 所以我們今天就來看一下要如何使用 那在開始使用之前，我們先來看一下說 如果你是使用免費版的話 就是Starter Plan的話 在使用上你會有些限制

那如果你是使用學生版的話，你就沒辦法使用 那這相關資訊的話，可以到FAQs上面可以看得到 那我會把連結放在這個影片的解釋的地方 那首先呢，如果我們打開Figma的話 可以看到，如果去Drafts這個地方 然後我們到右上角，可以看到這個Make對不對 我們可以建立不同的東西

然後最後面有這個Figma Make 然後我們就點選它，把它打開 那可以看到，一開始進來的話，它長得介面都是這樣子 可以看到我們在左下角的話就是主要是 讓我們可以輸入，我們想要生成的一些指令在這邊 把它輸入上去這樣子 那我們就直接很快的來創造一些設計 然後給大家看一下怎樣的效果

那所以在我們生成設計的話，你有幾種方式 你可以用當然就是打文字的方式 那打文字的方式的話我們大概之前講過說 這種AI的工具呢寫這個指令的話有幾個要點 就是說我們要寫的話就是 要把我們的文字呢就是盡量是 直接一點然後簡短一點的寫出來

然後我們可以這個先從這個大方向開始 所以我們舉個例子好了 我們今天要寫的叫做說 我就說我要Create 然後當然是這邊是打英文嘛 那我之前講過說 欸如果你覺得，你英文不知道怎麼寫 不是很好的話，你也可以用Google Translate去把它翻譯一下 那其實你在打這種東西你也不用說很擔心

說你文法是有沒有錯誤這樣 因為他們這個都還蠻聰明的 大家也知道你在講什麼這樣子 那你也不用說，你的文字寫得多完美啊這樣子 不過這邊重點的話就是說 我們就要寫簡短一點然後把你想要講的話呢 就把它清楚表示出來 所以比如說我們今天這個範例的話

我們就要寫說Create a Dashboard 就是Dashboard就是這種控制介面 Create a dashboard for medical appointment tracking 那我這邊寫意思就是說我們來建立一個

類似看醫師，我們預約看整記錄的設計產品 那你當然可以先從這方面，大方向直接給它寫嘛 但如果你這樣寫的話呢 你可能它就能就 可以讓這個Figma Make它自己去 創造嘛 那如果你想要更仔細一點的話 我們可以把它寫更仔細一點

這也是他建議說 如果你想像的產品你有比較細節的想法的話 你可以就把它寫出來這樣 然後呢，我們就說Create a dashboard for medical appointment 然後with the following features 就是有以下的一些功能 可以Create appointments

就是建立我們的預約看診 然後呢我再說 然後Track appointment status 就是說，我們看診的一些預約狀況

然後，View past and upcoming appointments 就是說，我們可以看以前的看診，或是接下來的看診 不過這邊的重點就是 我就講的就是比較直接一點 簡潔一點 但是也是有詳細去述說，我想要設計的東西是什麼

我們就直接看說，如果這樣打字的話 生出來的物件是怎樣 所以如果你打好之後呢 可以它右下角就是這個傳送出去嘛 我們就來看一下 OK那可以看到說 在這裡它是有生成出來嘛 所以看到呢 它幫我創造的一個這個預約看診地方 有今天的appointment 還有接下來的 還有整個有多少個這個病人這樣子

還有我們這邊可以Appointment的一些 我們剛才說要看我們Schedule是怎樣 所以看到它設計出來的東西 其實就還蠻酷的嘛蠻好看的 然後還有右上角我們有這個 可以新增新的Appointment的方式 所以你看它說 我們現在大概有創造出一些東西 那我們其實可以把它再，假如說優化一點這樣

那它另外一點就是說我們在寫指令的話呢 我們可以有時候可以給予這種它的範例這樣子 所以我們比如說什麼意思 就我們在寫的話有時候不知道怎麼描述的話 我們可以說假如說我剛說 Create a calendar section 就建立一個月曆的地方呢

that shows appointments shows appointment dates For example 所以這邊就說For example 如果你不知道怎麼寫的話 就說舉例來說 For example

Calendar has dots indicate scheduled appointments 就說我想要建立一個Calendar 然後它Calendar上面說有這種點點

代表說那天就是有預約看診的日期 所以這邊重點就是說 你可以用 給舉例讓這個AI可以去創造 所以我們來看一下 它可以創造出我們的新的感覺 那這邊有弄一個什麼這個error (錯誤訊息) 我們就先不理它 因為它是後台，我這邊有把一些物件刪掉 所以如果你在寫的話一開始

直接寫，不會有這個錯誤訊息在 我們等一下再來看怎麼把它用掉 可以看到那它這邊就創造出來 可以看到說多新增了一個這個 有日曆的地方 日曆上面就有 看到說點點的話就代表說 那天有什麼事情發生 然後這邊有說是什麼Schedule

In Progress 這是他們現在使用的方式 那你當然也可以自己去 更詳細再做些調整 可以看到說那我們剛才看到就是說 我們可以利用舉例的方式 (For example) 來更詳細述說 我們要寫出來的指令是什麼 那接下來一點就是說呢 在寫這種指令的話 有幾個重點就是說 我們不要提供我們這種個人敏感訊息

比如像說他這邊講到說 如果你後面有做一些什麼 一些後端的東西 那就不要直接把你API key 寫出來這樣子 或是你個人敏感說 你的生分身字號ID 或是你的住址這些比較敏感訊息 就不要把它寫在這裡面上去這樣子 最後的話就是說 我們在寫這種東西的話 就是一步一步來 就不要說一次就給他寫一堆這樣

所以他可能有點難 這種一次就一次到位 所以我們可能就是慢慢一步一步來這樣 那我看到說我們生成出來的這種設計的話 我們有幾種方式可以去優化他 我們可以看到下面的話 還有幾個選項嗎 那我們先從最右邊這個"Point and Edit"開始看起 那"Point and Edit"我們點選他的話 意思就是說你可以看到 如果點選他滑到我們這設計的話呢

他就可以選到我們這個設計上面 直接相對應的物件 看一下好了 我有說Medical這個Dashboard點他的話 這個我們可以去調他的字體 是什麼顏色 字大小粗細這樣 這個右邊第二個這個Spacing 我們可以調他的這個間距之類的 然後最滿酷的是這個Go to source

我們點他的話 他就會highlight說 他這個在他後面 Figma Make的話 他們這個後面的這個顯示 程式的內容在哪裡這樣子 所以可以看到說 我們剛才如果到上面看一下 Open Console Mobile Preview 還有這個Preview的地方 所以我點選Preview的話 就是我們剛才生成物件的地方 那如果點選Code的話 他其實這個Figma後面就是

有寫程式寫出來的地方 那我們也可以直接說 去裡面改這個程式的話 他前面也會影響到這樣 我們如果打開Code的話 比如說我看到這個 他們這個h1就是Code在這地方嘛 Medical Dashboard 那我們假如說 想要給他，A Fancy Medical Dashboard 就是有點

有點酷華麗的這個Medical Dashboard 所以我如果打好他的話 可以看到如果我到Preview的話 你看到上面字他就自己更改嘛 所以這也是另外一種 我們可以直接去後面 去從那個寫程式上去更改他這樣 那或者是說 一樣我在點選這個"Point and Edit"的話 如果點選到這個地方

A Fancy Medical Dashboard 就是這字嘛 我們也可以要左邊可以看到說 我們還可以這個點選 Edit with prompt 就是我們可以用AI指令的方式去更改他 所以我可以這邊給他寫說 Change font size to 48px 更改它字體大小到48px 所以可以看到說他這邊就說

欸他有標計說是h1這個字 我們想把它更改字的大小 那你看他這邊就會做一些更改這樣子 好所以可以看到說 欸這邊就做出一些更改這樣子 蠻酷齁 那我這邊還是覺得說 欸他這邊可能這個間距啊 上下間距我們可以要給他多一點這樣

那我就Margin給他用的16 感覺好像好一點 所以可以看到說 我們可以用這個"Point and Edit"的話 搭成這個更精確微小的一些調整這樣子 那接下來我們看到在這個"Point and Edit" 左邊的話 有這個Select a library這個地方 如果點選他的話 他這邊就是說 我們可以把一些

我們設計的一些設計的 我們自己有做一些設計系統啊 或是一些libraries的資料庫 我們可以把它導入進來 所以我們來看一下說 如何做這個動作 所以比如說我到這個 Templates and tools的地方的話 那我們到Community這個地方 那我們就去抓一個這個 網路上他們有一些

所做好一些設計系統我們來看一下 所以我們今天可能說 我們就把這個iOS這個UI kit 我們把它抓下來看一下 點他的話 然後Open in Figma 然後Make a copy 所以假如說你今天有一個 自己額外的設計系統 比如說啦 那我當然今天用的範例是 我們就用這個來當範例這樣 那所以有這個話

我們第一要做的話就是 我們要把這個設計呢 先把它發佈出去 這個設計系統發佈出去 所以我們到Assets下面的話 然後我們點選我們這個Library的話 我們點選Publish 那在這個設計檔案 把Publish出去之後呢 我們就一樣再回到Assets下面的話 我們再點選Publish的話 然後我們看一下說 我們剛剛Publish出去的話 在下面我們這個時候 就有多了一個這個

Export to Figma Make 我們就可以使用它 所以我們就把它點擊它一下 那可以看到說 它這邊跟Publish出去有點不一樣 所以它這邊弄到Figma Make的話 (Export to Figma Make) 它這邊會把我們這個設計系統 我們這些所做的Styles 它會把它轉成CSS的數值 所以有點不一樣 因為在第一個這種Publish出去的話

只是說我們在其他Figma Design上 你可以用到我們的這些設計的 這些Library 但是丟到Figma Make下面的話 它這邊會把我們數值 導入成這種CSS出去這樣子 所以這邊有點不一樣 還蠻酷的這樣 OK 那可以看到說 我們剛才把這個 導入到Figma Make的話 我們到下面 我們到我們這個Library看一下 打開看

可是還是沒有看到 那我們可能就要把我們這個設計檔案 再重新開啟 OK 那所以重新開了之後 一樣到下面的話 你看這時候點開Library的話 就可以看到說 我們剛才把它這個 轉到Figma Make的時候 它這邊就有出來的 所以我們就可以選這個Library 那選這個Library的意思就是說 我們可以 這個Figma Make就會使用

我們剛才所做的 想導入的這個library設計的 這些設計系統它的數值這樣子 所以我們來看一下什麼效果 點選它 它這邊就說我們會 Rewrite with styles from this library 它會重新寫我們 上面看到設計用 它這個Library裡面 所用的一些設計數值 設計數值這樣子

可以看到這邊就有做一些更改 可以看到我們字 可能有大小一些變化 對不對 那可以看到說 在左下角的話 這邊就有可以看到說 我們現在 它現在能使用的話 就是用來個library這樣子 然後如果看到右邊的話 它這邊的話就有說 我們可以去Edit styles 或是Edit guidelines

來看一下什麼意思 所以如果Edit styles的話 它這邊打開的話 就在Code下面 然後可以看到左邊就是有 不同Folder 就在styles下面 這個global.css

這個global.css 那其實如果你們 大概對前端有些概念的話 它這邊就是可以看到 它這邊就是對他們這個 一些數值嘛 字的大小 它這邊是用代數variable的方式 去把它做整理 所以你可以說 你可以直接從這邊改 可以就比如說 我可以看到說h1: 34px 你可以覺得說

這好像有點太小 我們把它用40好了 比如這樣子對不對 我可以直接從這邊改 然後回到Preview的話 可以看到這個最上面這個 字就變大 所以就可以從後面 有些更改就是這樣子 那另外一個比較酷的就是 我們可以選Edit guidelines 那在Guidelines下面 你可以看到說

它這邊有給我們寫一些 這個解釋的方式 使用的方式 那這個地方主要說 Guidelines的方式 這邊有寫說 我們可以 use this file to provide the ai with rules and guidelines you want it to follow 在這地方寫一些 我們想讓 AI 去這個

遵循了一些這個指令的範圍 然後它這邊有說 寫很多並不代表 都是會比較好的 因為有時候你寫太多 你可能會讓這個 AI 搞混 所以我們就說 它就說盡量是寫一些 比較重點的一些準則

這樣子你需要的準則 所以這邊有說比如說 讓我們的base font size (基礎字體大小) 是用什麼大小 然後或是你那個 那個字的一些寫的方式 是怎麼樣寫等等的 所以我們這邊 它說那 Add your own guidelines here 那我們就可以把 寫在這個地方 所以比如說 那可以看到說 它這個符號

這個符號 你有看到這個地方什麼 <!--

<!-- 你看到上面是這樣 然後下面是這樣 --> 它意思就是說 它這裡整塊其實就是 怎麼講呢 它是 它是不會 程式不會去跑它就對了 有點像只是註解的方式這樣子 (Comment) 那我們就可以 這邊也可以寫說 那我們就說 我們可以說好 那我們就用這個方式開始

那我們也說 use use the base font size of 14px base的字體大小是14px 然後 那我們還可以寫說

make sure spacings are in multiples of two 看看會怎麼效果 意思就是說呢 讓它間距的都是 用二的倍數這樣 看一下會不會有些適用的方式 所以我們回到Preview 你可以看到沒有一些Update更新

所以我們在 ask changes 的時候 我們可以說 use guidelines updates OK 那可以看到說 它這邊就有更改好了嘛 可以看到說 這邊其實做了還滿大的一些更改 長得跟我們之前的設計 不大一樣 不過可以看到說 Guidelines的地方的話 它可以做一些

更改這樣子 這邊可以看到說 在下面的話 我們剛才所加入的這個 使用的設計系統的話 你可以看到我們這個地方 就沒辦法移除了嘛 所以它這邊其實就講說 如果你 Figma Make 如果你已經 加入使用的一個 這個設計的系統的話 你就沒辦法移除掉這樣 所以如果你想要 換一些新的 使用新的這些 library

或者不同的設計系統的話 你可能就要 創造出 一個創新的檔案這樣子 可以去 FAQs 上面 它們這邊有提問到這樣 所以這是一個 要注意的地方 接下來的話 還有另外的方式就是 到最左邊的話 我們這邊也可以加號 Attach design 就是我們可以 類似說 我們可以 附屬 (附件) 加入說 我們從

Figma Design所做的設計 或是說我們是 上傳圖片也可以 所以我們來看一下 它有幾種方式 那如果先用上傳圖片的話 當然我們就可以說 假如說找一些設計 如果你喜歡的話 也可以把它加進來 所以比如說，點選“Upload Image” 那可以看到說 我們這邊有這個 還蠻酷的 Calendar的地方 所以假如說我今天說 我想用這個

日曆的設計方式 看一下可以達成這樣 可以把它 Attach 對不對 然後我說 Use the attached image’s calendar design 比如說使用我們 附件圖片的日曆設計 可以看到說 這邊生成好了

可以看到我們這個Calendar的話 又長得不太一樣 就有點蠻酷的 有點像我們 剛才附圖所說的 一些方式 然後每次你寫完的話 看到左邊有回顧說 它寫是什麼 如果在這個地方的話 如果你覺得 這個不是很好看 想回去的話 就是回到之前 我們所生成的設計，也是可以 就如果你看到 我們在對話的這個地方

如果往上可以看到 這邊有一個 這個回顧的箭頭 Restore this version 就是我們可以回到 版本這樣子 所以假如你不喜歡 這個的話 你可以點選它 你就可以回到 之前地方所做的設計是什麼樣子 或是update header font size 也是都是ok的這樣子

所以比如說 我可能就好吧 我說我就回去好了 我就點選它 看一下發生什麼事情 你有沒有看到 現在就回到我們 之前一開始 所更改這個header 這個字體大小的地方 所以可以看到說 我們剛才再去做這個 guideline地方 講解的地方

它有回到之前 所以就是 如果你寫的東西 你想回去的話 就是可以看一下對話的地方 有些地方就可以restore 就是回到之前這樣子 那我們再看一下說 我們剛才是加了一個圖片 那我們也可以Import from Figma 從Figma這邊弄進來 所以如果我點選它的話 它這邊就有說 如果你一些設計

我們的設計的Component 我們是有把它發佈出去的話 我們就可以在這地方 是可以看到它 那我們就可以把它insert的話 就可以說使用這個Component 去做我們的設計 這是一個方式 或者說 比如說我們打開另外的設計檔案 我這邊有準備一些設計 假如說我希望他們這個 Appointment是製作這個

預約看診的話 是用這種條狀的設計的話 那這有幾個重點說 如果你是使用自己的設計的話 第一個就是說 它就說我們的設計 如果你可以看到 右邊的話這個地方 它就說我們的物件 第一個就是說 我們圖層命名 就是把它命名的完整一點 就不要說 圖層沒有命名

只是用什麼Frame 1 或是Rectangle 1 這種沒有命名的物件的話 這樣不是很好 所以在做的時候 你的設計就把它想像說 我們這個設計就是 你就用那種前端的這種 構架去想它 所以物件 相同的物件 我們把它命名是這個相同的 然後如果能重複使用的Component 就比如說

可以看到我這個設計的話 就是中間這三個 它其實是三種 Instance Component 然後把它弄叫做 Scheduled App，Appointment 然後他們 因為都是這個Instance 所以我就都一樣 先做成Component這樣 然後在Component裡面的話 它前面是icon 我也把它做成Component這樣 所以就是盡量

重複使用的物件 就把它做成Component 這是一個滿大的概念這樣子 然後它就說 也所以說盡量 如果你物件是能做成 這個Responsive設計 就做成Auto layout的樣子 所以比如說 可以看到 我現在這物件的話 我把它全選 然後我把它弄成hover的話 可以看到帶一點灰色 它其實他們就是responsive 可以看到說 它可以做些

深縮的這種變化這樣子 所以意思概念 就是回到說 就是你把它想像你的 這個物件就是一個可以 可以成功 直接轉換成這種 手機或是 這個大螢幕的 桌上型尺寸的設計這樣 所以能使用Auto layout 就使用Auto layout 你看到哪些設計

你想要使用的話 我們就可以選擇 假如選擇 Schedule appointment 這個版塊 然後把它選擇edit 然後copy 然後回到我們這個 Figma Make下面 那我就可以直接在 Ask for changes 我就直接把它也是，Edit > Paste 可以看到 這邊就貼上一個 這個Figma Make的設計 因為它右上角這個icon

就是不太一樣這樣子 那這地方的話 我們就跟他說 就是說我們 Appointment listing 長得是這樣子 可以看到說 這個做出來的設計 感覺有點很不一樣 所以我們可以 做一些小更改的話 我就說 我就說我要我之前的日曆設計 然後呢 然後這邊就說

我就說讓這個日曆設計回來 然後呢 讓我們這個預約掛號訊息小一點 然後跟其他的design 有點相近這樣 可以看一下它可不可以 做這種更改 可以看到說 這邊設計做一些更改的話 這樣就比較好看了 就讓它這個尺寸 跟其他的設計 是有點相近的 只是我們這個Calendar

有點不見了 (其實在右邊Tab) 所以 Calendar在這地方 如果點這個Calendar的話 就有 所以 它還是蠻酷的這個地方 可以看到這邊 像現在這樣的設計 就比較好看了 還蠻酷的

這個AI真的是蠻強的 所以可以看到 就是說 我們剛才做的動作就是說 我加入了我自己的設計 然後呢 我們又給一些指令 讓設計更優化一點 你看我剛才給的指令 就是 有點簡短 但是呢又有說 給一些舉例嘛

following the rest of the design 這個Components 就是給它一些範例這樣 然後是精準一些指示這樣 所以看到這樣就 可能還蠻好看的這樣 對不對 那所以最後呢 我們再接下來看一下說 如果我們這種Figma Make 我們也可以加入後台的方式 就是後台就是說 等於說我們可以 儲存一些資料啊等等的

所以我們來看一下怎麼用 所以如果我們現在 想要設計的話 我們點這個New Appointment 這邊我們可以打一些名字資訊 然後Schedule Appointment這樣子 所以呢 這時候的話 因為你看到有很多 warnings (警告) 我們先把它創造一個平台弄起來 所以我們可以跟他說呢

Create a backend that can store: 就是一個backend 就是後台可以儲存 New appointment data

簡單一點好 就是說我們new appointment data 可以儲存起來這樣子 好我可以看到說 Connect to這個什麼 Supabase 所以它這是一個後台的方式 那所以呢 一開始的話 如果你沒有Account的話 你可以要去增加一個Account 嗯可能要從這邊 因為我這邊可能有出現錯誤

不過你應該不會有這個 錯誤這樣子 所以 如果沒辦法的話 這邊說Connect 然後Create an organization 我們就把它增加一個 我們就說 Figma Make 然後Create 它是免費的 就把它Create一個新的 但前提是你要 Sign up

就對了 然後 Authorize Figma 然後已經成功的話 所以呢 這個地方 然後我回來的話 我們再看一下 那我們把它Create project的話 這個地方再看一下 Create 然後好像就可以 所以它現在在跑一下 我們來看一下 可以看到我們 Backend 把它後端做出來之後

它這個長得不大一樣 那我們這時候 因為好像都沒有訊息 我就跟他說 建立一些Appointment的訊息 還有醫生的訊息 當做Mockup (樣本) 因為現在都是零嘛 可以看到我們這邊 就有多一些訊息 所以我們來 Appointment 我們加一下 我說 Patient name 我說Alan好了

然後Phone Number的話 就1234好了 然後Doctor的話 我們看一下有什麼 你看就有一些... Dr. Lee好了

你看就有一些... Dr. Lee好了

Appointment type Surgery 不要Surgery 就Check-up 然後Pick a date 因為看到這邊設計其實 算蠻酷的 這設計的非常好 太厲害 我們可以加些Notes Feeling tired Schedule Appointment 可以看到

還有這個 Appointment created successfully的 feedback 所以這個蠻酷的 好那我們來看一下說 已經有 Schedule 的話 我們看一下 可以看到說 到後台的話 我們就 有一個出來的嘛 我們來看一下Appointment 打開來看一下 大一點看 就我們剛剛 Patient name 就是Alan 就我剛剛所創建的嘛

然後還有醫生的 醫生的是什麼 是他一些訊息都在這 所以就還蠻酷的 就看到說 我們可以建一個後台 然後呢 把我們 多一些互動的感覺 所以其實還蠻酷的 那所以這就是 可以看到說 如何我們加入後台的感覺 用他這個 Figma上面用的Supabase 你可以看到說

上面我們還可以看到 Mobile preview嘛 那這裡有 Mobile 的感覺 那當然Mobile 這個感覺好像還OK這樣 不過他 Figma Make上面有說 現在他這邊比較成熟的話 就是做這個Desktop 就是大一點的這種 大一點螢幕的設計 是比較成熟一點 Mobile的話 上面說的還是有點吃力這樣子 我們最後的話 也可以把他

就說我們給他 Publish 出去嘛 然後你可以寫說 他的 Title 什麼 所以我們把它用好之後呢 我們把它 可以Feature on community 就不要嘛 就自己看就好了 Publish 出去 或是你可以 不是自己看啦 就是給你特定人看這樣子 對點選 Publish 好他說成功 就我們這 URL 我們就看一下 所以可以看到說

他這個就有說 我們剛才所創建的這個嘛 那我可以再創建一個新的 把他說 就我 Joe 然後44 123 這樣子好了 然後 Doctor 的話 我們就說是Dr. Smith Eye Examine 8/25. 5點.

8/25. 5點.

My eyes hurt!

Schedule 你看看這邊就有 出來新的嘛 所以還蠻酷的 然後就是 那我們可以把他Refresh 他就有做一些 Refresh 功能 所以 可以看到說 哎這個就感覺還蠻酷 我們就可以把這個 連結 (URL) 發給其他的 假如說 你就可以用Figma Make 做一些蠻快的一些 Prototype或是設計概念想法

發給其他人去做測試啊等等 所以這就是 今天這個教學影片 主要是讓大家看 他說如何去使用 Figma Make的這個功能 希望大家都可以學到 一些新的東西 那我們下次再見囉