Figma 그래픽 스타일 및 레이아웃

Jamie·2023년 12월 23일
0

Figma

목록 보기
2/3
post-thumbnail

✅ 그래픽 스타일

1️⃣ 스타일 가이드

색상 팔레트

디자인에 사용되는 주요 색상을 선정하고, 컬러 코드 및 색상 이름으로 정리한다.
명확한 명명 규칙을 통해 일관성 있는 색상 사용을 유지한다.

글꼴

사용할 폰트와 그에 대한 스타일(볼드, 이탤릭 등)을 명시하고, 계획된 글꼴을 사용하여 일관된 텍스트 스타일을 유지한다.

텍스처 및 패턴

배경이나 특정 요소에 사용되는 텍스처나 패턴을 정의하고, 일관된 디자인에 활용한다.

아이콘

아이콘 라이브러리를 구축하여 사용할 아이콘을 관리하고, 다양한 크기 및 형식으로 일관성 있게 활용한다.

2️⃣ 컴포넌트 및 스타일 시스템

컴포넌트 활용

디자인 요소를 컴포넌트로 변환하고, 재사용 가능한 구성 요소로 저장하여 일관성 있는 UI를 구축한다.

스타일 시스템 구축

색상, 글꼴, 텍스처 등의 스타일을 설정하여 관리하고, 디자인 요소들에 일관성 있게 적용한다.

스타일 가이드 문서

디자인 가이드 문서를 작성하여 스타일 가이드를 문서화하고 팀 내외에 공유하여 일관성을 유지한다.

3️⃣ 이미지 및 아이콘 활용

이미지 삽입 및 편집

이미지를 삽입하고, 크기 조절, 마스킹, 필터 적용 등의 편집 기능을 활용한다.

아이콘 활용

아이콘 라이브러리를 활용하여 다양한 아이콘을 삽입하고, 크기 조절 및 색상 변경을 통해 디자인에 활용한다.

이미지 및 아이콘 관리

이미지와 아이콘을 폴더 구조로 관리하여 쉽게 찾을 수 있도록 한다.


✅ 정렬과 레이아웃

1️⃣ 요소 정렬

Figma의 정렬 기능 활용

특정 요소들을 가로/세로로 정렬하거나 일정한 간격으로 정렬하는 기능을 활용한다.

그룹핑과 정렬

여러 요소를 그룹핑하고, 이를 기준으로 정렬하여 디자인의 일관성을 유지한다.

심미적 정렬

디자인의 미적 감각을 고려하여 요소들을 정렬하여 균형있고 조화로운 디자인을 만든다.

2️⃣ 그리드 및 가이드라인

그리드 시스템 활용

그리드 기능을 활용하여 요소들을 정렬하고 배치한다. 그리드를 설정하여 정확한 배치를 유지한다.

가이드라인 활용

가이드라인을 설정하여 요소들의 간격과 정렬을 일관되게 유지하고, 디자인의 일관성을 높인다.

자주 사용되는 레이아웃 패턴 구축

필요한 경우, 자주 사용되는 레이아웃 패턴을 구축하여 디자인 작업을 효율적으로 진행한다.

3️⃣ 자동 레이아웃

요소의 자동 배치 및 조정

자동 레이아웃 기능을 활용하여 요소들을 배치하고, 요소의 크기가 변경될 때 자동으로 조정되도록 한다.

동적 요소 추가 및 관리

자동 레이아웃을 사용하여 동적인 요소를 추가하고, 변경사항을 관리하여 작업의 효율성을 높인다.

profile
#UXUI #코린이

0개의 댓글