[#41] 피그마(Figma) 기초 실습 (1)

디자인 토큰

여러 플랫폼과 디바이스에 걸쳐 디자인을 확장할 수 있는 기술

1️⃣ 토큰 플러그인 설치

플러그인에서 Tokens Studio for Figma 설치 후 Run

2️⃣ 토큰 실행

[Tokens Studio]가 실행되면 [New empty file] 클릭하여 토큰 실행시키기

3️⃣ 색상 지정 및 반영

• [Color] 항목 우측의 [+]를 클릭하여 색상 선택 ➡ export
• import 로컬 스타일을 토큰으로 불러오기
• Github와 연동해서 스타일 불러오기 ➡ 토큰 실행 후 [Settings] 선택 ➡ [Add new]에서 [Github] 선택 후 내용 작성 ➡ [Apply] 적용 ➡ export

 

컨스트레인트

다양한 디바이스 크기에 맞게 화면의 크기가 늘어나거나 줄어들어도 원래의 위치에 구성 요소가 존재하도록 할 수 있는 기능

 

오토레이아웃

디자인의 요소의 위치나 간격을 동적으로 관리하고 조정할 때 사용하는 옵션

• 디자인 요소 간의 관계를 유지하면서 화면의 크기 또는 기기의 방향에 따라 UI 요소가 적절하게 조정되어 일관된 레이아웃을 유지할 수 있게 도와줌
• 반응형 디자인을 구현할 때 유용하게 사용됨

1️⃣ 오토레이아웃 적용하기

예를 들어 두 개의 사각형을 함께 선택하고 단축키 [Shift + A] 적용

2️⃣ 간격이나 패딩 값 조절하기

3️⃣ 프레임 규격 설정하기

[width] 버튼 클릭해서 최소, 최대 값 설정 가능

4️⃣ 프레임 넓이 조절하기

[Resize to fit]을 통해 패딩 옵션은 그대로 둔 채 사각형에 딱 맞게 줄어들고, 가로와 세로의 넓이 조절 옵션을 [Hug]로 변경

• Hug: 자식 요소의 크기에 맞춰 부모 프레임(컨테이너)이 자동으로 사이즈를 맞추는 것

그룹, 프레임, 컴포넌트

• 그룹: 콘텐츠를 하나의 그룹으로 묶는 개념
• 프레임: 콘텐츠를 아우르는 컨테이너의 개념
• 컴포넌트: 재사용이 가능한 디자인 요소를 묶은 것

• 컴포넌트의 경우 인스턴스를 생성할 수 있음