Figma Config 2024 리뷰

🧐 Summary

1️⃣ 지난 6월 26~27일, Config 2024에서 Figma의 새로운 기능들이 대거 공개되었습니다.

2️⃣ AI를 활용한 키 스크린 제안 등이 가능한 Figma AI, 다양한 기능들이 추가되며 복잡해지던 UI를 깔끔하게 정리한 Figma UI3, Figma 내에 프리젠테이션용 슬라이드 기능을 추가한 Figma Slides 등이 소개되었습니다.

3️⃣ UX 디자이너들이 실무에서 겪던 현실적인 니즈들을 해결해주는 다양한 기능들이 공개되어, 새로운 Figma에 대한 호평과 기대가 가득합니다. 

안녕하세요, 구독자님. 업무하시면서 Figma 많이들 사용하시죠? 오늘은 지난주 샌프란시스코에서 열린 Figma Config 2024에서 발표된 내용들을 공유드리려 합니다. 

크게 Figma AI, Figma UI3, Figma Slides가 공개되었구요, 그 외의 개선사항이나 개발자 모드 업데이트 내용들도 함께 발표되었습니다. 특히 인상적이었던 부분은 Figma AI였죠. 오늘은 주요 내용들과 시연 영상들 위주로 설명드릴게요.

Figma AI - Think Bigger and Build Faster

Figma AI는 이렇게 세 가지 니즈에 집중해서 만들어졌다고 합니다. 디자이너들이 제일 처음 작업을 시작할 때 빈 캔버스에서부터 시작하는 것이 어렵잖아요. 그 시작 포인트를 어떻게 도와줄 지에 대한 고민이 Get started였어요. 그리고 디자이너들이 필요한 것을 빠르게, 효과적으로 찾을 수 있게 도와주고자 하는 Find what you need. 그리고 마지막으로 작업하는 중간에 맥락이 끊기지 않도록 앱 간 전환 등을 최소화 할 수 있게 도와주는 Stay in the flow였습니다.

Make Designs

Get started를 가장 잘 도와주는 기능이라고 볼 수 있죠. 다양한 AI 기능 중 가장 눈길을 끌었던 것은 Action 패널 내의 Make Designs였습니다. 생성형 AI를 이용해 프롬프트만으로 UI 화면을 만들어주는 툴들은 이미 다양하게 나왔고 저희도 소개드린 적 있죠. 하지만 이 기능이 Figma에 통합되었다는 것은 UX 디자이너들에게 엄청난 접근성을 부여한 것과 같습니다. Figma 내에서 프롬프트로 UI 화면 초안을 만들어 낼 수 있고, 바로 편집이 가능하기 때문이죠. 지금까지 공개된 베타 테스터들의 영상을 봐도 바로 실무에서 초안으로 활용할 수 있을 정도의 퀄리티를 보여주고 있습니다.

데모 영상에서 ‘A pizza finder app with a map and a card for a selected restaurant’라는 프롬프트를 통해 얻어진 결과물이 바로 아래 화면입니다.

제공된 결과물의 color theme이나 컴포넌트들의 round값, primary color, 폰트 등도 아주 쉽게 변경할 수 있습니다. 

Visual Search

또 하나의 유용한 기능 Visual Search. 스크린샷을 가져와서 Visual Search 기능을 활용하면 유사한 이미지를 찾아줍니다. 이를 선택하면 바로 Figma 파일로 쉽게 편집할 수 있어요. 또한 검색어로도 Visual Search가 가능하기 때문에 시안을 만들 때 더 이상 이미지 검색을 위해 앱 간 전환을 하거나 시간을 낭비할 필요가 없습니다.

아래는 데모에서 Uber 스크린샷을 붙여넣고 Search similar 기능을 사용했을 때 나온 결과물입니다. 유사한 레이아웃의 화면들을 찾아주죠. 그리고 그 중 하나를 고르면 바로 작업 가능한 컴포넌트들로 이루어진 피그마 파일을 사용할 수 있습니다.

Rename Layers

작업하다 보면 동일한 컴포넌트를 계속 복사해서 붙여넣고 사용하다가 레이어들이 마구 쌓이고 정리가 안되어 불편했던 경험 다들 있으시죠? 특히 리스트 만들때 많이들 이런 상황이 발생하잖아요. Rename Layers 기능을 사용하면 AI가 각 컴포넌트를 분석해서 적합한 이름으로 레이어 이름을 변경해줍니다.

또 동일한 리스트 컴포넌트 여러 개를 붙여넣고 Replace content 기능을 활용하면 리스트 내 텍스트를 적절히 변경해줍니다. 연락처 리스트라면 여러가지 이름들을 넣어주고, 레시피 리스트라면 재료 이름과 용량을 적당히 변경해주는 식이죠. 별 거 아니라고 생각할 수도 있지만 정말 디자이너들이 업무할 때 불편한 점들을 잘 들여다보고 기능들을 개발했구나 하는 느낌이 들어서 감동적이더라구요.

