{"id":26658,"date":"2024-06-27T08:40:13","date_gmt":"2024-06-26T23:40:13","guid":{"rendered":"https:\/\/designcompass.org\/?p=26658"},"modified":"2024-06-30T17:16:59","modified_gmt":"2024-06-30T08:16:59","slug":"config-2024","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2024\/06\/27\/config-2024\/","title":{"rendered":"Config 2024: Now drawing UI with Figma AI"},"content":{"rendered":"<p>Figma Conference CONFIG 2024 was held at Moscone Center from the 26th to the 27th. As the embodiment of user-centered design, they released great features for designers. They revealed AI-based UI design that caught everyone&#039;s attention, a new Figma interface for various work environments for digital product creators, and Figma Slides, which replaces Google Presentations.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Figma AI<\/h3>\n\n\n\n<p>Now you can create a design draft by simply entering a text prompt. Describe the app you want, and it will instantly create a draft with multiple components. Over time, you will be able to create UIs using a design system like Google\u2019s Material 3. Organizations will be able to create UIs much faster with their own design system.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-1024x576.png\" alt=\"\" class=\"wp-image-26660\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-06.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>You can also search for files by image. It understands the context of your search terms and finds information close to what you want, even if the name doesn&#039;t match exactly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-1024x1024.png\" alt=\"\" class=\"wp-image-26659\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-04.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>It adds features that streamline your workflow, such as filling in repetitive content with just a click and drag, automatically unifying layer names, translation, shortening\/rewriting text, erasing image backgrounds, and creating images.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-1024x768.png\" alt=\"\" class=\"wp-image-26661\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-1024x768.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-300x225.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-768x576.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-1536x1152.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-924x693.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-671x503.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-1320x990.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08-600x450.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-08.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>They stated that they did not train it with customer files or customer data using Figma, but rather fine-tuned it using the interface of publicly available free community files.<\/p>\n\n\n\n<p>AI-related features will be free during the beta period in 2024. It has stated that usage restrictions may be introduced. Pricing guidance will be provided at the official launch.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">UI3<\/h3>\n\n\n\n<p>The UI has been completely changed. Each panel is expressed as if it is floating in the air with margins. Unnecessary panels can be collapsed depending on the context in which the user is working on the canvas. This is a structure to focus more on the design itself on the canvas. The width of the window can also be adjusted left and right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-1024x576.png\" alt=\"\" class=\"wp-image-26662\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-10.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-1024x576.png\" alt=\"\" class=\"wp-image-26663\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-12.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>The top toolbar, which was distinguished by a dark color, has been split. The entire Figma menu and information about the file are included in the left navigation panel. The toolbar displays actions for controlling layers, AI functions, and Dev Mode switching. Information related to account information, prototypes, and sharing is displayed in the right property panel. The ability to adjust detailed values with a slider and the Dev Mode key color change are attractive.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-1024x576.png\" alt=\"\" class=\"wp-image-26664\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-14.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>We will be slowly rolling out the UI for adaptation, and eventually all users will be on UI3. You may still use the old UI during the transition period.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Figma Slides<\/h3>\n\n\n\n<p>Figma Slides is the presentation tool every designer has ever wanted to create, and it&#039;s powerful enough to replace Google Slides.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-1024x576.png\" alt=\"\" class=\"wp-image-26665\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-1024x576.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-300x169.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-768x432.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-1536x864.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-924x520.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-671x377.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-1320x743.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16-600x338.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-16.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>Collaborate with your team in real time with ease, and let AI adjust text to match your tone. Insert interactive prototypes created in Figma directly into your slides. No more fuss about creating videos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-1024x1024.png\" alt=\"\" class=\"wp-image-26666\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-1024x1024.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-300x300.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-150x150.png 150w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-768x768.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-1536x1536.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-924x924.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-671x671.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-1320x1320.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-600x600.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18-100x100.png 100w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-18.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"819\" src=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-1024x819.png\" alt=\"\" class=\"wp-image-26667\" srcset=\"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-1024x819.png 1024w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-300x240.png 300w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-768x614.png 768w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-1536x1229.png 1536w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-924x739.png 924w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-671x537.png 671w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-1320x1056.png 1320w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20-600x480.png 600w, https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-20.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">\u00a9Figma<\/figcaption><\/figure>\n\n\n\n<p>It will be available in open beta starting Wednesday. It will be free during the beta period, but after the official launch in 2025, it will be available in free and paid plans starting at $3 to $5 per user.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">More and Sources<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/config.figma.com\/\">https:\/\/config.figma.com\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.figma.com\/ko-kr\/blog\/config-2024-recap\/\">https:\/\/www.figma.com\/ko-kr\/blog\/config-2024-recap\/<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>","protected":false},"excerpt":{"rendered":"<p>\ud53c\uadf8\ub9c8 \ucee8\ud37c\ub7f0\uc2a4 CONFIG 2024\uac00 26\uc77c\ubd80\ud130 27\uc77c\uae4c\uc9c0 \ubaa8\uc2a4\ucf58 \uc13c\ud130\uc5d0\uc11c \uc5f4\ub838\uc2b5\ub2c8\ub2e4. \uc0ac\uc6a9\uc790 \uc911\uc2ec \ub514\uc790\uc778\uc758 \ud654\uc2e0\ub2f5\uac8c \ub514\uc790\uc774\ub108\ub97c \uc704\ud55c \uba4b\uc9c4 \uae30\ub2a5\uc744 \ucd9c\uc2dc\ud588\uc2b5\ub2c8\ub2e4. \ubaa8\ub450\uc758 \uad00\uc2ec\uc744 \ubaa8\uc740 AI\ub97c \uc774\uc6a9\ud55c UI \ub514\uc790\uc778, \ub514\uc9c0\ud138 \ud504\ub85c\ub355\ud2b8 \uc81c\uc791\uc790\uc758 \ub2e4\uc591\ud55c \uc791\uc5c5 \ud658\uacbd\uc744 \uc704\ud55c \uc0c8\ub85c\uc6b4 \ud53c\uadf8\ub9c8 \uc778\ud130\ud398\uc774\uc2a4, \uad6c\uae00 \ud504\ub808\uc820\ud14c\uc774\uc158\uc744 \ub300\uccb4\ud558\ub294 \ud53c\uadf8\ub9c8 \uc2ac\ub77c\uc774\ub4dc\ub97c \uacf5\uac1c\ud588\uc2b5\ub2c8\ub2e4. \ud53c\uadf8\ub9c8 AI \uc774\uc81c \ud14d\uc2a4\ud2b8 \ud504\ub86c\ud504\ud2b8\ub9cc \uc785\ub825\ud558\uba74 \ub514\uc790\uc778 \ucd08\uc548\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6d0\ud558\ub294 \uc571\uc744 \uc124\uba85\ud558\uba74 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":26669,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,621],"tags":[195,249,370,613],"class_list":["post-26658","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news","category-service","tag-195","tag-249","tag-ui","tag-ai"],"acf":[],"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2024\/06\/config2024-01.png","publishpress_future_action":{"enabled":false,"date":"2026-05-21 13:13:07","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/26658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=26658"}],"version-history":[{"count":0,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/26658\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/26669"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=26658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=26658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=26658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}