Figma에서 레이어, 변수, 컴포넌트, 토큰의 이름을 지정하는 방법을 익히는 것은 단순한 취미가 아니라 실질적인 필수 요소입니다. 잘 짜여진 명명 체계는 워크플로 속도를 높이고 혼란을 방지하며, 특히 여러 사람이 같은 파일을 편집할 때 디자인과 개발 간의 마찰을 줄여줍니다.
인터페이스 디자인 분야에서 일하고 있고 실력을 한 단계 더 향상시키고 싶다면, 기본부터 탄탄하게 정리하는 것이 중요합니다. 어떤 이름을 사용하고, 어떻게 구성하며, 어떻게 문서화하는지 명확히 해야 합니다. 이 가이드에서는 검증된 모범 사례, 명확한 예시, 그리고 파일과 페이지부터 가장 작은 색상이나 글꼴 변수에 이르기까지 Figma의 모든 것을 표준화하는 체계적인 접근 방식을 소개합니다.
기본 사항: Figma에서 명명법을 표준화하는 이유
자세히 살펴보기 전에 기본 사항을 다시 한번 짚고 넘어가는 것이 좋습니다. 디자인 시스템은 디지털 제품의 진실의 원천입니다. 시각적 정체성, 접근성, 인터페이스의 일관성을 정의하는 구성 요소와 스타일의 집합이며 , Figma는 바로 이 진실의 원천을 구축하고, 게시하고, 활용하는 곳입니다.
해당 시스템 내에서 속성과 그 값은 구성 요소입니다. 색상, 글꼴, 간격, 크기, 효과 및 상태에는 전체 조직이 이해할 수 있고, 읽기 쉽고, 확장 가능한 논리 체계가 필요하며, 이는 최초 구성 요소를 설계한 사람만을 위한 것이어서는 안 됩니다.
공통된 표준은 모호함을 방지합니다. 명명은 단순히 보기 좋은 라벨을 붙이는 것이 아니라, 시간이 지나도 변함없이 유효하고 제품의 성장에 발맞춰 발전할 수 있는 분류 체계를 구축하는 것입니다. 이를 통해 팀 구성원 모두가 어떤 용어를 사용해야 하는지, 어디를 변경해야 하는지, 그리고 최종 소비자에게 어떤 영향을 미치는지 명확하게 알 수 있습니다.
구성 요소 및 스타일의 구성: 효과적인 패턴
좋은 명명법은 사물의 본질, 동작 방식, 사용처에 대한 정보를 전달하는 것입니다. 이를 위해서는 의미 역할에 기반한 이름과 단순히 외형이나 특징을 묘사하는 이름을 구분하고 , 서로 일관성을 유지해야 합니다.
상호작용 가능한 컴포넌트의 경우, 요소와 해당 상태를 정의하는 것이 좋습니다. 예를 들어, 버튼은 기본, 호버, 포커스, 눌림, 비활성화 상태를 가질 수 있으며 , 이름에는 라이브러리 전체에서 따를 명명 규칙이 명확하게 표시되어야 합니다.
- 버튼: 기본 버튼, 보조 버튼, 3차 버튼과 같이 일관된 규칙을 사용하고, 기본 버튼 — 호버와 같이 접미사를 사용하여 상태를 추가합니다.
- 아이콘: 메일 아이콘, 소셜 네트워크 아이콘, 검색 아이콘과 같이 설명적인 이름을 선택하세요. 아무 의미도 없는 일반적인 와일드카드는 피하세요. 그리고 장기적으로는 검색을 더 어렵게 만듭니다.
둘 이상의 시스템이나 브랜드를 사용하는 경우, 범위를 명확하게 구분하세요. 두 가지 디자인 시스템이나 두 가지 주요 팔레트가 공존할 때는 '기본'과 '보조'라는 레이블을 사용하는 것이 유용하며 , 이를 통해 구성 요소 및 토큰 수준에서 명확성을 유지할 수 있습니다.
명명 규칙의 마법은 단순히 미적인 측면에만 있는 것이 아닙니다. 그 진정한 효과는 협업에 있습니다. 디자인과 개발 팀이 이름과 구조를 공유하면 소통이 원활해지고, 인수인계가 매끄러워지며, 누구나 처음부터 필요한 자료를 찾을 수 있기 때문에 오류가 줄어듭니다.
Figma에서 디자인 시스템을 설정하고 유지 관리하는 방법
별도의 파일에 디자인 시스템을 구축하면 질서와 관리 체계를 확립할 수 있습니다. 이 파일은 라이브러리, 마스터 컴포넌트, 공개된 스타일의 참조 역할을 해야 하며 , 이상적으로는 보호되고 버전 관리가 이루어져야 합니다.
- 초기 재고핵심 요소를 나열하세요. 기본 팔레트와 그 크기, 타이포그래피와 그 레벨, 간격 패턴, 그리고 효과 스타일을 정의하세요.
- 시스템 마스터 파일: Figma에서 디자인 시스템을 위한 전용 파일을 생성합니다. 이는 구성 요소와 스타일의 원점이며 해당 문서도 포함됩니다..
- 정리된 구성 요소패밀리(버튼, 양식, 탐색, 피드백)별로 그룹화하세요. 합의된 명명 규칙을 사용하고 자산에서 명확한 계층 구조를 유지하세요.
- 잘 정의된 스타일: 색상 스타일, 텍스트, 그리드 및 효과를 게시합니다. 변수와 토큰에 사용할 것과 동일한 기준을 사용하여 스타일의 이름을 지정합니다. 중복을 피하기 위해서.
- 살아있는 문서사용자 가이드 페이지, 예시, 가이드라인을 추가하세요. 편집 가능 항목, 게시자, 버전 변경 방법 등을 정의하세요.
이 모든 것에는 프로세스가 수반되어야 합니다. 라이브러리 릴리스 워크플로, 동료 검토 및 버전 관리 일정을 합의하여 변경 사항이 통제되고 추적 가능한 방식으로 전파되도록 하는 것이 좋습니다 .
디자인 토큰 및 표준: JSON부터 W3C 및 스타일 사전까지
디자인 토큰은 시각적 및 상호작용 관련 결정을 휴대 가능한 형식으로 표현한 가장 작은 단위입니다. 토큰을 JSON 형식으로 저장하는 것이 일반적인 관행이 되었으며, Style Dictionary와 같은 도구는 웹, iOS 또는 Android용 변수를 생성하여 플랫폼 간의 격차를 해소합니다.
JSON 사용에 대해서는 의견 일치가 이루어졌지만, JSON을 구성하는 방법에 대해서는 항상 의견이 일치하는 것은 아닙니다. 스타일 사전(Style Dictionary)은 토큰 구조화를 위한 CTI(범주, 유형, 항목) 분류 체계를 널리 알렸으며 , 이는 자동화된 파이프라인에서 필터링 및 변환에 매우 유용합니다.
2023년 7월, W3C 워킹 그룹에서 디자인 토큰 형식 표준화를 위한 관련 초안이 발표되었습니다. 이 사양은 토큰을 명시적으로 분류하기 위한 `$type`이라는 특수 속성을 제안하며 , 이는 CTI와 일부 측면에서 차이가 있습니다.
이것이 의미하는 바는 무엇일까요? 새로운 사양을 사용하여 Figma에서 토큰을 내보내고 기존 스타일 사전 설정을 사용하여 처리하려는 경우, 규칙이 CTI(연속 가변 입력)를 기대하기 때문에 필터링 또는 변환 시 호환성 문제가 발생할 수 있습니다 . 다행히 스타일 사전은 유연하므로 변환, 필터 및 형식을 새로운 표준에 맞게 조정할 수 있습니다.
공식 가이드라인이 개발되는 동안, 채택하는 구조는 소비자를 염두에 두어야 합니다. 즉 , 변수 추적성, 의미론적 명확성, 빌드 도구와의 호환성을 고려해야 합니다. 또한, 업계 선두 기업이 발표한 타사 분석 및 사례 연구(예: 인터페이스 규모에 대한 제안된 분류 체계 또는 Salesforce와 같은 대규모 시스템에서 공유하는 경험)를 참고하여 불필요한 중복 개발을 피하는 것이 좋습니다.
변수 명명: 두통 없이 색상과 타이포그래피 지정
많은 팀에서 Main Blue와 같은 이름과 Blue-500과 같은 크기, Large Header 또는 Regular Body와 같은 타이포그래피 역할을 혼용하여 사용합니다. 이를 해결하는 가장 확실한 방법은 기본 모양 토큰과 의미 의도 토큰으로 계층을 분리하는 것입니다.
색상. 스케일(예: 파란색 50, 100, 200, 300, 400, 500, 600, 700, 800, 900)을 사용하여 기본 팔레트를 정의하고 중립 색상을 별도로 지정합니다. 이러한 기본 토큰은 테마의 유연성을 확보하려는 경우 구성 요소에 직접 사용해서는 안 됩니다. 또한 기본 토큰에 매핑되는 기본 배경색, 보조 텍스트 또는 인터랙티브 테두리와 같은 의미 토큰을 생성합니다. 이렇게 하면 테마나 브랜드를 변경할 때 수정 작업이 아닌 매핑을 통해 간편하게 변경할 수 있습니다.
상태를 나타낼 때는 일관된 접미사를 추가하세요. Hover, Focus, Active, Disabled, Selected 정도면 대부분의 경우에 충분합니다. 접근성 있는 대비가 필요한 경우에는 의미 역할과 관련된 고대비 변형을 고려해 보세요.
타이포그래피. 크기, 굵기, 행간, 자간을 구분하는 구성 토큰을 선언하고 역할을 사용하여 텍스트 스타일을 만드세요. XL 제목 , M 부제목, M 본문, S 바닥글과 같은 의도 이름을 사용하고, M 본문 일반, M 본문 반굵게와 같이 표준화된 접미사를 사용하여 굵기를 명확히 하세요. 여러 브랜드 또는 제품을 사용하는 경우, 꼭 필요한 경우 웹, iOS 또는 브랜드 A와 같은 컨텍스트 접두사를 추가하세요.
스페인어와 숫자 코드를 혼합하여 사용하는 것은 일관성만 유지한다면 가능합니다. 속성을 구분할 때는 하이픈 (-) 을 사용하고, 문제가 될 수 있는 공백은 피하며, 매크로 속성에서 마이크로 속성으로 의미 순서를 유지하세요. 예를 들어, Color — Background — Primary — Hover 또는 Text — Body — M — Semibold와 같이 사용합니다. 숫자로 된 척도(예: Blue-500)를 사용하는 경우, 기본 토큰에만 사용하세요. 의미 역할은 의도를 설명하지 않는 숫자에 의존해서는 안 됩니다.
국제화에 대한 참고 사항: 팀 구성원들이 스페인어를 사용하더라도 기술 접미사나 약어(md, lg, sm, xl 등)를 표준화하면 다른 팀의 도구와 구성원들이 해당 용어를 더 쉽게 받아들일 수 있습니다 . 핵심은 언어가 아니라 일관성과 추적 가능성입니다.
Figma 아키텍처: 팀, 프로젝트, 파일 및 페이지
Figma의 구조는 권한, 검색 및 성능에 영향을 미칩니다. 프로페셔널 팀 계정은 프로젝트, 파일 및 페이지를 사용할 수 있으며 , 조직 팀 계정은 여기에 팀 레이어가 추가되어 기업 및 복잡한 구조에서 유용합니다.
권한. 프로젝트 및 파일 수준에서 읽기 전용, 편집 또는 관리자 액세스 권한을 부여할 수 있습니다. 또한, 생성자만 편집할 수 있는 보기 전용 프로젝트와 비공개 초대 전용 프로젝트도 있습니다 . 시스템 제어를 유지하려면 편집 초대를 항상 전달해야 합니다.
프로젝트 명명 규칙을 정하세요. 모든 항목을 쉽게 식별하고 정리할 수 있도록 _ 와 같은 패턴을 만드세요. 간결하고 실용적인 이름을 사용하여 인터페이스에서 명확하게 표시 하고 모호함을 방지하세요.
파일 유형. 메인(Main), 활성(Active), 아카이브(Archived)의 차이점. 메인은 모든 데이터의 원천이며 관리 목적 외에는 변경할 수 없습니다 . 활성 폴더는 작업이 이루어지는 곳이며, 아카이브는 검색 가능한 기록 파일입니다. 라이브러리를 게시할 때는 메인 폴더에서 게시해야 합니다.
표지 디자인 및 성능. Figma에서는 프레임을 썸네일로 설정할 수 있습니다(썸네일로 설정). 표지가 선명하게 보이고 파일 형식에 따라 색상이 일관되게 유지되도록 620x320px 프레임을 사용하세요 (예: 메인, 활성, 보관된 파일에 각각 다른 색상 사용). 파일 크기가 너무 커지지 않도록 기능 및 제품별로 파일을 나누세요.
페이지, 흐름, 프레임 번호 매기기: 모든 것을 중요하게 만드세요.
페이지 이름 지정. 효과적인 패턴은 `<title>`이며, ID는 순차적으로 증가하고 안정적인 순서 지정을 위해 앞에 0을 붙입니다. 제목 자체에 상태 코드나 합의된 이모티콘을 추가하여 완료, 진행 중, 검토 중 또는 폐기 여부를 나타낼 수 있습니다.
흐름과 행. 각 페이지 내에서 사용자 스토리 또는 시나리오를 나타내는 프레임 행을 사용하여 작업하세요. 오해를 방지하고 검토를 용이하게 하기 위해 각 행의 시작 부분에 흐름 이름과 간략한 맥락 설명이 포함된 표지 프레임을 추가하세요.
프레임 번호 매기기. _와 같은 구문이 매우 효과적입니다. 이 구문은 앞에 0을 붙여 자연스러운 순서(01, 02, 03, 04, 05, 06, 07, 08, 09, 10)를 보장하고 , 행 내에서 왼쪽에서 오른쪽으로 뷰 번호를 매깁니다. 예: 첫 번째 행은 01_100, 01_101, 01_102, 두 번째 행은 01_200, 01_201, 01_202입니다.
버전 관리. 자동 저장에만 의존하지 마세요. 특히 디자인 시스템이나 대규모 기능 개발 시에는 마일스톤 달성 시 버전 기록을 활용하여 커밋을 생성하고 , 팀원들과 향후 검토를 위해 명확한 메시지를 남겨두세요.
시스템 장비 및 거버넌스 라이브러리
라이브러리는 Figma 파일을 재사용 가능한 구성 요소와 스타일을 제공하는 도구로 변환합니다. 라이브러리는 자산 패널에서 게시되며, 종속 디자인과의 호환성을 유지하려면 권한 및 수정 사항을 엄격하게 준수해야 합니다.
규모가 큰 조직에서는 전담 디자인 시스템 팀을 구성하는 것이 좋습니다. 이를 통해 편집 및 게시 권한을 효과적으로 관리하고, 나머지 직원들은 읽기 전용 권한으로 시스템에 접근할 수 있습니다 . 이러한 분리는 문제 발생률을 줄이고 변경 주기를 더욱 예측 가능하게 만듭니다.
조직 내 팀 유형에는 공개, 비공개, 비밀이 있습니다. 공개 팀은 누구나 참여하여 문서를 볼 수 있으며, 비공개 팀은 초대받아야만 콘텐츠를 볼 수 있습니다. 비밀 팀은 초대 없이는 콘텐츠를 전혀 볼 수 없습니다 . 프로젝트의 중요도와 시스템 개발 단계에 따라 적절한 팀 유형을 선택하세요.
분석 및 관리. 조직 관리 콘솔은 구성 요소 및 스타일 채택률에 대한 지표를 제공하고 기본 라이브러리를 활성화할 수 있도록 합니다. 이는 브랜드 자산, 표지, 아이콘 또는 즉시 사용 가능해야 하는 공통 리소스에 특히 유용합니다.
Figma AI로 이름 변경 자동화
Figma AI는 레이어에 맥락에 맞는 이름을 일괄적으로 지정하여 시간을 절약할 수 있습니다. AI는 선택한 레이어의 내용, 위치 및 관계를 분석하여 일관된 이름을 제안하고 , 이름이 지정되지 않은 동일한 레이어를 감지하면 상위 프레임 간에도 동기화합니다.
이 도구는 사용자가 이미 이름을 변경한 내용을 존중합니다. Figma의 기본 이름 지정 규칙을 유지하는 레이어만 변경하며 , 선택 영역에 이름이 변경된 레이어를 포함하면 사용자가 강제로 변경하지 않는 한 해당 레이어는 그대로 유지됩니다.
이름이 변경되는 레이어에는 프레임, 그룹, 텍스트, 구성 요소의 기본 이름을 유지하는 인스턴스, 이미지 채우기가 적용된 사각형이 포함됩니다. 인스턴스의 경우 의도치 않은 결과를 방지하기 위해 하위 레이어가 아닌 컨테이너만 영향을 받습니다.
이름이 변경되지 않는 레이어는 다음과 같습니다. 이미 이름이 변경되었거나 숨겨졌거나 잠긴 레이어, 인스턴스 내의 하위 레이어, 타원, 별, 다각형 및 벡터 격자와 같은 개별 벡터 도형, 이미지 채우기가 없는 직사각형. 이러한 레이어의 경우 변경은 수동 또는 구성 요소 수준에서 이루어집니다.
실행 방법: 레이어를 선택한 후 컨텍스트 메뉴, 도구 모음의 작업 버튼 또는 빠른 작업 메뉴를 사용할 수 있습니다. 이름을 변경할 항목이 없으면 Figma에서 경고 메시지가 표시되고, 이름을 표준화해야 하는 경우 '그래도 이름 변경' 버튼을 사용하여 강제로 작업을 수행할 수 있습니다.
변수의 색상 및 텍스트에 대한 구체적인 모범 사례
현재 Main Blue와 Blue-500을 모두 사용하고 있다면, 듀얼 모델로 전환하세요. 스케일별로 기본 변수(Blue-50~Blue-900)를 정의하고, 용도별로 의미 변수(배경-기본, 텍스트-보조, 테두리-인터랙티브)를 정의한 후 , 서로 매핑하세요. 이러한 연결 고리가 리브랜딩이나 테마 변경에 대한 안정성을 제공합니다.
상태에 대해 통일된 접미사( Hover, Focus, Active, Disabled, Selected )를 도입하세요 . 표면 및 높이 관련 작업을 하는 경우, 의미론적 범주 아래에 Elevated-Surface 또는 Content-On-Subtle-Background와 같은 변형을 추가하세요.
타이포그래피에서 별칭 토큰과 구성 토큰을 분리하세요. 별칭은 역할별로 정의됩니다(Title-XL, Subtitle-M, Body-M). 구성 토큰에는 크기, 굵기, 자간, 트래킹 등이 포함됩니다 . 글꼴 이름이 변경되거나 제품이 확장될 경우, 각 화면을 다시 매핑할 필요 없이 매핑만 수정하면 됩니다.
이러한 접근 방식은 개발팀과의 소통을 간소화하기도 합니다. 개발자들은 트렌드에 따라 변하는 미적으로 보기 좋은 이름보다는 `--color-text-primary`나 `--font-body-md`처럼 안정적이고 예측 가능한 변수를 선호하는 경우가 많습니다.
정리를 위한 추천 플러그인
보조 도구를 사용하면 반복적인 작업과 인적 오류를 줄일 수 있습니다. Figma에는 이름 정리, 콘텐츠 동기화 또는 화면 간 연결 추적을 지원하는 플러그인이 있습니다.
- 찾기 및 바꾸기: 레이어 이름, 스타일 또는 텍스트를 대량으로 통합하는 데 유용합니다.
- 콘텐츠 릴: 일관되고 재사용 가능한 샘플 콘텐츠를 삽입할 수 있습니다. 상태와 길이를 테스트합니다.
- 정렬기: 예측 가능한 기준으로 레이어와 아트보드를 정렬하는 데 도움이 됩니다.
- Google 시트 동기화: 표 형식 데이터를 레이아웃과 동기화하므로 목록이나 표에 적합합니다.
- 자동 흐름: 프레임 사이에 화살표와 연결을 그립니다. 흐름을 손쉽게 표현합니다.
- 레드라인: 측정, 간격, 스타일의 시각적 사양을 생성합니다.
고객 및 계정 조직과 협력
외부 조직과 협업할 때는 구조와 권한을 일치시키는 것이 중요합니다. 조직 팀 계정을 사용하면 제품별 팀을 구성하고, 기본 라이브러리를 활성화하고, 도입 분석 데이터를 확인할 수 있어 데이터를 기반으로 시스템을 효과적으로 관리할 수 있습니다.
팀을 분리하여 운영하는 것의 장점은 명확한 계층 구조, 제품 또는 프로젝트 분리, 역할별 권한 부여, 추가적인 조직화 수준, 그리고 원활한 협업입니다. 계층화된 디렉터리 구조(팀, 프로젝트)는 새로운 파일에 접근할 때 발생하는 마찰을 줄여주는 즉각적인 구조적 지도를 제공합니다 .
일상적인 운영에서는 집에서 사용하는 것과 동일한 패턴을 유지하세요. 메인, 활성 및 보관 프로젝트를 만들고, 기능별로 가벼운 파일을 사용하며, 페이지에는 ID와 상태를 명확하게 표시하고, 각 마일스톤을 완료할 때 명확한 메시지를 남겨 버전 관리를 통해 기록을 남기세요.
교육 및 전문성 개발
UX/UI 분야에서 경력을 심화하고 발전시키고 싶다면 현업 전문가와 함께하는 교육을 고려해 보세요. KeepCoding의 UX/UI 디자인 AI 기반 풀스택 부트캠프와 같은 집중 프로그램은 실무 경험, 탁월한 판단력, 디자인 및 개발에 적용되는 기술을 업계에서 매일 활약하는 강사진과 함께 제공합니다.
Figma 사용법을 익히는 것을 넘어, 이러한 유형의 교육은 실제 사례 연구, 팀 워크플로, 그리고 영향력 있는 의사 결정 과정을 접할 수 있도록 해줍니다. 이론과 실습의 조화는 취업 경쟁력을 높이고 경쟁이 치열한 시장에서 탄탄한 포트폴리오를 구축하는 데 도움을 줍니다.
명확한 명명 규칙과 프로세스 프레임워크, 잘 정립된 디자인 시스템, 그리고 표준을 준수하는 토큰 전략을 갖추면 팀은 작업 속도를 높이고 오류를 줄이며, 기존 기능을 손상시키지 않고 제품을 발전시킬 수 있습니다 . 핵심은 규칙에 합의하고, 이를 문서화하고, 도구, 권한, 그리고 리뷰를 통해 이를 시행하는 것입니다. 나머지는 지능적인 반복 작업을 통해 해결할 수 있습니다.
