새로워진 Figma 내부 (새 탭에서 열림)

Figma의 UI3는 기능을 계속 추가하면서 복잡해진 인터페이스를 정리하고, 사용자의 작업물을 화면 중심에 두기 위한 대규모 redesign이다. 캔버스 공간을 넓히면서도 기존 사용자의 작업 습관과 전문 기능은 유지하고, 신규 사용자에게는 더 직관적인 경험을 제공하는 것이 목표다. 또한 컴포넌트, 생성형 AI, Dev Mode, Figma Slides 등 변화하는 디자인 환경에 대응할 수 있는 기반을 마련하려는 개편이다.

UI3를 시작한 배경

• Figma는 출시 후 약 10년 동안 많은 기능과 제품을 추가했지만, 기본 레이아웃은 크게 변하지 않았다.
• 기능이 누적되면서 처음에는 단순했던 인터페이스가 점점 복잡하고 부담스럽게 느껴질 수 있게 됐다.
• UI3는 Figma 출시 이후 세 번째 주요 redesign으로, 단순한 시각적 변경이 아니라 워크플로와 인터랙션 방식까지 재설계한다.
• 기존 사용자가 익숙한 작업 방식을 잃지 않으면서도, 새로운 사용자에게 더 접근하기 쉬운 인터페이스를 만드는 것이 중요한 과제였다.

UI3가 해결하려는 네 가지 문제

• UI보다 사용자의 아이디어를 중심에 두기

  • 인터랙티브 컴포넌트와 AI 지원 디자인처럼 강력한 기능이 추가되면서 UI가 작업 자체보다 눈에 띌 위험이 생겼다.
  • 기능이 부가적으로 덧붙은 느낌을 줄이고, 캔버스와 사용자의 창작물에 집중하도록 설계 방향을 잡았다.

• 신규 사용자와 전문 디자이너의 요구 균형

  • 기존 인터페이스는 처음 접하는 사용자에게 복잡하고 비직관적으로 보일 수 있었다.
  • 기능의 범위를 줄이는 것이 아니라, 기능을 이해하고 접근하는 방식을 단순화하려 했다.
  • 숙련된 사용자의 익숙한 조작 감각과 작업 효율은 보존하는 것을 목표로 삼았다.

• 변화하는 디자인 방식에 대응

  • 오늘날 디자인은 단순히 픽셀을 배치하는 작업을 넘어, 재사용 가능한 컴포넌트와 생성형 AI를 활용하는 방식으로 확장되고 있다.
  • 이에 따라 디자이너가 개별 요소뿐 아니라 더 높은 수준의 추상화된 building block을 사용할 수 있어야 한다고 보았다.

• Figma의 미래를 위한 기반 마련

  • Dev Mode를 통해 디자인과 코드를 연결하고, Figma AI로 작업 효율을 높이는 방향을 고려했다.
  • Figma Slides 같은 새로운 제품까지 포함해, 여러 도구가 일관된 제품군으로 작동할 수 있는 공통 구조를 만들고자 했다.

캔버스 공간을 넓히는 인터페이스

• 가장 먼저 Figma 캔버스의 사용 가능한 공간을 최대화하는 작업을 진행했다.
• 초기에는 패널과 속성 영역을 거의 제거하고, 마우스를 올릴 때만 UI가 나타나는 극단적인 미니멀 디자인도 실험했다.
• 사이드바가 필요할 때만 나타나는 방식도 시도했지만, 화면 구조가 지나치게 불안정해지는 문제가 있었다.
• 수백 가지 시안을 제작하고 Figma 팀 내부에서 직접 사용하며 개선 방향을 검증했다.
• 최종적으로 다음과 같은 방향을 선택했다.
  • 크기를 조절할 수 있는 패널
  • 캔버스 하단의 얇은 새 툴바
  • 상단 영역을 비워 더 넓고 여유로운 화면 구성
  • 필요할 때 패널을 열고 닫을 수 있는 구조
  • UI 전체를 숨겨 작업물에만 집중할 수 있는 기능
• 이 구조는 Figma의 여러 제품에서 공통으로 사용할 수 있어, 제품 간 전환과 확장에도 유리한 기반이 된다.

실용적인 의미

UI3의 핵심은 기능을 없애는 것이 아니라, 기능이 작업을 방해하지 않도록 배치와 노출 방식을 재조정하는 데 있다. 따라서 사용자는 평소에는 넓은 캔버스에 집중하고, 필요한 순간에만 패널과 도구를 불러오는 방식으로 작업할 수 있다. Figma를 사용하는 팀이라면 UI3의 패널 접기·크기 조절 기능과 캔버스 중심 작업 방식을 적극 활용하는 것이 효율 향상에 도움이 된다.