component-variants

3 개의 포스트

figma

기능 비하인드: 멀 (새 탭에서 열림)

Figma의 **멀티 편집(multi-edit)**은 여러 프레임이나 컴포넌트 세트에 속한 객체를 한 번에 선택하고 수정할 수 있게 해 반복 작업을 줄이는 기능이다. 이 아이디어는 2019년 variants 기능을 설계하던 중 시작됐지만, 선택 방식과 편집 동작을 새롭게 정의해야 해 오랜 기간 다듬어졌다. Figma는 멀티 편집처럼 사용자가 별도 학습 없이 자연스럽게 쓰는 기능을 만드는 일을 제품 개발의 중요한 목표로 본다. ## 멀티 편집의 출발점: variants의 반복 작업 - 2019년 variants 기능을 설계하던 중, 여러 변형에 같은 수정 작업을 반복해야 하는 문제가 드러났다. - Figma 팀은 이 문제를 해결하기 위해 이틀간 디자인 서밋을 열고 다양한 접근법을 논의했다. - 핵심 아이디어는 특정 모드에 들어가면 한 객체에 한 수정이 모든 variants에 동시에 적용되도록 하는 것이었다. - 이후 이 방식은 variants뿐 아니라 여러 디자인 객체를 한꺼번에 편집해야 하는 다양한 상황에도 유용하다고 판단됐다. - 팀은 화이트보드에 아이디어를 그린 뒤 이를 “multi-edit”라고 이름 붙였다. ## 기존 다중 선택 방식의 한계 - Figma는 이미 여러 객체를 선택해 일부 속성을 동시에 수정할 수 있었지만, 실용성에는 한계가 있었다. - 사용자가 실제로 수정하려는 객체만 정확히 선택하기 어려웠다. - 여러 객체를 선택한 뒤에도 편집 종류에 따라 결과가 제대로 작동하지 않았다. - 여러 객체의 색상 변경은 비교적 쉬웠지만, 크기 조정은 어려웠다. - 여러 텍스트 노드의 글꼴이나 글자 크기는 바꿀 수 있지만, 텍스트 내용 자체를 동시에 수정하기는 어려웠다. - 따라서 단순히 “여러 개를 선택하는 기능”이 아니라, 선택과 편집 동작 전체를 재설계해야 했다. ## 아이디어의 긴 숙성 기간 - 초기에는 멀티 편집을 고급 텍스트 편집기의 다중 커서처럼 강력한 별도 편집 모드로 구상했다. - 그러나 실제 구현을 검토하면서 Figma의 기존 선택 모델과 어떻게 결합할지 해결해야 했다. - 어떤 객체를 같은 대상으로 간주할지, 선택된 객체에 어떤 편집을 허용할지 등 핵심 원칙이 명확하지 않았다. - 이러한 문제를 정리하는 데 시간이 필요해 아이디어는 곧바로 개발되지 못하고 오랫동안 “동면” 상태에 머물렀다. - 글은 멀티 편집이 처음부터 완성된 기능이 아니라, 반복적인 시행착오와 세부 조정을 거쳐 출시됐음을 강조한다. ## 현재 제공되는 멀티 편집 사용법 - `⌘ Command + ⌥ Option + A`: 조건에 맞는 동일한 객체를 모두 선택한다. - `Shift`를 누른 채 드래그: 원하는 동일 객체만 직접 선택한다. - 여러 텍스트 객체를 선택한 뒤 `Enter`: 텍스트 멀티 편집 모드로 들어간다. - 컴포넌트 세트를 선택한 뒤 `Q`: variants 멀티 편집 모드로 전환한다. - 멀티 편집을 사용하면 여러 프레임과 컴포넌트 세트에 걸친 객체를 몇 번의 동작만으로 동시에 수정할 수 있다. ## 실용적인 결론 반복적으로 여러 화면이나 variants를 수정해야 한다면 멀티 편집을 우선 활용하는 것이 좋다. 특히 동일한 텍스트를 수정하거나 여러 컴포넌트의 공통 속성을 변경할 때 기존 객체를 하나씩 편집하는 것보다 훨씬 효율적이다.

figma

변수에 관한 모든 궁금증 해결 (새 탭에서 열림)

