figma

Figma on Figma: 최신 (새 탭에서 열림)

Figma는 디자이너 중심 도구에서 개발자·PM·제품팀 전체가 사용하는 생태계로 확장한 현실을 반영해 브랜드의 시각 언어를 재정비했다. 정적인 커서와 굵은 검은 윤곽선 중심의 기존 표현 대신, 공동 창작과 다양한 역할을 상징하는 프리미티브·색상·타이포그래피·모션을 도입했다. 새 브랜드는 누구나 아이디어를 현실로 만들 수 있는 협업 공간으로서의 Figma를 표현한다.

디자이너 도구에서 제품 개발 생태계로

  • 지난 10년 동안 Figma는 순수한 디자인 도구에서 개발자, 제품 관리자, 전체 제품팀을 지원하는 플랫폼으로 성장했다.
  • 기존 브랜드는 벡터 그래픽의 문법에 가까웠다.
    • 정적인 마우스 커서
    • 굵은 검은 외곽선
    • 디자인 작업 자체에 초점을 둔 시각 표현
  • 새로운 정체성은 아이디어 구상부터 개발, 협업, 완성까지 여러 사람이 참여하는 제품 제작 과정을 담는 데 초점을 맞췄다.

새 시각 언어를 구성하는 네 가지 기반

  • 다목적 프리미티브
    • 공동 창작에 참여하는 다양한 사람과 역할을 상징한다.
    • 특정 직군이나 작업 단계에 종속되지 않는 기본 형태로 활용된다.
  • 동적인 구성
    • 만들고, 조정하고, 협업하는 다양한 작업 방식을 표현한다.
    • 정적인 결과물보다 제작 과정의 움직임과 상호작용을 강조한다.
  • 확장된 색상 팔레트
    • 더 생생하고 폭넓은 색을 사용한다.
    • 색상 변수를 활용해 다양한 매체와 상황에 쉽게 적용할 수 있도록 설계했다.
  • 통합된 모션 원칙
    • 창작 과정에서 발생하는 행동과 흐름을 애니메이션으로 표현한다.
    • 브랜드의 움직임이 단순 장식이 아니라 작업 과정과 연결되도록 했다.

Figma 전용 서체 체계

  • Figma는 Grilli Type과 협업해 독자적인 그로테스크 서체인 Figma Sans를 제작했다.
  • 브랜드에는 다음 네 가지 서체가 포함된다.
    • Figma Sans: 일반적인 브랜드 커뮤니케이션과 본문
    • Figma Sans Condensed: 더 압축된 인상과 공간 효율이 필요한 표현
    • Figma Mono: 개발, 코드, 정밀한 제작 작업을 연상시키는 표현
    • Figma Hand: 브레인스토밍과 팀 협업처럼 인간적인 분위기를 전달
  • 서로 다른 서체를 조합해 디자인, 엔지니어링, 협업 등 다양한 역할과 작업 방식을 표현한다.

샌드박스에서 시작한 탐색

  • Figma Brand Studio는 사람들이 Figma를 사용하는 전 과정을 살펴보며 탐색을 시작했다.
    • 브레인스토밍
    • 초기 아이디어 구상
    • 요소 검사
    • 최종 결과물의 세부 조정
  • 팀은 여러 활동이 하나의 공유 공간에서 동시에 이루어지는 모습에 주목했다.
  • 이 개념은 사람들이 같은 공간에서 각자 놀고 만들며 상호작용하는 parallel play와 연결됐다.
  • Figma 캔버스를 사람들이 함께 만들고 실험하는 장소로 보고, 놀이터에서 시각적 영감을 얻었다.
    • Isamu Noguchi의 놀이터와 조경 작품
    • Mitsuru Senda의 다채로운 패널형 놀이터
    • 정교한 타일 작업과 인프라 구조
  • 초기에는 놀이터의 형태를 직접적으로 차용했지만, 최종적으로는 이를 단순한 모방이 아니라 공동 창작과 실험을 상징하는 추상적 시각 언어로 발전시켰다.

실용적인 시사점

브랜드 리뉴얼은 로고나 색상만 바꾸는 작업이 아니라, 사용자의 역할과 제품이 지원하는 행동 범위를 다시 정의하는 과정이다. 특히 제품이 여러 직군의 협업 도구로 성장했다면, 시각 체계도 결과물뿐 아니라 아이디어 구상·소통·개발·수정 같은 전체 제작 흐름을 표현하도록 확장하는 것이 효과적이다.