Config 2023: Figma 年會紀錄

Config 2023: Figma 年會紀錄

June 30th, 2023

image

大家好我是立秦,很開心這次受邀參與在舊金山發生的設計軟體年會 - Config2023,這篇文章紀錄了今年 Figma 新釋出的功能、未來 AI 導入產品開發的觀點、我和 Figma 合作的 Creator fund 專案、以及在現場與學生、設計師、IG 創作者、Figma 成員的互動。文章的篇幅較長,建議找到一個舒適的地方,播下這份歌單,讓我帶你開箱這場實體超過 8500 人參與的國際設計年會!

  • image
  • image
  • image
  • image
  • image
  • image

✨ 年會前一天在 Moscone 會議中心報到時領取到的禮物們!

⚡ Keynote 年會主議程

本次 Config 分成兩天進行,第一天是 Figma 年度更新,第二天是設計流程導入 AI 的探討。Day 1 Config 2023 Product Launch Keynote 圍繞在 Figma 定義的 Brainstorm - Design - Build 三大環節裡的後兩個部分,並以在 Figma editor 的功能更新為主,所以可以期待的是,今年一定還會有屬於 FigJam 的更新。

image

首先登場的是 Variables (變數) ,核心概念是建立一個集中管理顏色樣式、間距樣式、數值等等抽象化屬性的系統,並且能夠快速切換介面在不同模式 (mode) 的樣貌。這是一個大家敲碗已久的功能,總算是在今年釋出了 😎 我也看到 Attalsian, Spotify 分享 在公司內使用幾個月的心得,大家不妨可以去了解這些大型產品團隊,在各自設計系統使用 Variables 的方式與產出 !

截至目前,從頭開始建立 variables 是簡單的,困難的是團隊如何應對以下情況:

  1. 如何有效率地將已經建立好的數百個 style settings 轉移成 variables

  2. 如何從一份複製 variables 到其他檔案 (目前官方並沒有這項功能)

  3. 什麼場合適合 style setting?什麼時候適合 variables?

image

接著是 Advanced prototyping,Dylan 先是在台上開了一下義大利麵怪的玩笑 (以往做到複雜 prototyping 時,我們的設計稿都會變成連連看戰場) 轉頭就宣布 — prototype 裡面能夠使用邏輯運算 (expression & condition) 了!

image

在這項更新之前,我們是很難做出如計算機、問卷表單、或是遊戲等難以完全預測使用者操作的 Prototype 的,有了邏輯運算,要作出如下的 Flappy bird 遊戲也是有可能的呢!這項大改變還只是一個開始,但已經能夠解決以前設計師需要製作數十個假畫面的窘境,而以後,我們能交給使用者測試的 prototyping 則越趨真實!

接下來是 Auto layout 的更新,有了新推出的 wrap 模式與能夠設定元件最大/最小寬高限制,整個 Auto layout 功能更加完整,與網頁排版的 CSS flexbox 相去無幾。這項功能相對進階,但也是在進行設計交付時不可或缺的細節之一。

最後,就是讓大家直接在現場看到驚呼的 Dev mode for Figma — 針對工程團隊所推出的嶄新 Figma 介面。從 design mode 切成 dev mode 後許多的操作都不一樣,介面上變綠好多(看來非常貼近工程師喜歡的顏色 😆),左側是重新設計過的 layer panel (圖層檢視)、右側則是能夠結合第三方 dev plugin 的 Inspect panel (設計交付檢視) 。檢視介面中可以看到設定過的 variables、Auto layout 規格、也可以透過 dev plugin 給予工程師需要的資訊,而 component playground 還能讓工程團隊在同一個地方就能操作元件的全部狀態 (再也不用讓工程師在茫茫畫布中辛苦找不同狀態的 component 🎉)

這項改變會是今年開發團隊在協作上需要好好調整的一大挑戰,除了在整個開發流程上需要重新思考設計 & 工程的合作模式,更大的考量是明年開始這項功能需要額外收費,而我們已經沒辦法在 design mode editor 裡面看到 Inspect panel (普通 viewer 能看到的規格會大幅度減少),所以可以確定,明年開始各位都需要為了讓工程師可以好好檢視 component 多一筆開銷 💰

整個精彩的 45 分鐘產品發表就在 CEO Dylan 與 CTO Kris Rasmussen 的帶領下順利結束,有些人覺得這些功能太過複雜、有些人敲碗的功能並沒有在這次亮相,我的觀點則是 Figma 所推出的功能的確複雜,但卻是開啟更多可能性,這也恰恰是大型產品公司開發流程上所需的。

Day 2 AI and the future of design Keynote 圍繞在 AI 如何改變人們設計 — 由 Figma 開場,定調 AI 協助人類設計的觀點、Diagram 接手,展示給人們未來設計工具裡的 AI 運作方式、再來是 Google,分享儘管未來持續改變,人類還是主導設計發生的主體、最後交給 Adobe,分享目前業界商用 AI 產生素材的實況與問題,還 demo 在 Photoshop & Adobe illustrator 使用 Firefly AI model 幾秒間產出素材的黑魔法!

