[figma] 디자인 시스템과 피그마 사용법

프론트엔드 패턴, 디자인 시스템, 피그마 사용법

1. 프론트엔드 패턴

1. 상점

• 목록 페이지 + 상세 페이지
• 가장 보편적
• ex) 블로그, 뉴스, 투투리스트

2. 단일 페이지 앱

• 페이지 이동 없이 한 화면 내에서 상호작용
• ex) 채팅, 지도

3. 설문조사

• 여러 페이지들을 통해 상태를 수집하고, 결과 페이지를 보여주는 형태
• 퍼널이라고도 함
• ex) 회원가입, MBTI 검사

3-1. 설문조사 개발 방식

• step에 따라 조건부 렌더링
• API 호출에 필요한 상태 한 눈에 관리
• 토스의 useFunnel 이라는 라이브러리 참고

3-2. 다이어그램 라이브러리

• Mermaid 사용하기

2. 디자인 패턴

1. 컬러

• 메인 컬러를 정하고 채도에 따라 100~900으로 지정

2. 폰트

• 크기, 굵기에 따라 100~900 지정

3. 컴포넌트

• 버튼, 인풋 등등 공통 컴포넌트 만들기
• hover, focused, blur 모두 고려

참고하면 좋은 사이트

Material Design

3. 피그마 사용법

1. 눈금 생성하기

• shift+R
• 전체 화면 레이아웃 짤 때 사용, 마진 등등

2. 사진 너비, 높이 같게하기

• 사진 클릭 후 너비, 높이 옆에 있는 자물쇠 아이콘을 누른다.

3. 기본 단축키

• R: 사각형 생성
• T: 텍스트 생성
• O: 원 생성

4. auto-layout

• 선택 후 shift+A

5. 버튼 생성

• 텍스트 생성 후 auto-layout
• 패딩 지정
• fill로 배경색 지정

6. 상위 요소의 너비에 가로로 붙게 하기

• 하위 요소를 누른 후 fill container 클릭
• gap을 auto로 변경

7. 컴포넌트 만들기

• 우클릭 후 create component
• properties에서 variant로 속성들 지정
• 컴포넌트의 + 버튼을 누르면 새로운 속성 지정 가능
• 좌측 위에 Assets를 누르면 컴포넌트 확인, 삽입 가능

8. 공통 스타일 지정하기

• 스타일 만든 후 Text 우측에 있는 버튼 클릭
• Name 지정

---

참고자료

토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
[UX/UI디자인] 디자인 시스템 작업 실무 프로세스 이야기
내가 디자인 초보자다! 그럼 이걸 보세요 [Figma] [무작정 따라하기]