피그마의 스타일과 레이아웃(토큰 시스템, 컨스트레인트, 오토레이아웃)
1. 디자인 스타일(Design Style)
- 정의 : 피그마 상에서 색상, 텍스트, 이펙트, 그리드의 네 가지 스타일 요소를 지정하여 등록한 뒤 반복적으로 사용하는 요소를 말합니다. 스타일로 등록하면 다른 작업에도 사용할 수 있고, 수정이 필요할 땐 지정한 스타일만 수정하면 적용된 요소들이 모두 한번에 변경되기 때문에 일관성 있는 디자인 작업을 할 때 유용하게 쓰입니다.
- 색상 스타일 (Color Styles): 브랜드 컬러 팔레트나 UI 컴포넌트의 기본 색상을 정의하고 관리합니다. 색상 값뿐만 아니라 이름과 설명을 추가하여 체계적인 관리가 가능합니다. 최근 업데이트를 통해 라이브러리 간 색상 스타일 동기화 및 변형(variations) 기능이 강화되어 더욱 유연한 색상 관리가 가능해졌습니다.
- 텍스트 스타일 (Text Styles): 폰트 패밀리, 크기, 두께, 행간, 자간 등 텍스트 관련 속성을 저장하고 재사용합니다. 다양한 텍스트 스타일을 정의하여 문서 전체의 타이포그래피 일관성을 유지할 수 있습니다.
- 그리드 스타일 (Grid Styles): 레이아웃 디자인의 기본이 되는 그리드 시스템을 정의하고 저장합니다. 컬럼 그리드, 로우 그리드, 격자 그리드 등 다양한 형태의 그리드를 설정하고 프로젝트 전반에 걸쳐 일관된 레이아웃 구조를 만들 수 있습니다.
- 효과 스타일 (Effect Styles): 그림자 (Drop Shadow, Inner Shadow), 레이어 흐림 효과 (Layer Blur), 배경 흐림 효과 (Background Blur) 등의 시각 효과를 스타일로 저장하고 재사용합니다.
- 채우기 스타일 (Fill Styles): 단색, 그라디언트, 이미지, 비디오 등 다양한 채우기 속성을 스타일로 저장합니다. 최근에는 복잡한 패턴이나 질감을 스타일로 정의하여 활용하는 사례도 늘고 있습니다.
- 획 스타일 (Stroke Styles): 선의 색상, 두께, 스타일 (실선, 점선 등), 끝 모양, 연결부 모양 등을 스타일로 저장합니다.
최신 정보 및 데이터:
- 스타일 라이브러리 개선: 여러 프로젝트에서 공유하고 사용할 수 있는 스타일 라이브러리 기능이 지속적으로 개선되고 있습니다. 팀 라이브러리를 통해 중앙 집중식으로 스타일을 관리하고 업데이트하여 디자인 시스템의 일관성을 높일 수 있습니다.
- 스타일 변형 (Style Variations): 동일한 스타일 그룹 내에서 속성의 일부를 변경하여 다양한 베리에이션을 만들 수 있습니다. 예를 들어, 기본 버튼 스타일에서 primary, secondary, tertiary 등의 색상 변형을 쉽게 관리할 수 있습니다.
- 시맨틱 스타일 (Semantic Styles): 색상이나 텍스트 스타일을 직접적인 속성값 대신 "primary", "secondary", "heading-large", "body-medium"과 같은 의미론적인 이름으로 정의하여 디자인의 의미를 명확하게 전달하고 유지보수를 용이하게 합니다.
2. 디자인 토큰 시스템(Design Tokens System)
- 정의 : 최근 디자인 시스템 구축을 위해 많이 사용되는 디자인 토큰을 플러그인으로 사용하는 하나의 방법론으로 여러 플랫폼과 디바이스에 걸쳐 디자인을 확장할 수 있는 기술을 말합니다.
- 장점 : 개발자와의 핸드오프 과정이 손쉽게 이뤄지고, 디자인과 개발을 연결하는 기능을 합니다.
- 사용법 : 별도의 플러그인을 설치하여 사용합니다.
2.1 디자인 토큰의 사용
(1) 토큰 플러그인 설치하기
툴바에서 리소스 툴을 선택하고 세부 옵션에서 [Plugins]를 선택 > 검색창에 'Token'을 입력하고 [Run] 버튼을 클릭하여 토큰 플러그인을 설치
(2) 설치한 토큰 선택하기
피그마 메뉴를 선택하고 [Plugins] > [Tokens Studio for Figma]를 선택하거나 리소스툴의 [Plugins]에서 설치한 토큰을 선택
(3) 토큰 실행하기
[Tokens Studio]가 실행되면 [New empty file] 버튼을 클릭하여 토큰을 실행
(4) 토큰에서 색상 지정하기
토큰 화면에서 [Color] 항목 우측의 [+]을 클릭하여 색상을 선택하고 이름을 'Blue500'으로 지정한다. 피그마의 로컬 스타일에서는 슬래시(/)가 그룹을 만드는 역할이라면 토큰에서는 온점(.)이 그 역할을 대신한다.
(5) 토큰에서 색상 스타일 확인하기
토큰에서 생성한 색상 스타일을 피그마의 로컬 스타일에는 적용되지 않는다.
2.2 토큰 스타일과 로컬 스타일의 적용
(1) 토큰을 로컬 스타일에 적용하기
토큰 화면 하단의 [Style & Variables]를 클릭하여 [Export styles & variables to Figma] 버튼을 클릭하고 [Confirm]을 클릭하면 토큰에서 만든 색상 스타일이 피그마의 로컬 스타일에 적용된 것을 알 수 있습니다.
(2) 로컬 스타일을 토큰으로 불러오기
반대로 로컬 스타일을 토큰으로 불러오기 위해서는 토큰 화면 하단의 [Style & Variables]을 클릭하여 [Import Style]을 선택하고 창이 뜨면 [Import] 버튼을 클릭합니다.
(3) 로컬 스타일을 토큰으로 불러오기 2
[Import Style] 화면에서 [Local style]메뉴의 색상이 그대로 보여지는 것이 아니라 지정했던 이름과 속성을 코드로 보여줍니다. 이때 불러오고자 하는 스타일을 선택하여 옆의 [+]을 클릭한 뒤 우측 상단의 [X]를 클릭하여 창을 닫으면 됩니다.
(4) 등록된 토큰과 코드 확인하기
창을 닫고 토큰을 확인하면 로컬 스타일에서 가져온 그룹의 색상과 텍스트 스타일이 등록된 것을 알 수 있습니다. 상단의 JSON 아이콘 [{ }]을 클릭하면 디자인 속성의 코드를 확인할 수 있습니다. 이렇게 등록된 토큰을 개발자와 공유하면 개발자는 코드를 손쉽게 얻을 수 있어 협업이 용이합니다.
3. 컨스트레인트(Constraint)
- 정의 : 오브젝트 또는 디자인 요소를 프레임의 크기에 맞춰 위치를 고정하는 기능입니다.
- 장점 : 컨스트레인트를 사용하면 화면의 크기가 변화해도 디자인 요소들이 원래의 위치에 존재하도록 할 수 있습니다.
- LEFT: 부모 프레임의 왼쪽에 고정됩니다.
- RIGHT: 부모 프레임의 오른쪽에 고정됩니다.
- CENTER: 부모 프레임의 중앙에 고정됩니다.
- LEFT & RIGHT (SCALE): 부모 프레임의 가로 크기 변화에 따라 비례하여 크기가 조절됩니다.
- TOP: 부모 프레임의 상단에 고정됩니다.
- BOTTOM: 부모 프레임의 하단에 고정됩니다.
- CENTER: 부모 프레임의 세로 중앙에 고정됩니다.
- TOP & BOTTOM (SCALE): 부모 프레임의 세로 크기 변화에 따라 비례하여 크기가 조절됩니다.
최신 정보 및 데이터:
반응형 디자인 지원 강화: 다양한 화면 크기 및 해상도에 대응하는 반응형 디자인을 효율적으로 제작할 수 있도록 컨스트레인트 기능이 지속적으로 개선되고 있습니다. 복잡한 레이아웃에서도 컨스트레인트를 조합하여 유연하고 예측 가능한 반응형 동작을 구현할 수 있습니다.
스마트 컨스트레인트 (Smart Constraints): 컴포넌트 내부 요소들의 간격이나 정렬 방식을 자동으로 조절해 주는 스마트 컨스트레인트 기능이 발전하고 있습니다. 이를 통해 컴포넌트의 내용이 변경되더라도 레이아웃이 깨지지 않고 유지될 수 있습니다.
반응형의 상황에 따라 [Constraints] 옵션 조절이 필요합니다.
만약 상단 가운데 있는 로고의 [Constraints] 메뉴의 좌우 옵션을 'Left + Right'로 설정하고 프레임의 크기를 변경하면 탑 컨테이너와 같이 로고도 좌우로 늘어나는 것을 알 수 있습니다. 따라서 위치를 중앙에 두고자 할 때는 'Center' 옵션을 지정합니다.
4. 오토레이아웃(Auto Layout)
- 정의 : 요소의 위치나 간격을 동적으로 관리하고 조정할 때 사용하는 옵션입니다.
- 기능 : 디자인 요소 간의 관계를 유지하면서 화면의 크기 또는 기기의 방향에 따라 UI 요소가 적절하게 조정되어 일관된 레이아웃을 유지할 수 있습니다.
- 단축기 : Shift + A
4.1 오토레이아웃 활용하기
(1) 방향 설정 : 오브젝트 정렬 방향을 선택합니다.
(2) 간격 조정 : 오브젝트 간의 가격 조정을 합니다.
(3) 정렬 : 프레임 내부 오브젝트의 위치와 방향을 정렬합니다.
(4) 패딩 설정 : 오브젝트 외부의 간격 조정을 합니다.
(5) 프레임 넓이 조절하기
- [Resize to fit]을 클릭하면 변경되었던 넓이가 패딩 옵션은 그대로 둔채 사각형에 딱 맞게 줄어들고, 가로와 세로의 넓이 조절 옵션은 [Hug]로 변경됩니다. 이때 상하좌우 패딩 값이 '0'이 되면 여백은 생기지 않습니다.
- 넓이, 높이 조절 옵션이 [Fix]일 때 내부의 오브젝트가 늘어나거나 줄어들어도 오브젝트를 감싸고 있는 'Frame'의 크기는 변경되지 않는다. [Hug]인 경우 내부의 오브젝트가 늘어나거나 줄어들면 'Frame'의 크기도 같이 늘어나거나 줄어든다.
최신 정보 및 데이터:
중첩된 오토 레이아웃 (Nested Auto Layout): 오토 레이아웃 프레임 안에
또 다른 오토 레이아웃 프레임을 중첩하여 더욱 복잡하고 동적인 레이아웃 구조를
만들 수 있습니다. 이를 통해 다양한 크기와 내용 변화에 유연하게 대응하는 UI
컴포넌트를 디자인할 수 있습니다.
자동 리사이징 (Resizing): 오토 레이아웃 프레임 내부 아이템의 내용이
변경될 때 프레임의 크기가 자동으로 조절되는 기능을 제공합니다. 텍스트 길이가
늘어나거나 아이템이 추가/삭제될 때 레이아웃이 자동으로 조정되어 디자인
유지보수 효율성을 크게 향상시킵니다.
min/max width/height: 오토 레이아웃 프레임 또는 내부 아이템의 최소 및
최대 너비/높이를 설정하여 특정 크기 이상 또는 이하로 줄어들거나 늘어나지
않도록 제어할 수 있습니다.
Wrap 기능: 오토 레이아웃 내 아이템들이 프레임 너비를 초과할 경우
자동으로 다음 줄로 넘어가도록 설정할 수 있습니다. 반응형 디자인에서 특히
유용하게 활용됩니다.
