Dev Mode의 변수
개발자로서 Dev Mode에서 디자인을 검토할 때 색상, 숫자, 문자열, 불리언 변수를 접하게 됩니다. 이러한 변수의 값은 가변 모드와 같은 요소에 따라 달라질 수 있으므로, 디자인에서 가져오고자 하는 정확한 값을 식별하기가 어려울 때가 있습니다.
Figma는 개발자가 변수 작업을 더 쉽게 할 수 있도록 Dev Mode에서 몇 가지 옵션을 제공합니다.
변수 세부 정보
Dev Mode에서 디자인을 검사할 때, 디자인에 사용된 변수에 대한 세부 정보를 볼 수 있습니다. Variable details(변수 세부 정보) 모달은 변수에 대한 정보를 다음과 같이 나열합니다.
- 변수의 이름
- 변수를 호스팅하는 파일에 대한 링크
- 변수를 포함하는 변수 컬렉션의 이름
- 변수의 모드
- 변수 값 및 해당하는 경우 원시 값에 대한 별칭 체인
- 변수의 범위(사용 가능한 곳)
- 변수를 사용하는 코드 스니펫
유용한 기능은 변수 별칭의 체인을 따라가 특정 값을 확인할 수 있는 기능입니다. 예를 들어, 이전 이미지에서 Background/Positive/Default 변수는 Green/500이라는 별칭을 사용하는데, 이는 색상 값 #14AE5C에 해당합니다.
Variable details(변수 세부 정보) 모달을 사용하여 모드를 변경하면 변수가 가질 수 있는 다른 값을 볼 수 있습니다.
변수 세부 정보 모달 열기
Variable details(변수 세부 정보) 모달을 여는 방법에는 다음과 같이 두 가지가 있습니다.
CSS의 디자인 토큰과 같이 코드 스니펫에 표시되는 변수의 경우, Inspect(검사) 패널에서 변수 이름을 클릭하여 Variable details(변수 세부 정보) 모달을 엽니다.
Selection colors(선택 색상) 섹션에 표시되는 변수와 같은 기타 변수의 경우, Inspect(검사) 패널에서 Variable details(변수 세부 정보)를 클릭하여 Variable details(변수 세부 정보) 모달을 엽니다.
제안된 변수
Dev Mode에서 디자인을 검사할 때, 변수나 스타일 대신 원시 값을 보게 될 때가 있습니다. 이러한 상황은 여러 가지 이유로 발생할 수 있으며, 가령 디자이너가 디자인 단계에서 변수를 우연히 분리했을 때 발생할 수 있습니다. 원시 값을 발견했을 때 대신 사용할 수 있는 기존 변수가 있는지 확인해 보세요.
Dev Mode에서는 해당 변수를 쉽게 식별할 수 있도록 변수를 제안할 수 있습니다.
변수를 제안하려면 해당 변수는 다음을 포함해야 합니다.
- 정확히 같은 값
- 적절한 범위
제안된 변수를 클릭하여 이름을 복사할 수 있습니다.
추천 변수 가져오기
Dev Mode에서 값에 대한 제안 변수를 얻으려면 Inspect(검사) 패널에서 제안을 받고자 하는 값을 클릭하세요. 클릭한 값 옆에 Suggested variables(제안된 변수) 모달이 표시됩니다.
로컬 변수 컬렉션에 액세스
Dev Mode에서는 파일 내 로컬 변수 컬렉션에 액세스하고 확인할 수 있습니다.
예를 들어, 이전 이미지의 Collections from this file(이 파일의 컬렉션) 섹션에서는 Color Primitives(색 원시 값) 변수 컬렉션이 선택되었습니다. 이 이름들은 단지 예시일 뿐이며, 실제 컬렉션 및 변수 이름은 파일 내의 로컬 변수 및 컬렉션에 해당합니다.
Collections from this file(이 파일의 컬렉션) 섹션 아래에는 Brand, Black, White와 같은 컬렉션에 나타나는 모든 변수 그룹의 목록이 있습니다. 기본적으로 All variables(모든 변수)가 선택됩니다. 그룹은 Variables(변수) 모달에서 조직된 것과 동일한 방식으로 정렬됩니다.
선택한 그룹의 경우, 변수 테이블에 변수가 갖는 각 모드의 값과 함께 변수가 표시됩니다. All variables(모든 변수)를 선택하면 테이블이 그룹별로 구성됩니다.
개별 변수와 값을 클릭하여 클립보드에 복사하고 변수에 대한 세부 정보를 확인할 수 있습니다.
변수 테이블 열기
변수 테이블을 열려면 Inspect(검사) 패널의 Variables(변수) 섹션에서 Open variables(변수 열기)를 클릭합니다. 변수 테이블이 확장되어 캔버스를 채웁니다.