Figma의 변수(Variables)는 단순한 디자인 토큰을 넘어 여러 상태와 플랫폼에 따라 디자인 값을 동적으로 바꾸고, 디자인과 코드를 더 밀접하게 연결하는 기능이다. 이번 업데이트로 효과, 선 두께, 투명도, 레이아웃 그리드, 모서리 반경, 중첩된 컴포넌트 인스턴스까지 변수로 제어할 수 있게 되어 반응형·다중 플랫폼 디자인의 유연성이 크게 향상됐다. Figma는 앞으로 타이포그래피 영역까지 변수 활용을 확장할 계획이다. ## 변수의 확장된 활용 - 변수는 색상이나 간격 같은 고정된 토큰을 대체하는 데 그치지 않고, 모드에 따라 값이 달라지는 유연한 설계 단위로 사용된다. - 데스크톱·모바일, 라이트·다크 모드, 브랜드별 테마 등 서로 다른 조건에 맞춰 디자인을 한 번에 조정할 수 있다. - Headspace처럼 디자인 시스템의 일관성을 유지하면서도 다양한 제품 상황과 협업 요구에 대응하는 데 활용할 수 있다. - 변수의 개방적인 구조 덕분에 일반적인 디자인 시스템뿐 아니라 Figma 안에서 게임과 인터랙티브 작품을 만드는 등 창의적인 용도로도 사용된다. ## 효과와 시각적 속성의 반응형 제어 - 블러 크기, 드롭 섀도의 색상, 오프셋 거리 등 효과의 다양한 속성에 변수를 바인딩할 수 있다. - 모드가 바뀌면 효과 값도 함께 변경되므로, 플랫폼이나 테마에 맞는 시각적 표현을 자동으로 적용할 수 있다. - 레이어의 불투명도 역시 변수로 제어할 수 있으며, 불투명도 필드를 마우스 오른쪽 버튼으로 클릭해 변수를 연결한다. - 개별 모서리 반경을 변수에 연결해 네 모서리를 동일하게 처리하지 않고 각각 세밀하게 조정할 수 있다. ## 플랫폼별 반응형 디자인 - 선 두께를 변수로 관리해 데스크톱과 모바일 등 플랫폼별로 다른 스트로크 값을 적용할 수 있다. - 레이아웃 그리드도 변수와 모드에 따라 변경할 수 있어 화면 크기나 기기별 레이아웃을 더욱 정밀하게 설계할 수 있다. - 동일한 컴포넌트 구조를 유지하면서 모드만 전환해 픽셀 단위로 최적화된 디자인을 만들 수 있다. ## 중첩된 컴포넌트 인스턴스 제어 - 컴포넌트 내부에 포함된 다른 컴포넌트 인스턴스의 변형(variant)에도 변수를 연결할 수 있다. - 이를 통해 복잡한 컴포넌트 구조에서도 내부 요소의 상태와 속성을 상위 시스템에서 유연하게 제어할 수 있다. - 여러 단계로 중첩된 디자인 시스템을 구성할 때 반복적인 수동 수정이 줄어든다. ## 변수와 스타일의 관계 - 스타일은 특정 색상, 텍스트, 효과 등을 재사용하는 데 적합한 반면, 변수는 조건이나 모드에 따라 값이 바뀌는 동적 상황에 더 적합하다. - 변수는 기존 스타일을 대체하기보다는 스타일과 함께 사용해 디자인 시스템을 확장하는 방식으로 이해할 수 있다. - 변수의 활용 범위가 넓어지면서 디자인 파일의 값과 실제 코드에서 사용하는 토큰 사이의 연결도 더 자연스러워진다. ## 디자인과 코드의 연결 강화 - 변수 기반으로 디자인 값을 관리하면 개발자가 사용하는 플랫폼별 토큰 및 테마 값과 디자인 시스템을 맞추기 쉬워진다. - 모드와 변수 구조를 코드의 상태값이나 디자인 토큰 구조에 대응시킬 수 있어 핸드오프 과정의 불일치를 줄일 수 있다. - Figma는 이러한 연계를 앞으로 타이포그래피까지 확장하려 하며, 글꼴 크기·행간·문자 간격 등도 더 유연하게 관리할 가능성을 제시한다. 실무에서는 먼저 색상과 간격처럼 반복 사용이 많은 값을 변수화한 뒤, 라이트·다크 모드나 모바일·데스크톱 모드를 구성하는 것이 좋다. 이후 효과, 투명도, 그리드, 컴포넌트 상태로 범위를 넓히면 디자인 시스템의 일관성과 반응형 설계 효율을 함께 높일 수 있다.

figma

Variants로 디자인과 코드의 (새 탭에서 열림)