image

這些講者提到 AI 時都是帶著樂觀的態度,我認為這些分享對於今年 AI 過度發展、資訊爆棚感到焦慮的讀者非常有幫助,也能給你方向去認識、嘗試這些技術。而在未來,AI 也不僅僅會是技術,更會變成 platform,從頭到尾融入在整個產品設計的流程裡,希望大家都能保持開放的心態、持續學習也就不至於會過於焦慮了 🙌

值得一提,雖然 Figma 並沒有在年會上宣布任何 AI 編輯功能,倒是宣布了更讓人興奮的新聞 — Diagram 正式被 Figma 收購了!Diagram 是由 Jordan, Vincent, Marco, Sidd, Andrew 五位產品人建立,在努力開發了各種 AI 技術兩年以後就被收購,可見他們想要打造的願景是那麼地有影響力 😎

目前 Diagram 在 Figma community 也上架了 plugin 讓人體驗 AI 協助設計,他們專注在提出 design automation / Generative AI assistant 兩種情境的 AI 想像,有機會的話務必試用!

image

🍿 兩天的 Keynote 非常精彩,推薦讀者朋友到 Youtube 觀看

📚 Creator fund

Figma 在今年三月邀請我參加新推出的計畫: Creator fund program - 透過與創作者合作,推出高品質的資源給全世界的使用者!也因為我的提案成功入選 Program,這次年會就是官方贊助我來參加。

image

🔥 從 2020 年開始製作 Figma plugin, widget, 還有設計資源,已經被超過 15 萬人使用過

這次除了展出協助在 Figma 裡面畫 flow chart / diagram 的 Simpleflow 外,最開心的就是看到跟官方合作好幾個月的 中文設計系統教材 也登場了!這個系列教學包含了 100+ 個實作技巧,涵蓋樣式系統、排版佈局、組件規劃、發佈系統和迭代維護,我希望它成為每個人從零開始建立設計系統觀念的好夥伴 🙌

  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image

我固定在早上的 Keynote 結束後、以及議程之間的休息時間,到攤位跟路過的設計師分享製作的過程、或是搜集使用過後的 Feedback。蠻有趣的,超過一半的人其實從來都沒使用過這些資源,看起來我還有很多努力的空間呢!

第一波 Creator fund 包括 Gavin 的 Figlet - Figma 裡面學程式、Netflix design Bonnie 的 Odyssey Icons … 等等數十個,而根據官方表示,目前已經有超過 500 個提案在等待篩選!真的很開心這次我的提案能夠被看見。 🙌

🎤 Config sessions 講者分享與工作坊

年會每個 session 時段會有同時五個分享在進行,因此要在活動兩天裡聽完 40+ 個議程是不可能的,只能日後回家看 recording。第一天聽了由 Rsms (第一位 Spotify designer,也同時是第一位 Figma designer) 分享的 The curious case of user interfaces,整個分享像是在細說歷史,深入探討了手勢操作的邏輯順序與衝突情況,非常適合設計師拿來建立邏輯思維!下午我印象最深刻的是由八位設計教育人帶來的一系列 Figma 實作技巧 Figma like the pros,這些講者 Femke, Joey, Molly 有些經營 YouTube 頻道、有的開設線上課程,值得追蹤持續學習 💪

  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image

Day 1 下午的 Closing 邀請到了 Airbnb CEO brian 與 Halli。Brian 是矽谷創業圈唯一一位設計師起家的 CEO,他分享在疫情這段日子準備上市,營收卻掉了 80% 的狀況,還有在面臨狀況後公司政策一系列的改革,整個談話氛圍有點激進,比起談話更像是大型 group mentoring 現場 😅

Halli 則 分享屬於自己的幾段故事,他患有肌肉萎縮患 (Muscular dystrophy) 從 25 歲開始就得依靠輪椅行動,卻能夠創辦一流設計公司 Ueno、開設以媽媽為名的餐廳,雖然演奏樂器沒有到精通卻還是出了專輯,以及持續幫助跟他有一樣疾病的數千名兒童最後獲得冰島人權獎。Halli 所訴說的每個成功,背後都是讓人感動落淚的故事,整個現場也在他說完的那一刻集體起立致上最真誠的掌聲,而年會第一天就在這溫暖人心的時刻結束。

而 Day 2 除了一般的講者議題分享,還有來自官方成員的 Deep dive 系列 — 實際帶著大家從頭開始操作本次釋出的新功能。官方會解釋以往的 Pain point 在哪以及使用新功能可以省下的時間成本,另外也會提到在未來這些功能的規劃發展 (Variables v2 看來會更加複雜!)

