Chapter 1. Figma 소개와 설치
- 피그마는 UX, UI 디자인, 웹 사이트 디자인, 프로토타이핑 등 다양한 디자인 작업 지원
- UX 리서치, 유저 플로우 제작, 아이디어 수립, 브레인스토밍을 목적으로 하는 기획 단계에서도 활용 가능한 피그젬 파일이 있음
- 하나의 파일에 여러 명이 함께 수정 가능
- 아래 링크에서 다운로드 가능!
Chapter 2. Figma 인터페이스
- 커뮤니티에서 소스 가져와서 사용할 수도 있음
인터페이스
- Quick Actions 자주 사용하는 기능 - 검색할 수 있음
[툴 바]
- 순서대로 문자 툴, 리소스 툴, 핸드 툴, 코멘트 툴
[레이어 패널]
- 레이어 패널 - [assets]에서 컴포넌트 볼 수 있음
- 우측 상단 책 모양 -> '팀 라이브러리'
[캔버스 속성 패널]
- 우측 상단 삼각형(Play) 모양은 '미리보기' 기능
- 어떤 요소를 선택하느냐에 따라 속성이 우측 패널에서 나타남
Chapter 3. 형태 만들기
3-1. 기본 도형
- 배경색 바꾸기
- [툴 바]에서 Frame 누르면 우측 패널에 다양한 아트보드가 나오지만 사용자 설정할 때는 드래그하고 우측에서 속성 조정
- 레이어 속성 변경
- 채색
-
많은 부분이 일러스트레이터와 포토샵과 비슷했다.
- 한쪽 모서리만 변형하려면 alt 누르고 당기기
- 우측에서 네 모퉁이의 값 따로 설정할 수 있음
- 원형에 Arc 점 생김 - 당기면 원의 형태를 변경할 수 있음
- 형태를 회전시킬 수 있는 점
- Ratio: 원을 선으로 만들어주는 점
- 우측에서 옵션 값 수정할 수 있음
3-2. 다각형과 별
- ctrl + A 하면 아트보드까지 전체 선택되니 안에 있는 것들만 선택하려면 드래그로
- 다각형은 각각 모퉁이를 조절할 수 없음
- 카운트 점이 있어서 이걸로 다각형 수정할 수 있음
- 우측 패널에서 count 아이콘으로도 가능
- 별 툴: 모퉁이 점, 카운트 점, ratio 점(별을 얼마나 뾰족하게 하느냐)
- 화살표 툴: 우측 [stroke] 패널에서 속성 조절
3-3. 선의 형태
- shift로 수평 하게 그릴 수 있음
- 선을 center, inside, outside로 두고 만들었을 때
- 보통 inside를 씀
- Join 순서대로 만들었을 때 외곽선 모양
- 선의 속성 변경할 수 있고, custom 들어가면 더 세밀하게 조정 가능
- Dash cap에 따른 획 모양 변화
- 커스텀으로 대쉬의 갭을 개별로 조절할 수 있음
3-4. 펜 툴의 활용
- esc로 펜 툴 해제 (ctrl + 빈 공간 클릭으로도 가능)
- 펜 툴 사용 후 상단의 <Done> 눌러야 나올 수 있음
- 무브 툴을 펜 툴로 만든 상자에 커서를 올리면 펜 툴로 바뀌고 ancr 생성 가능
- 단, 패스가 따라 나오기 때문에 esc로 종료해야 함
- ancr 하나만 지우려면 펜 툴 선택 - alt 누르고 펜 툴로 선택
- 펜 툴로 만든 도형의 안쪽을 채우려면: 페인트 툴로 내부 클릭
- 블랜드 툴: 앵커 포인트 클릭하면 곡선이 생기며 핸들이 생김, 핸들로 방향 조정
- alt 키 누르면 핸들 각도 조절 가능
- 도형을 따로 인식하게 하려면 하나 만들고 <Done>, 하나 만들고 <Done> 처리해야 함
- 펜 툴로 곡선을 만들다가 다시 직선을 만들고 싶을 때!
- 앵커 안쪽으로 핸들을 넣고 다시 나오면 직선이 생김
- 곡선의 각도가 큰 영역이 필요하면 드래그해서 시작하는 게 좋음
- 양쪽의 핸들을 가운데 앵커로 모아 넣으면 뾰족해짐
3-5. 불리언과 마스크
- 패스파인더 기능과 같다!
- 도형 더블 클릭하면 직접 선택 도구와 같은 기능
- 이 기능을 사용하면 그룹이 됨
[도형 안에 이미지 넣기]
- 도형 만들고 이미지를 도형 위에 올리기
- 이미지와 도형 다중 선택 - 상단의 마스크 아이콘 선택
- 마스크 기능 해제할 때: 왼쪽 레이어 패널에서 도형 선택 후 마스크 아이콘 다시 누르기
Chapter 4. 그래픽 스타일의 활용
4-1. 컬러와 그레이디언트
- 우측 [Fill] 패널을 활용해 채색하기
- 오? 숫자 코드 6자리 중 앞 두 개는 Red, 중간 두 개는 Green, 마지막 두 개는 Blue의 값이라고 한다!
- [Fill] 패널과 [Stroke] 패널 우측 상단의 + 아이콘 누르면 검은색의 20% 알파값 가지고 있는 색으로 바뀜 (디폴트 값)
- 색상 등록하는 방법 ↑ [Style] - [Create Color]
- 그레이디언트 채색 방법
- [Fill] 패널에서 Linear/Radial/Angular/Diamond 선택 후 슬라이더로 생성
- 그레이디언트 모양이 다름
- 양 끝 점으로 방향이나 범위를 조절할 수 있음
- 그레이디언트도 색상 스타일 추가할 수 있음