2023 Config — Keynote Speech - Quick note (中英版）
Organize the notes for the Config 2023 First Keynote as soon as possible. I took notes while listening, so please leave a comment and let me know if you have any questions.
The following are the main highlights: Design system, Prototyping, and Production.
Design system
Although Design Tokens will not be released this year, there will be a powerful Variables feature that can help everyone be more effective in their daily working routine.
Local variables
You can set Local Variables in the right column after selecting an object. The content of all layers can be customized.
當選擇一個物件後，就可以在右側欄設定 Local Variables，所有 Layer 的內容都可以進行設定。
Color modes
There are multiple fields that can be used in the color setting variables, the most common of which is Light mode/Dark mode.” You can add more variables if your own application allows users to pick colors. There is a dropdown option in the Color modes area on the right side of the Layer section.
在顏色設定的變數中，也有多個欄位可以使用，最常見的就是有 Light mode/Dark mode，如果自己的 APP 中可以讓使用者進行選擇顏色，也可以加上更多的變數。在右側欄的 Layer section, 可以看到 Color modes 有下拉選單可以進行設定。
Densities
When designing a table, you may select Compact/Comfortable/Spacious as the mode. You don’t need to develop numerous components because you are able to configure it within one component.
當製作表格時，可以設定 Compact/Comfortable/Spacious模式，不需要做多個，可以在一個 Component 內做設定，很方便。
Global localization
Designing international products and establishing up different languages are also significant challenges. It takes multiple pages to display different effects, but Localization allows for customization.
設計跨國產品時，對於多國語言的設定也是很大的痛點，要多個頁面去展示不同的效果，透過 Localization 可以進行選擇。
Drag the designed page into the frame to set the values, and you’ll see the effect immediately. Even when switching from mobile to tablet, it just takes a second to complete the transition.
將設計的頁面拉進設定數值的 Frame 中，可以快速的看到效果。甚至是在Mobile 轉換至 Tablet 的情境中，也是一秒可以轉換成功。
If you are unhappy with the conversion result, you can change the maximum/minimum width or use the Wrap function to arrange Auto Layout in dual columns.
轉換後若覺得不是很滿意效果，可以去調整最大/最小寬度，或是使用 Wrap功能將 Auto Layout 進行雙欄的排法。
Prototyping with variables
The spider web is the most frustrating problem in Figma prototyping!” When all pages are linked, the following horrible situation occurs. (I’m sure everyone has been there.
在 Figma 裡做 prototype 最大的痛點就是蜘蛛網！當所有頁面都進行連結後，會變成以下這種可怕的狀況。（大家一定都有經歷過）
Local Variables
I used to use Protopie since it allowed me to tweak variables to make the prototype look more realistic. The scenario of adding items to the shopping cart is demonstrated in this sample, where the quantity of items, amount, and contents of the shopping cart may all be adjusted as variables.
我很習慣使用 Protopie，主要就是可以設定變數讓 Prototype 動起來更真。這裡 Demo 的是商品加入購物車的情境，可以把商品數量、金額、購物車物量都設為變數。
When a user clicks once, the Count increases by one.” More dynamic designs can be made by including variable parameters, such as allowing users to increase or decrease the number of products in their shopping cart, which affects the final price. When the shopping cart is empty, the user sees an empty shopping cart screen.
當使用者做一次點擊，就可以 Count+1，加入變數的設定，就可以做出更多互動的設計，像是：”使用者在購物車裡進行增減，都可以影響到最終價格，假設購物車清空，也可以看到購物車的空畫面”
Inline viewer
Previously, clicking Preview would redirect you to a new page. With the Inline viewer, you can now make changes while seeing the results.
以前只要按了 Preview，就會切到新頁面，現在有了 Inline viewer，能一邊進行調整一邊看效果。
Remember to attend tomorrow’s two talks if you want to learn more about Variables deep dive.
若想知道更多關於Variables deep dive，記得鎖定明天的兩場演講。
Production (Dev Mode)
According to Figma’s CTO, Figma does not make developers feel at home.” When they open a file, they may find a variety of designs and become confused or unsure of which is the most recent file that needs to be developed.
Figma的CTO表示Figma沒有讓developers感到很自在，有時候是因為開檔案的時候看到滿滿的設計，時常會迷路或是不知道哪裡是最新的檔案需要被開發。
Mark as ready for dev
After you’ve finished the design draft, click ‘Mark as ready for dev’ to see it clearly in Dev mode.
當設計完稿後，可以點擊”Mark as ready for dev”，接著就可以在Dev mode看得很清楚。
Curation and navigation
In the bottom left corner, there is a navigation bar that allows you to rapidly find pages by displaying the most recent update time.
左下角有一個可以快速找到頁面的導引列，會列出最近更新的時間。
Compare changes
Developers can see the changes in the design using visual tools, and there are additional settings for each layer below. Even the Overlay mode makes it easier to see the distinctions between the two designs. This greatly accelerates the speed of design and development.
開發者可以使用視覺化的工具去看設計的改變，下方也有各個圖層的參數。甚至有Overlay mode可以看得更清楚兩個設計的差異。這大大加速的設計與開發的速度與過程。
Developers can now comprehend Padding/Margin/Border in more detail than previously.
對於Padding/Margin/Border的掌握也比以前更可以看到細節。
Unit switch (px/rem/set unit scale…)
If you’re working on a website, you’ll notice that engineers use different units than you. You can now pick between Rem and more options in this update.
如果你在做Web開發，會發現工程師跟你用的單位不同，這次的更新可去選擇Rem或是做更多設定。
Variables Inspection/Component playground
Once you open the component playground, you can see additional options, such as Default/hovered/pressed/inactive settings, removing the need for designers to build them individually in Spec and then write them into a document.
開發時對於變數的掌握度也變高，打開playground可以看到更多設定，像是Default/hovered/pressed/inactive的設定，不需要再透過Spec去額外定義寫成文件。
Dev resource : Integration
Many third-party tools, such as Github, JIRA, amina, VSCode, and others, have been integrated.
整合了許多的第三方程式，像是Github、JIRA、amina、VSCode等等。
The details of the main Design system, Prototyping, and Production are provided above. The last two improvements are the File browser, which can search for files more rapidly and in a more organised manner, and the font preview tool, which has also been launched!
以上是主要Design system, Prototyping, and Production的細節，最後兩個更新是File browser，可以更快速且有結構的找尋檔案，並且字型Preview的功能也出來了！
Font-picker
THE FUTURE NEEDS MORE THINKERS AND BUILDERS
This is a brief note from this year’s 2023 config keynote. I hope it can be of assistance if you need it. Thank you for watching, and don’t forget to applaud if you enjoyed it. Your encouragement inspires me to keep creating and sharing:)
以上是今年2023 config keynote的快速筆記，希望可以幫助到需要的你，謝謝你的觀看，如果喜歡也別忘了給予掌聲，你的每一個掌聲都是我持續寫作分享的動力：）
Hello, I’m Patty. I have over 8 years of experience in UI/UX and currently work as a Sr. Product Designer at Yahoo! Global Design Team. I am an outgoing and adventurous designer who enjoys trying new things. Besides my work, I am also a travel blogger and a volunteer at the Animal Welfare Association. If you would like to communicate about anything, feel free to email me at pattydraw@gmail.com :) English calligraphy is also one of my interests. You can find me on Instagram at https://www.instagram.com/pattyhandmade/.
