Config 2024 리뷰 : Figma가 보여준 AI 시대
Figma CONFIG 2024 컨퍼런스가 26-27일 모스콘 센터에서 열렸다. 가장 화제가 됐던 AI를 이용한 UI 디자인, 프로덕트를 제작하는 여러 작업 환경을 고려한 새로운 피그마 인터페이스 UI3, 피그마 슬라이드를 공개했다. 조만간 간단한 프롬프트만으로 프로토타이핑까지 완벽하게 출력될 날이 머지 않아 보인다.
Figma AI
1. 간단한 텍스트 프롬프트로 UI 생성
Action 패널의 Make Design으로 텍스트 프롬프트에서 UI 레이아웃과 컴포넌트 옵션을 빠르게 생성할 수 있다. 프로덕트의 방향성을 탐색하고 시작하는 초안 Draft를 제공한다. 더 나아가 조직의 디자인 시스템을 활용하여 간단한 프롬프트로 모든 화면을 생성할 수 있는 날이 머지 않은 것 같다.
2. AI 기능 번들 제공
자동화할 수 있는 반복적인 작업을 효율적으로 작업할 수 있도록 텍스트 복사, 이미지 생성, 변형, 프로토타입 자동 연결, 클릭 한 번으로 레이어 이름 변경을 제공한다.
3. 시각적 검색 기능
아이콘에서 전체 디자인 파일에 이르기까지 접근 권한이 있는 팀 파일에서 유사한 디자인을 가져온다. 또한 개선된 Asset search를 통해 명확한 검색어로 검색하지 않더라도, 검색 쿼리의 맥락을 이해하고 탐색하기 때문에 더 쉽게 Asset을 찾는 것이 가능해졌다.
간단한 프롬프트를 통해 UI 레이아웃과 컴포넌트 옵션을 생성한다.
텍스트를 변경하거나 재사용하거나 번역할 수 있다.
UI 3
Figma의 세 번째 인터페이스 디자인도 공개되었다. Figma 측에선 더 많은 혁신을 하고자 했으나, 전세계 사용자들의 멘탈모델을 고려해서 기존 워크플로우 패턴을 최대한 고려하여 개선한듯하다. 전체 메뉴는 좌측 패널에서 제공하며, 툴바는 레이어 동작 / AI기능 / Dev mode 전환이 표시된다. 상단 툴바가 사라지고, 불필요한 패널을 접을 수 있게하여 작업 중인 프로덕트에 더 집중할 수 있도록 업데이트되었다.
Figma Slides
1. 실시간 협업
기존 작업과 마찬가지로 실시간 협업이 가능하다.
2. AI를 통한 일관된 톤으로 문구 수정
AI를 통해 문구들의 톤을 일관되게 수정할 수 있다.
3. Figma에서 만든 움직이는 프로토타입 직접 삽입
프로토타이핑을 만들어, 삽입할 수 있기 때문에 별도로 영상을 제작할 필요가 없다.
올해 베타 버전은 무료로 사용할 수 있지만, 2025년 초부터 사용자 당 월 3$ 혹은 5$ 무료 / 유료 플랜으로 제공된다. 꽤 활용도가 높을듯하다.
Dev mode 업데이트
처음 나왔을 때도 혁신이라고 느꼈지만, 한층 더 업그레이드 된 기능으로 개발자 모드가 돌아왔다. 핸드오프가 한 순간이 아니라는 말이 인상깊다. 디자인과 코드가 진화함에 따라 앞뒤로 이동하는 반복적이고 비선형적인 프로세스라고 피그마는 말한다. 새로운 개발자 모드는 Focus view와 디자인을 개발 완료로 표시하는 기능이 추가되어, 개발자가 협업자와 동기화를 유지하면서 동시에 흐름을 유지할 수 있다.
1. Ready for Dev View
목록에서 업데이트 항목을 검색, 필터링하고 분석하며 누가 언제 무엇을 업데이트했는지 확인할 수 있어 전체적인 맥락을 모두 파악 가능하다.
2. Focus View
개발자가 방해 요소를 차단한 채, 빌드할 준비가 된 것만 볼 수 있다. 최근 디자인 업데이트 전의 View 스냅샷이 포함된 모든 디자인 변경 사항과 상태 업데이트를 볼 수 있다. 빌드를 마치면 개발자는 디자인을 '완료'로 표시하여 루프를 닫는다.
3. 업데이트 메모를 통한 알림
디자이너가 Ready for Dev로 표시된 디자인을 변경하면, 개발자에게 최신 알림과 정보를 제공한다. 또한 변경 사항에 대한 메모를 남길 수 있어 어떤 업데이트가 필요한지 명확하게 알 수 있다.
Auto Layout 업데이트
Figma에서 가장 유용한 기능 중 하나인 오토 레이아웃이 업데이트됐다. 이형 대응이 필요할 때 더 예측가능하게 만들고, 필요하지 않을 때에는 해당 조건을 무시할 수 있도록 했다. 전체 디자인 요소에 여러 프레임의 오토 레이아웃이 필요할 때를 제안하며 그 프레임을 만들어줘서, 프레임을 만드는 시간을 절약할 수 있다. 또한 컨트롤을 통해 오토 레이아웃을 무시한 상태에서 디자인을 자동 레이아웃 프레임으로 끌어, 절대 위치 값을 설정할 수 있다. 추가적으로 프로토타이핑에서도 반응형 크기 조절이 가능해졌다.
-
참고 : https://www.figma.com/ko-kr/blog/config-2024-recap/#updates-to-dev-mode-from-design-ready-to-dev