Make Prototype

주요 화면들을 만들어두고 Make prototype 기능을 활용하면 화면을 분석하여 프로토타입을 바로 만들어줍니다. 데모에 나왔던 아래 화면처럼요. 주요 화면에 중첩되는 컴포넌트들을 이해하고 연결시켜주는 것인데요, 간단한 플로우만 보여주기에는 무리가 없는 수준이죠.

이 날 소개된 모든 Figma AI 기능은 Figma UI3와 함께 제한된 베타 생태이며, 추후 점진적으로 출시될 예정이라고 합니다. 너무 멋지고 유용한 기능들이 많아서 정말 빨리 써보고 싶다는 생각이 들었는데요, 한편으로는 내가 과연 이 기능들을 정말 실무에서 활용할 수 있을까 하는 의문도 들었어요. 사실 많은 대기업들은 각 회사만의 디자인 시스템이 정립되어 있잖아요. 정해진 컴포넌트들을 사용해야 하는데 과연 이 AI 기능을 우리 회사에서도 활용할 수 있을까 하는 우려가 있었습니다. Figma 측에서도 동일한 고민이 있었나봐요. Figma AI 기능 소개 중 마지막 부분에 지금 당장은 불가능하지만, 추후 각 회사의 디자인 시스템을 활용해서 이 기능들을 사용할 수 있도록 개발 중이라는 코멘트와 함께, 현재 오픈되어 있는 구글의 material design을 활용한 시안도 공개하더라구요. 가능해진다면 정말 작업 시간이 많이 단축될 것 같습니다.

Figma UI3 - Reducing complexity

Figma가 급속히 성장해오면서 정말 많은 기능이 늘어났고, 화면 복잡도는 높아질 수 밖에 없었죠. 그래서 이번에는 이 화면을 정리하고 복잡도를 줄이는 것에 집중했다고 합니다. 아래 화면을 보시면 툴바가 화면 중앙 하단으로 간 것을 볼 수 있죠. 사용자의 컨텐츠를 중앙에 놓고 집중도를 향상시키는 것이 목표였다고 합니다. 

또한 Suggest auto layout 기능을 활용해 반응형 오토 레이아웃을 자동으로 제안받을 수 있게 되었습니다. 반대로 auto layout 기능을 해제하고 싶으면 ctrl 버튼을 누르면 되기에 쉽게 다양한 형태의 컴포넌트들을 테스트해 볼 수 있습니다.

Figma Slides

이제 Figma에서 프리젠테이션용 슬라이드를 만들 수 있습니다. Figma로 시안 만들고, 보고 준비할 때 Figma에서 바로 슬라이드 만들던 분들 많으시죠? Figma Slides를 통해서 이제 Figma로 만든 프로토타입을 바로 슬라이드 내에서 시연할 수 있고, PPT처럼 슬라이드를 쉽게 확인하고 수정할 수 있게 되었습니다. 협업 기능이 잘 제공되어 공동으로 슬라이드를 만들고 공유하기도 쉬워졌구요, 템플릿도 다양하게 제공된다는 장점이 있네요. 또한 슬라이드에 사용된 텍스트의 톤을 AI를 이용해 조절할 수도 있어요. 예를 들면 더 간략하고, 더 프로페셔널하게 말이죠.

무엇보다 디자이너들에게 익숙한 Figma UI와 그 기능들을 그대로 슬라이드에서 활용할 수 있다는 것이 큰 장점이겠죠. 

이번 Config 2024에서 Figma는 정말 많은 변화를 보여주었습니다. 청중들의 반응도 아주 뜨거운 것을 확인할 수 있었구요. 디자이너들이 일상에서 정말 필요로 하던 부분들을 잘 짚어서 개선한 것 같아요. 많은 사람들이 올해 Config를 보고난 후 Figma가 Adobe에 인수되지 않아서 얼마나 다행인지 모른다는 얘기들을 하더라구요. Adobe는 최근 포토샵 사용자들의 컨텐츠를 AI 트레이닝에 사용할 수 있다는 약관으로 많은 이들의 반발을 샀는데요, 이와 대조되는 행보를 보이는 Figma는 추후 사용자 컨텐츠를 Figma AI 트레이닝에 사용하는 것을 옵션으로 설정해 사용자들의 데이터를 보호하겠다고 밝혔습니다. 

이번에 공개된 기능들은 당분간 베타로 무료 사용이 가능하다고 하니, 다들 사용해보시길 바래요. 조금만 익숙해지면 업무에 큰 도움이 될 것 같아서 저도 아주 기대가 큽니다.

그럼 저희 뉴스레터는 다음주 월요일 또 새로운 소식들로 찾아뵐게요. 비 소식이 가득하지만 남은 한 주 잘 보내셔요!

Reference

https://www.figma.com/whats-new/

https://www.youtube.com/live/n5gJgkO2Dg0?si=4fqgpyHH67B1oH6Z

Inspire X에 의견 보내기