Figma
Figma를 디자인이 아니라 컴포넌트를 나누는 방법으로만 사용해 봤었는데, 디자인적으로 사용해 보기 위해 Figma 강의를 추천받아 단축키 등 필요한 것들을 정리해 보려고 한다!
1. Team 생성
왼쪽 사이드바에 Create new team을 통해 새로운 Team을 만든다.
2. 파일 생성
New design file로 새 파일을 생성!
3. 상단 바의 기능들
- 움직이기
- 프레임 (데스크톱, 모바일 사이즈 등)
- 도형 만들기
- 펜 툴
- 텍스트 (모바일 버전은 보통 14px을 사용한다고 한다)
- 코멘트 확인
- 창 이동
- 코멘트 추가
4. 오른쪽 사이드바 기능들
아이폰 프레임 안의 도형을 오른쪽 사이드바의 툴을 통해 정렬하거나, border-radius를 조절할 수 있다.
shift 키를 누른 상태로 조절하면 10px 간격으로 조정된다.
- Design
정렬, 위치 조정 - Constraints
상하좌우 어디를 기준으로 할 건지. scale은 화면 크기에 맞춰서 자동적으로 왔다 갔다 한다. - Pass through
opacity 조절 - Fill
도형의 색상을 채우는 곳. 자주 사용하는 색상을 Color styles로 지정해놓을 수 있다. (수정도 편함)
5. PlugIn
Unsplash를 이용하면 다양한 사진들을 도형 안에 넣을 수 있다. (배경이라던가, 프로필 사진 등)
6. Ctrl + Alt + K / Command + Option + K => 컴포넌트 만들기
중복으로 쓰이는 요소들을 컴포넌트로 만든 후, 필요한 개수만큼 복사하고 난 다음 컴포넌트들을 모두 클릭하고 우클릭 -> Add Auto Layout을 클릭하면 자동으로 정렬된다.
처음 만든 컴포넌트(메인 컴포넌트)만 수정해도 복제된 다른 컴포넌트들의 내용까지 같이 수정된다.
7. Prototype
프로토 타입에서 특정 버튼 클릭 후 변하는 화면, 프레임 스크롤링 등을 설정할 수 있다. 꼭! 요소들을 프레임으로 만들어야 한다. 방법은 앞에서 사용한 오토 레이아웃 등으로 정렬을 한 후 우클릭 -> Frame selection
8. 커뮤니티 활용
커뮤니티의 icon kit나 wireframe kit 등을 활용하여 편집해보자.
9. Inspect
CSS, iOS, Android 종류별로 코드를 볼 수 있다.