techlist.io
KREN
figma

코드와 디자인 사이의 긴 (새 탭에서 열림)

figmadesign-systemsprototypingcssresponsive-designauto-layoutcomponentsflexbox

Figma는 디자인의 자유로운 탐색과 코드의 구조적·재사용 가능한 접근 사이의 긴장을 없애기보다 생산적인 협업 방식으로 받아들여야 한다고 주장한다. 이를 위해 디자인 시스템을 코드의 컴포넌트 구조와 가깝게 만들고, 디자이너와 개발자가 같은 시스템을 더 효율적으로 이해하고 활용할 수 있도록 Variants, Interactive Components, 개선된 Auto Layout, Inspect Tab 등을 발표했다. 궁극적으로 Figma는 디자인과 코드를 분리된 작업이 아니라 제품을 함께 만드는 연결된 과정으로 발전시키려 한다.

디자인과 코드 사이의 긴장

  • 디자이너는 무엇을 만들지 결정하며 자유로운 시각적 탐색과 빠른 반복을 중시한다.
  • 개발자는 정해진 구조 안에서 실제 제품을 구현하며 재사용성, 일관성, 규칙을 중시한다.
  • 개발자에게 컴포넌트를 “깨는” 행위가 디자이너에게는 창의적인 실험일 수 있고, 개발자의 구조가 디자이너에게는 제약처럼 느껴질 수 있다.
  • Figma는 코드의 엄격성과 재사용성을 디자인에 적용하되, 디자인의 빠른 반복과 자유로운 탐색은 유지해야 한다고 본다.

Variants로 코드와 디자인 컴포넌트 연결

  • 프런트엔드의 하나의 컴포넌트는 상태와 맥락에 따라 여러 형태로 표현된다.
    • 예: 버튼의 기본형·보조형
    • 작은 크기·큰 크기
    • iOS·Android별 스타일
  • 기존 Figma에서는 이런 변형을 각각 별도의 컴포넌트로 관리해야 해 코드 구조와 디자인 구조가 달라졌다.
  • Variants는 같은 컴포넌트의 여러 변형을 하나의 논리적 컴포넌트로 그룹화한다.
  • 이를 통해 에셋 패널을 단순화하고, 디자인 컴포넌트를 코드의 컴포넌트 모델에 더 가깝게 표현할 수 있다.
  • 발표 당시 2020년 11월 출시 예정으로 소개됐다.

Interactive Components로 프로토타이핑 간소화

  • Variants를 사용하면 버튼이나 입력 필드의 여러 상태를 하나로 묶을 수 있다.
  • 기존에는 상태 간 전환을 표현하려면 여러 프레임과 오버레이를 수동으로 연결해야 했다.
  • Interactive Components는 Variants 사이에 프로토타이핑 상호작용을 직접 설정할 수 있게 한다.
  • 컴포넌트 인스턴스를 프로토타이핑 모드에서 즉시 동작하는 요소처럼 사용할 수 있어, 반복적인 프레임 연결 작업을 줄인다.
  • 당시 2021년 1월 출시 예정으로 발표됐다.

코드처럼 설계하는 Auto Layout

  • Auto Layout은 텍스트가 바뀌어도 버튼이나 프레임 크기가 자동으로 조정되도록 해 반응형 UI 제작을 돕는다.
  • Figma는 Auto Layout을 웹의 CSS 박스 모델과 Flexbox에 더 가깝게 발전시키려 했다.
  • 개선 사항에는 다음이 포함된다.
    • 더 단순해진 사용자 인터페이스
    • 가로·세로 양축에서 요소를 늘리는 기능
    • 방향별로 독립적인 패딩 설정
    • 내비게이션 아이콘처럼 자주 쓰이는 UI 패턴에 맞춘 간격 설정
  • 디자이너가 수동으로 위치와 크기를 조정하는 대신, 코드의 레이아웃 규칙에 가까운 방식으로 디자인할 수 있게 하는 것이 목표다.

대규모 디자인 시스템을 위한 컴포넌트 탐색

  • 수천 개의 컴포넌트를 사용하는 대규모 라이브러리에서는 정확한 이름을 기억하거나 긴 목록을 직접 찾아야 하는 불편이 있었다.
  • Instance Swap Menu가 개선되어 다음 기능을 제공한다.
    • 컴포넌트 썸네일
    • 검색
    • 키보드 단축키
  • Variants와 함께 사용하면 여러 컴포넌트를 일일이 찾는 부담을 줄이고, 대규모 디자인 시스템에서도 적절한 인스턴스를 빠르게 교체할 수 있다.
  • 이 기능은 글 작성 당시 바로 사용할 수 있는 기능으로 소개됐다.

Inspect Tab으로 개발자 전달 정보 강화

  • 기존 Code 패널을 대체하는 Inspect Tab은 개발자가 구현에 필요한 정보를 더 쉽게 확인하도록 설계됐다.
  • 선택한 레이어의 이름을 상단에 표시해 디자이너와 개발자가 어떤 요소를 구현하는지 명확히 확인할 수 있다.
  • 다음과 같은 디자인 속성을 구분해 보여준다.
    • Variants
    • 색상
    • 그림자
    • 콘텐츠
    • 타이포그래피
    • 테두리
  • 개별 값을 클릭해 클립보드로 복사할 수 있으며, 여러 key:value 값으로 구성된 코드 조각도 한 번에 복사할 수 있다.
  • 디자인 명세를 별도로 정리하거나 개발자가 값을 수동으로 옮기는 과정을 줄여 구현 전환을 효율화한다.

Figma의 방향은 디자인을 코드처럼 획일화하는 것이 아니라, 코드의 구조성과 재사용성을 디자인 시스템에 도입하면서도 디자이너의 창의적 탐색을 보존하는 것이다. 실무에서는 Variants로 상태와 스타일을 체계화하고, Auto Layout으로 레이아웃 규칙을 정의하며, Inspect Tab을 통해 개발자에게 구현 정보를 명확히 전달하는 방식이 효과적이다.