Figma 관련(명령어 등)

*Figma

- www.figma.com/ 

- 포토샵, 스케치와 비슷한 프로그램으로 share를 통해 협업이 가능하고 플러그인 등 설치하여 더욱 효율적으로 사용 가능하다.

 

*figma 단축키

- 정확한 단축키는 figma help center에서 확인 가능하다.

1. 화면 생성 : F

- F를 누른후 우측에 화면 선택(아이폰 se 등 휴대폰 ui 선택도 가능하다.)

2. 도형 생성 : R

- R를 누른 후 드래그 하면 도형 생성이 가능하다.

3. 좌측정렬 : Alt + A W S D
- Alt + A W S D 등을 통해 위, 아래, 좌, 우 정렬이 가능하다.

4. 색상 변경

- 우측  Fill 등을 통해 색상 변경이 가능하다.

5. 간격보기 : Alt

- 도형 클릭 후 Alt누르면 위, 아래, 좌, 우 간격이 보인다. ( 단, Alt 누르고 드래그 시 대상이 복사된다. )

6. 텍스트박스 생성 : T

- T를 누른 후 드래그 시 텍스트 입력할 수 있는 창을 생성할 수 있다.

- 글자 선택 후 Ctrl L T R 누르면 글자 정렬이 가능

- 글자를 도형 안에 넣은 후 가운데로 보내고싶은 경우 Alt + H V 등 클릭 (큰것을 기준으로 작은게 정렬된다)

7. 컴포넌트 생성

- 컴포넌트로 생성할 대상들을 왼쪽 창에서 Ctrl를 눌러 여러개 선택 후 우클릭하여 creat componuent를 누르면 생성된다. 

8. 그룹 설정/해제

- 그룹 설정한 대상들 클릭 후 Ctrl + g 눌러서 그룹 설정

- 그룹 해제는 그룹 클릭 후 Ctrl + Shift + g 눌러서 그룹 해제

*도형 관련 세부 설명

1. Clip content

- frame 우측 메뉴에 위치, 체크 시 도형이 화면 밖으로 나가도 화면에선 안 보이게 해준다.

2. Layout Grid : Ctrl + Shift + 4

- 격자(틀) 설정 (기본은 Grid, Columns, Rows 선택 가능하다.)

- Count (그리드 몇개 보이게 할지)

- Width 넓이 설정

- Type (기본은 Strech로 그리드를 늘려서 적용/ Center로 설정해야 늘려서 적용x)

- Gutter 그리드 간 간격

 

3. 도형 복사/간격표시 (Alt)

- 도형 클릭 후 Alt누르고 드래그 할 경우복사 or Alt + d 클릭하여 복사 가능 

- 도형 클릭 후 Alt 누르기만 하면 간격 표시 가능

 

4. 도형 사이즈/위치 등 변경

- 도형 클릭 후 우측에 X, Y, W, H 등등 나와있는것에서 마우스로 조절가능(입력해서도 조절 가능)

- 삼각형 등 생성시 우측에 다각형 생성에서도 적용 가능

- 별모양에서 앵커 포인트 통해서 모양 만들수 있음

 

5. Stroke 도형 테두리 넣기

- outside 선택 시 내부에 넣을수 있고, 색상 % 변경도 가능

6. 단축키 도움말 보기 (ctrl shift ?)

- ctrl shift ? 클릭하여 단축키 도움말을 볼 수 있다.

 

*텍스트 관련 세부 설명

- 우측에 Text에서 구글 폰트 등이 이미 로드되어있어서 원하는대로 사용이 가능하다.

- 컴퓨터에 있는 폰트도 사용 가능하다.

- 폰트어썸을 통한 폰트를 복사해와서 입력한 후 우측 Text에서 폰트어썸 텍스트를 선택해주면 폰트어썸에서 복사해온 문자도 출력이 가능하다.

 

*pen 관련 세부 설명

- 상단에 펜모양을 선택하여 펜 툴 사용 가능, 펜 툴 사용 시 빨간색으로 나오면 수평이 맞다는 걸 의미한다.

- 작업 후 좌측 상단에 Done 클릭 시 움직일 수 있고, 더블클릭 시 수정도 가능

- 앵커 포인터에 앵커도 추가가 가능하다.

 

*버전관리 관련 세부 설명

- 상단 프로젝트 명 옆 화살표 클릭 > show version history 클릭후 우측에 version history에서 시간대별로 자동저장된 버전을 확인할 수 있다.

- 시간대 별로 자동저장되는데 클릭 시 클릭한 시간대로 복구도 가능하다.

- 상단에 플러스 클릭하면 현재의 버전을 생성(저장)할 수 있다.

 

*프로토타입 관련 세부 설명(작업내역 연동)

- 우측 상단에 프로토타입 선택

- 희망하는 버튼 클릭 우측 중간에 원형 클릭하여 연동할 것으로 드래그해서 연결해주고 우측 상단에 플레이 버튼을 클릭하면 연동한 작업 내역을 확인할 수 있다.

*Grid 

- 사이트의 경우 스크롤바가 생겨서 넓이를 1900으로 설정

- 프레임에 레이아웃그리드설정 하는게 좋다.(모눈종이처럼 격자구조로 보인다)

- 레이아웃 그리드 하나 더 추가 후 컬럼으로 바꾸면 격자 생성가능