設計師的 AIGC 百寶袋📁生成向量圖、畫 UI、做網站都可以,太神啦!

林育正 Riven
13 min readNov 17, 2023
Instagram @designer.riven

今年初開始,由 ChatGPT 與 Midjourney 帶起的 AI 應用革新,將許多原本難以理解的技術,放進了我們的電腦和手機裡,各個網路產業和資訊領域新創也推出了許多相關軟體服務,成為了現在每天工作或學習上的重要工具。

不論是語言模型、AI 繪圖或是輔助學習,在經過接近一年的資訊焦慮與新 AI 工具們的轟炸後,我想我們之中很多人選擇了躺平,或是已經對那些「失業!」「驚呆了!」之類的新聞標題疲乏無感;但其實還是有一些 真正 成為了我們設計師工作上能夠派上用場的好東西。

今天這篇文章我們會來一一細數這些在 2023 年底經過時間考驗,已經釋出並也可以實際使用的軟體工具;而因為我自己設計領域背景的關係,會著重在 AIGC(AI Generated Content;人工智慧生成內容)為主。

如果想更深入研究的同學
可以來 AI 覺醒!極速 UI 設計術|零基礎掌握全方面網頁架站 線上課程一起學習!

Adobe Firefly「設計軟體的 AI 大躍進」

在剛剛結束的 Adobe MAX 2023 設計師大會上,共釋出了三種新一代的圖片模型,分別是 Firefly Image 2 Model、Firefly Vector Model 和 Firefly Design Model,在 AI 繪圖的質感和可編輯性上進行了大幅的提升。

在大約半年前還在 Beta 的 Photoshop 生成填色(Generative Fill)功能就已經被廣泛應用在影像合成和特效上,在接下來第二代的 Adobe 的 AI 圖片模型實裝後,在影像細節處理上又會更為真實; Image 2 模型的 AI 編輯功能,可以幫助使用者自訂產生結果,並透過設定調整圖片的景深、模糊和可視範圍,就如同單眼相機的手動模式一樣。

除此之外這次模型還加了「提示指導」功能,可以幫忙使用者調整提示詞,也能自動化以提升效率。

完整的 Adobe Firefly 介紹可以看我們先前的這篇整理:

Adobe 數位媒體業務總裁 David Wadhwani 也在 Adobe Max 上說道「迄今為止,Firefly 已經生成了 30 多億幅圖像,其中僅上個月就生成了 10 多億幅圖像,Firefly 將基礎模型引入客戶熟悉和喜愛的工作流程具有獨特的威力。」

此外,Adobe 在 Creative Cloud 旗艦應用程式中發布了 100 多項重要的新人工智慧功能和更新,包括 Adobe Illustrator、Adobe Photoshop、Adobe Lightroom、Adobe Premiere Pro、Adobe After Effects 和 Adobe Stock 等等。

Illustrator 文字生成向量圖

當中我覺得對設計師來說最實用的就是輸入文字提示詞在 Adobe Illustrator 中,就可以生成可縮放、可編輯的向量圖形,圖形由 Adobe Firefly AI 生成,這項功能是 Text to Vector Graphic Illustrator。

解決了傳統用鋼筆拉錨點的技術門檻,我們可以運用想像力,並反覆運算設計概念,使用文本到向量圖形快速建立完全可編輯的插圖。只需輸入一個簡單的描述即可生成可擴展、可自定義的 icon、場景和圖案。此外,還可以使用自己原有的作品作為參考。

Text to Vector Graphic — AI vector generator — Adobe

使用文本到向量圖形生成的插圖是完全可編輯的、無限可縮放的,並在其自己的新圖層上創建。使用 Illustrator 中的精確編輯工具調整圖形的每個部分,以建立可在任何地方使用的完全獨一無二的設計。

同時 Illustrator 這次也加入了幾項新的 AI 功能來加速工作流程。像是 Retype 可以透過辨識比對 Adobe Fonts 中的類似字型,將圖片或照片中的文字變成可編輯(外框)的文字。

Mockup 功能,則可快速為設計的產品做出提案 demo 圖,將品牌 Logo 合成在商品或包裝上,與客戶的產品設計簡報溝通使用。

Photoshop Generative Fill 生成填色

Adobe 採用 Firefly 技術的強大生成式 AI 功能「生成填色」和「生成擴張」,在過去幾個月的 beta 版本中已經被全球使用者廣泛使用,現在已經在 Photoshop 2024 版本中正式上線。

我們可以在 Photoshop 內超過 100 種語言的簡單文字提示,以非破壞性的方式從影像中新增、擴展或移除內容(會產生一個新的圖層而非覆蓋原本圖層),「生成填色」和「生成擴張」會自動符合影像的透視、光源和樣式,在短短幾秒內就能創造出令人驚訝、驚喜且嘖嘖稱奇的逼真結果。

生成填色」和「生成擴張」的設計能夠安全用於商業用途。Firefly 受 Adobe Stock 數以億計的專業級授權高解析度影像打造,這些影像為市面上最高品質的影像。

不過要注意的是這些 AI 生成的設計功能都會扣點數,Adobe 官方稱為「生成點數」(Generative Credits) 依照個訂閱方案每月限額;想試玩的同學可以在 2023 / 11 / 1 之前,只要是既有 Creative Cloud、Adobe Firefly、Adobe Express、Adobe Stock 的付費使用者,皆可無限使用相關生成式 AI 功能。