實作教學是由 Figma design advocate - Rogie, Miggi, Jake, Luis 等人所主持,他們在活動上不斷聆聽使用者操作遇到的狀況,帶回 Figma 內部進行討論評估未來如何做調整、也會盡可能透過 Twitter 直接跟大家做互動或 Q&A,我個人都會定期收看他們對於 Figma 新功能的影片介紹。

  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image

每年在年會上總是會看到這群最棒的 Figma 之友 🙌

🪴 Design community

這次官方在活動前一週就準備好專屬實體參與者的聯繫群組 (裡頭有著超過 4000 名與會者),除了讓大家做自我介紹、找工作還有最瘋狂的,這上面有著數不清的 hangout events — 約早上爬山、一起喝珍奶、做衣服印刷…等等,滑也滑不完,甚至年會結束後,大家還是會在上面繼續約見面。😂

  • image
  • image
  • image
  • image

年會的這兩天就好像大型網友見面會,許多人在 Twitter 上早已認識,卻也是到了年會才實際看見本人,我在現場碰到了來自 Grab 的 Sonny、Diagram 的 Vincent,因為我跟這兩位都屬於 Design engineer 的職位,根本就直接開始討論下個 Figma plugin 要做什麼 😂 。

而在 Keynote 時我恰好跟 Apple design team 的 Linda, Mark 坐在同區 (再次感謝 Figma 安排我在海景第一排),隔壁不遠處就坐著影響世界數十萬人的 Zander, Femke, Molly 等人,能坐在一起開箱 Figma 年度發表是非常難得的機會,我們也就邊聽發表,邊討論這些功能可以帶來的改變。 (順便偷問 Apple 有沒有要釋出 plugin,倒是沒問出個答案來)

除了在大型軟體公司工作的人,還認識了很多新面孔,聊天下來整體的感受是,美國這裡的軟體就業環境也還在恢復中,不少剛畢業的學生非常積極在找工作、或是也有跨域轉職來產品設計領域的人,邊看邊學習著。

  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image
  • image

年會前的晚上我也與這次受邀的 Creators 們、Figma 成員一起在 Bouche 共進晚餐。聚餐主要目的是讓與 Figma 合作推出設計資源、Plugins 的幾位創作者們可以互相認識,我在這個場合上跟 Bonnie、Gavin 相認,另外也跟 Figma 設計團隊的夥伴聊了不少有趣的事:

Jackie 是 Figma 的產品設計師,也是協助推出 Find and Replace 這項重要功能的負責人之一,據他所說 Figma designer 多半基本上都會寫程式,而寫程式正是推動產品開發的手段之一。這個文化也在去年與 Product designer - Ryan 吃飯時提過一次,當初是由他全盤整理了 Figma 介面 light / dark mode 所需要的基礎建設,並推動了整個專案的開發呢!

Noah 則是 VP of Product design (也就是給 Day 2 keynote 的講者),雖然最後到場卻一坐下來就感謝我製作的 Figma plugin - segment anything 在幫助他規劃婚禮上省了不少時間,我整個人開心到快哭了😇 之後還分享到他領養的狗狗 Izzy 是台灣米克斯的一種,頓時倍感親切,換我也跟 Noah 分享台灣的食物、風景、還有這幾年以來用 Figma 的心得。

  • image
  • image
  • image
  • image

能夠跟 Design community 形形色色的人互動是這次年會最寶貴的地方,不管是跟新朋友吃頓輕鬆晚餐、坐在一起聽講座、甚至只是在會場碰面聊十分鐘,這些都可以拓展自己的視野,去思考以前從來都不知道的事情呢!✨

🎁 Wrap up 小結

歷經四年,Config 已經從 800 人成長為超過 8000 人參與的國際設計年會,雖然每年我的角色都在改變 - 從與會者、講者到今年的創作者,不曾變過的是這個正向社群持續成長。Figma 也正因為相信著 community-led growth,在打造產品時處處圍繞著使用者的需求,才能茁壯到今天的榮貌 🌱

  • image
  • image
  • image
  • image

感謝陪伴這趟旅程的拼貼趣同事 Kat、Maggie、Morgan、Ouyang,在年會上分頭聽議程、做筆記,年會結束後也一起出遊,拜訪舊金山美麗的碼頭、咖啡廳、還有陶瓷店,也很有緣遇到 UX 四神湯夥伴、Rex、Evie、Will,讓我對於美國軟體業有更深的認識。實體聚會有它迷人的地方,這趟出來感受到世界真的很大也很有趣,跟新朋友分享自己的故事,就是自我成長最好的機會! 💫

image

謝謝你看到最後,歡迎追蹤 Designtips.today IG 帳號、訂閱 電子週報 持續收看 Figma 新技巧教學、科技產品開箱、以及背後使用的技術介紹,也歡迎跟身邊的朋友分享這份我與 Figma 合作推出的 設計系統小學堂。喔對了,有機會的話我們就在明年的 Config 上見面吧!

Back

Designtips.today

🕶