두 매개변수 구조 (새 탭에서 열림)

Figma는 변수(variables)와 컴포넌트 속성(component properties)을 서로 다른 구조로 구축했지만, 두 시스템이 같은 레이어 속성에 동시에 연결될 수 있어 렌더링 불일치와 학습·유지보수의 어려움이 발생했습니다. 이를 해결하기 위해 두 기능을 하나의 파라미터 아키텍처로 통합했고, 그 결과 사용자 경험의 일관성, 개발 속도, 향후 제품 확장성을 개선했습니다.

파라미터 시스템의 역할

• Figma의 반응형 디자인, 타이포그래피, 애니메이션, 상태 머신 등은 값을 한 곳에서 설정하고 여러 요소에 전파하는 파라미터 개념을 기반으로 합니다.
• 값이 변경되면 해당 값을 참조하는 레이어의 속성이 즉시 갱신됩니다.
• 변수와 컴포넌트 속성은 모두 “한 번 설정하고 여러 곳에 적용하는” 기능이지만, 서로 다른 문제를 해결하기 위해 별도로 발전했습니다.

컴포넌트 속성: 범위가 제한된 파라미터

• 컴포넌트 속성은 2022년에 출시됐으며, 디자인과 코드 사이의 간극을 줄이기 위한 목적이었습니다.
• 특정 컴포넌트 내부 레이어에만 적용되는 범위 제한형 파라미터(scoped parametrization) 를 제공합니다.
• 디자인 시스템 작성자는 버튼 등의 컴포넌트에 Boolean, 텍스트, 인스턴스 교체 등의 속성을 정의할 수 있습니다.
• 사용자는 컴포넌트 내부 구조를 직접 훼손하지 않고, 공개된 속성만 수정할 수 있습니다.
• 코드에서 컴포넌트의 props를 사용하는 방식과 유사해 디자이너와 개발자가 동일한 mental model을 공유할 수 있게 됐습니다.
• 이 구조는 Figma Sites, Figma Make, Code Connect처럼 디자인을 실제 웹·코드 결과물로 연결하는 기능의 기반이 됐습니다.

변수: 전역적이고 문맥을 지원하는 파라미터

• 변수는 컴포넌트 내부에 국한되지 않고 프로젝트 전반에서 사용할 수 있는 더 넓은 범위의 파라미터입니다.
• 색상, 크기 등 다양한 타입을 지원하며 디자인 토큰을 표현하는 데 적합합니다.
• 라이트 모드와 다크 모드처럼 하나의 변수에 여러 문맥별 값을 정의할 수 있습니다.
• 예를 들어 배경색 변수 하나에 기본, 보조, 강조 값과 각 모드의 실제 색상을 연결할 수 있습니다.
• 이러한 특성 덕분에 디자인 시스템의 토큰을 중앙에서 관리하고 여러 화면에 일관되게 적용할 수 있습니다.

두 아키텍처를 분리했을 때의 문제

• 변수와 컴포넌트 속성이 서로 다른 내부 구조를 사용하면서 기능 간 동작이 일관되지 않았습니다.
• 하나의 레이어 속성에 변수와 컴포넌트 속성이 동시에 연결되는 상황이 발생할 수 있었습니다.
• 이 경우 편집기에서 어떤 값이 우선하는지 예측하기 어렵고 렌더링 결과가 일치하지 않을 수 있었습니다.
• 사용자 입장에서는 비슷한 기능을 서로 다른 방식으로 배워야 했습니다.
• 개발팀 역시 기능을 추가할 때 두 아키텍처를 각각 수정하고 호환성을 검토해야 했습니다.
• 다른 Figma 제품에 파라미터 기능을 확장하려 해도 기존의 기술적 복잡성을 함께 가져가야 했습니다.

단일 파라미터 아키텍처로의 통합

• Figma는 변수와 컴포넌트 속성을 공통된 내부 파라미터 모델 위에서 동작하도록 통합했습니다.
• 두 기능의 사용자-facing 개념은 유지하면서도, 값의 정의·바인딩·전파를 처리하는 기반 구조를 공유하게 했습니다.
• 동일한 레이어 속성에 여러 파라미터가 연결되는 경우도 일관된 규칙으로 처리할 수 있게 됐습니다.
• 공통 아키텍처를 통해 편집기 내 예상치 못한 동작과 렌더링 불일치를 줄였습니다.
• 새로운 파라미터 기능이나 제품을 개발할 때 기존 시스템을 각각 구현할 필요가 없어져 개발 속도도 향상됐습니다.

통합이 가져온 확장성

• 컴포넌트의 구조적 제어와 변수의 전역적·문맥적 제어를 하나의 기반에서 조합할 수 있습니다.
• 디자인 토큰, 컴포넌트 속성, 코드 생성 기능을 더 일관된 방식으로 연결할 수 있습니다.
• 향후 Figma의 다른 제품에서도 동일한 파라미터 개념과 동작 규칙을 재사용할 수 있습니다.
• 이번 작업은 단순한 내부 리팩터링이 아니라, 디자인 도구 전반에서 파라미터화를 확장하기 위한 기반을 마련한 사례입니다.

실무적으로는 컴포넌트의 외부에 노출할 사용자 조정 항목에는 컴포넌트 속성을, 여러 화면과 모드에서 공유할 디자인 토큰에는 변수를 사용하는 것이 적절합니다. 두 기능이 통합된 아키텍처 위에서 동작하더라도 각 기능의 범위와 목적은 여전히 다르므로, 재사용 범위에 따라 선택하는 것이 좋습니다.