同時,與 Canva 功能相近的 Adobe Express 也提供了更多的人工智慧功能,新增了生成填充、生產文案到模板和翻譯功能等。

Canva Magic Studio 設計一條龍🐲

Canva 是來自澳洲的設計軟體,主打可以用最簡單且有效率的方式產出設計作品,能用於建立社群媒體圖片、簡報、海報等視覺內容的平面設計平台,提供大量設計模板給使用者使用,基本功能為免費使用,同時提供 Canva for Enterprise 和 Canva Pro 等付費訂閱方案以開通額外功能,也可付費列印和快遞如名片等實物印刷物。

十月初 Canva 發佈了整套 AI 技術為基礎的產品 Magic Studio,從用 AI 做平面設計、動畫和剪輯影片,甚至連翻譯、寫文案等 AI 應用都涵蓋在裡面,將垂直設計流程全部串在一起對於使用上真的方便很多。

Canva Magic Studio 目前釋出的主要功能有 Magic Design、Magic Media、Magic Edit、Magic Switch、Magic Animate 等,以及像是 Magic Expand、Magic Grab、Magic Eraser 和 Magic Morph 等輔助功能,可以在 Canva 的 Magic Studio 網頁上體驗看看。

https://www.canva.com/magic/

而這次的 Magic Studio 比起在今年三月發表的 Canva Magic,不僅是功能更多更完整了,也已經實裝上線到軟體裡,我們現在就已經可以在 Canva 上使用這些酷功能。

在使用過後我覺得除了 Canva 原本面向的非設計從業人員外,連專業設計工作者都可以使用 AI 設計功能來加速原本的工作流程,而且還可以省下處理文書處理的作業時間,設計師可以更專注在重要的視覺和規範上。

更完整的 Magic Studio 各項新功能概覽我整理放在另一篇文章 ⬇️

Visual Copilot「直接將 UI 設計稿轉程式碼」

接下來這個是兩天前才發表的熱騰騰 AI 網頁設計工具,如果你已經會使用 Figma 設計 UI 介面,那麼這款與 Builder.io 共同製作的 Visual Copilot 可以讓你的 UI 設計稿即時轉成前端程式語言。

透過 Builder.io 上架在 Figma Community 的這個 Plugin,就可以使用這套透過 AI 技術將 Figma 轉成程式碼的套件:

Figma to Code 能夠即時生成 HTML 和 Tailwind CSS 等程式碼,支援 React、Vue 等框架,並可自動生成語義化的元件名稱結構和 CSS 變數,提高 code 的可讀性也好維護。

同時也支援 RWD 與跨裝置:能自動調整元件以適應所有螢幕尺寸,不用手動調整;當調整螢幕大小時,設計會自適應變化。

最後也能夠直接發佈成網站上線,讓製作網頁的繁重過程最簡化。

而同樣是將 Figma 的設計稿轉成前端程式與網站上線的軟體,Framer 推出的 AI 服務則是更早就已經釋出來讓大家用,透過簡短的描述詞就看產生 UI 介面和響應式的網頁。

Framer AI 一秒做網站

AI 技術在今年於語言模型、運算繪圖等領域都占盡了版面,而就如我們去年底預期的一樣,在接下來就輪到設計領域登場;AI 今年上半年就帶了許多功能性的突破,連最近被全世界設計師玩壞的 Adobe Photoshop beta 功能 Generative Fill 生成填色,也不過只是 Adobe Firefly 的冰山一角而已。

而除了平面設計之外,網站和 UI 也都是下個受到矚目的 AI 內容生成重點發展,就像之前介紹過的 Autodesigner,Framer 這次發佈的 Framer AI 可以透過 prompt 生成 UI 介面,並且產生能夠互動的網頁,不需要去做設計,也不用寫一行程式。

Framer 是一個給設計師和開發者使用的軟體,可以拿來做 UI 設計和網站開發,或是拿來弄高保真的原型也可以。

我覺得 Framer 最強的是結合了設計與 Coding 的優點,對設計師來說可以做出動態和互動效果更好的體驗,尤其是以前端技術作為佈局的框架,給開發者操作也是完全沒問題的。

功能面來看和 Webflow 差不多,而介面跟 Figma 很像;整體使用門檻偏高,你可能會需要同時具備設計與程式的基礎,才能夠 100% 發揮 Framer 的功能。

即時設計

而如果也沒有網頁建置的需求,設計師想要專注在 UI 使用者介面設計上,現在也有個新選擇——使用 AI 技術基礎的軟體「即時設計」。

第一次注意到即時設計是看到超短的網域名稱 js.design,基於好奇有稍微玩一下子,但那時候的版本跟當下其他 UI 設計軟體並沒有太多區別,直到和中國朋友聊天時,再次看到這個「軟件」多了許多新功能,才又去試用了一下,發現真的變化超多⋯!

這套軟體在中國被視為 Figma 的「国产」版本,是繼 Photoshop, Sketch, Adobe Xd 之後的接班主流 UI 設計工具,同樣不用下載只需要瀏覽器,並且也能免費使用,並支援其他各家設計軟體;社群資源(设计社区)也是非常豐富,來自官方和用戶所分享的設計素材可以讓我們更快地完成設計稿。

而目前最大的改版內容,就是「即时AI」的功能,裡面也有類似 Midjourney 的 AI 繪圖功能,以及和 Framer AI 相似的 prompt 產設計稿,還有正在開發中的手繪轉 UI 等等,許多有趣且神奇的功能都能在即時 AI 上面看到。

--

--

林育正 Riven

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:portaly.cc/riven