Figma의 Variants는 하나의 컴포넌트에 존재하는 여러 변형을 하나의 컴포넌트 세트로 묶어 디자인 시스템과 코드의 구조를 가깝게 연결한다. 디자이너는 관련 변형을 쉽게 탐색·관리하고, 개발자는 상태·스타일·크기 같은 속성을 코드의 컴포넌트처럼 이해할 수 있다. Figma는 사용자 관찰과 6주간 4차례의 사용성 테스트를 통해 기능 구조와 UI, 명칭을 다듬었다. ## 디자인과 코드의 사고방식 맞추기 - 개발은 재사용성과 확장성을 중시하고, 디자인은 자유로운 반복과 탐색을 중시한다. - 기존 Figma 컴포넌트는 관련 변형을 찾거나 전환하기 어려웠고, 인스턴스 교체 메뉴가 지나치게 복잡해지는 문제가 있었다. - 디자인 시스템이 커지면서 팀들은 `default/primary/large/icon` 같은 슬래시 기반 이름 규칙을 사용해 상태와 속성을 표현했다. - Variants는 이를 `state="hover"`, `style="secondary"`처럼 **속성명:값** 구조로 발전시킨다. - 상태뿐 아니라 `type`, `color`, `size` 등 여러 차원의 속성을 지원해 코드의 컴포넌트 모델과 더 유사하게 구성할 수 있다. ## 변형을 한곳에 모으는 컴포넌트 세트 - Figma는 디자인 시스템 관리자가 변형들을 그리드에 배치하고 나란히 비교한다는 점을 관찰했다. - 이에 따라 하나의 컴포넌트에 속한 여러 Variants를 캔버스에 side-by-side로 배치할 수 있도록 설계했다. - 이 방식은 다음 작업에 유용하다. - 변형 간 시각적 비교 - 디자인 반복 작업 - 라이브러리 유지보수 - 전체 디자인 시스템 구조 파악 - 기존 컴포넌트 변형들을 모두 선택한 뒤 **Combine Variants**를 클릭하면 하나의 컴포넌트 세트로 쉽게 전환할 수 있다. ## 사용성 테스트로 다듬은 UI - Figma는 작동하는 프로토타입을 제작하고 6주 동안 네 차례 사용성 테스트를 진행했다. - 초기 UI는 모든 속성값을 pill 형태로 표시했다. - 하지만 pill은 일반적으로 여러 태그를 동시에 표시하는 요소로 인식되기 때문에, 사용자는 특정 변형의 속성을 조정하는 UI로 이해하기 어려워했다. - 최종적으로는 다음과 같이 변경했다. - 특정 Variant를 선택했을 때는 각 속성을 간단한 입력 필드와 드롭다운으로 표시 - 전체 컴포넌트 세트의 속성과 값을 한눈에 볼 때는 pill UI 유지 - 기본 속성명도 `State`, `Style`처럼 미리 정해진 용어보다 `Property 1`, `Property 2`를 사용했다. - 사용자가 이를 `Type`, `Size` 등 자신의 디자인 시스템에 맞는 이름으로 직접 커스터마이즈하도록 한 것이다. ## 기능 이름을 ‘States’에서 ‘Variants’로 변경 - 초기에는 주요 사용 사례가 버튼의 hover, active, disabled 같은 인터랙션 상태였기 때문에 기능명을 **States**로 정했다. - 그러나 사용자들은 이 이름이 기능을 상태 관리에만 한정하는 것처럼 보인다고 지적했다. - Variants는 상태뿐 아니라 색상, 크기, 유형 등 다양한 속성 조합을 표현할 수 있다. - Fidelity Investments의 피드백을 계기로 기능의 전체 범위를 더 잘 드러내는 **Variants**라는 이름을 채택했다. - 이후 사용성 테스트에서도 Variants가 기능의 목적과 확장성을 더 직관적으로 전달하는 것으로 검증됐다. ## 디자인-개발 협업을 위한 확장 - Variants는 컴포넌트의 구조를 코드와 유사하게 만들어 디자이너와 개발자가 같은 개념으로 대화하도록 돕는다. - Auto Layout 업데이트와 Inspect 패널 개선도 함께 제공되어 디자인을 구현으로 전달하는 과정이 간결해진다. - 단순한 상태 관리부터 여러 속성을 조합한 복잡한 디자인 시스템까지 동일한 방식으로 관리할 수 있다. 실무에서는 버튼, 입력창, 카드처럼 상태·크기·스타일 변형이 많은 컴포넌트부터 Variants로 통합하는 것이 효과적이다. 속성명은 팀의 코드 규칙과 일치시키고, 변형을 체계적인 속성-값 조합으로 정의하면 디자인 시스템 유지보수와 개발 협업을 모두 개선할 수 있다.