기본 단축키

기본 기능

[Frame] F

[Text] T	// 누르고 입력하고 싶은 위치 바로 클릭하면 내용에 따른 크기 자동 조정

[Pen] P

[pipette] I

복사, 선택, 이동

[수직 이동] 개체 선택 + Shift + Drag

[정사이즈 도형] 도형 선택 후 shift + Drag

[복사] 개체 선택 + Alt + Drag

[수직 복사] 개체 선택 + Shift + Alt + Drag

[이전 동작 반복] Ctrl + D

[개개인 선택] Ctrl + Shift + 좌클릭

[전체 선택] Ctrl + A

개체(레이어) 정렬

[앞으로] 개체 선택  + ]

[뒤로] 개체 선택  + [

[맨 앞으로] 개체 선택 + Ctrl + Alt + ]

[맨 뒤로] 개체 선택 + Ctrl + Alt + [

플러그인/기능 검색

Ctrl + /

오토레이아웃

지정한 값이나 비율에 따라 자동으로 객체나 객체 사이의 간격을 맞출 수 있는 기능

개체 선택 + Shift + A

글자로부터 라벨의 간격을 살펴볼 수 있음

Ctrl + 객체 선택 + Alt + 왼쪽 마우스 올려 놓기

Resizing

오토레이아웃이 어떤 방식으로 객체를 감싸고 있을지 형태를 지정하는 것

Hug contents

프레임이 안에 있는 객체를 감싸줌. 안에 있는 내용에 따라 프레임 값 바뀜

Fixed

아무리 안에 있는 내용이 바뀌어도 프레임의 값을 고정

Fill Container

가로 길이를 바꾸는대로 텍스트가 길이를 맞춰서 꽉 채워짐

디자인 설정

스타일

개인뿐만 아니라 팀원과의 협업 시 텍스트 스타일의 이름은 분류/굵기/사이즈로, 색상 스타일의 이름은 분류/컬러명으로 통일하자

행간

두 줄 이상으로 넘어간 경우는 가독성을 위해 행간을 넓혀주도록 하자

스포이드

색상을 바꾸고 싶은 객체 선택 후 I를 눌러 스포이드로 원하는 색깔 클릭하면 바뀜

아이콘 컴포넌트

아이콘은 어떤 환경에서도 같은 크기를 가지고 있어야 디자인이나 개발하기 편리함
그러므로 24X24를 디폴트로 보통 두고 때에 따라 더 크게 더 작게 활용하기도 함

등록 방법

객체 선택 후 위 상단 바에서 컴포넌트 버튼 누르면 됨

아이콘만 선택되는게 아닌 아이콘을 감싸고 있는 모든 프레임이 선택되도록 하자

인스턴스로 복사한 아이콘의 값을 변경하고 메인 컴포넌트의 값을 변경하게 되면 인스턴스의 값이 변경되지 않음

그러므로 인스턴스 사용 시 주의!

Figma 플러그인/앱

Figma Mirror

휴대폰에 설치 후, 피그마 계정으로 로그인하면 데스크탑에서의 화면을 모바일로 확인 가능

1. 앱 스토어 or 구글 플레이 스토어에서 “Figma”를 검색해보세요.

2. 설치 후, 피그마 회원가입 시 사용했던 계정으로 로그인해주세요. 

3. 피그마 pc 버전에서 모바일로 확인하고 싶은 프레임을 클릭하세요. 

4. 피그마 모바일 화면에서, 미러링 동의 팝업이 뜨면 “Mirror”를 선택해주세요. 

5. 모바일 기기로 미러링 완료!

Unsplash

고화질의 무료 이미지를 적용할 수 있는 플러그인

1. 피그마 커뮤니티에서 “Unsplash”를 검색해주세요. 

2. 파일이 아닌, 플러그인 탭에서 “Install”을 눌러 설치해주세요. 

3. 피그마로 돌아가면, 상단 메뉴바의 “Plugin” 탭에서 Unsplash를 열어보실 수 있어요.

4. 이미지를 넣고 싶은 프레임을 클릭한 상태로, Unsplash를 열어 원하는 이미지를 골라 넣어보세요.

Lorem ipsum

희망하는 단어/문장/문단 수를 지정하면, 원하는 길이에 맞춰 랜덤으로 영어 문장이 만들어짐. 디자인 시안을 작업할 때 유용

1. 피그마 커뮤니티에서 “Lorem ipsum”를 검색해주세요. 

2. 파일이 아닌, 플러그인 탭에서 “Install”을 눌러 설치해주세요.

3. 피그마로 돌아가면, 상단 메뉴바의 “Plugin” 탭에서 Lorem ipsum를 열어보실 수 있어요.

Material Design Icons

구글 머터리얼 디자인 가이드에서 제공하는 무료 아이콘 모음집

1. 피그마 커뮤니티에서 “Material Design Icons”를 검색해주세요. 

2. 파일 탭에서 “Duplicate”를 눌러 설치해주세요. 

3. 피그마에서 해당 파일이 자동으로 열리면, 내가 원하는 아이콘을 자유롭게 선택해 사용해주세요!

IOS 14 UI kit

애플 ios의 시스템 ui를 손쉽게 갖다붙일 수 있는 플러그인

1. 피그마 커뮤니티에서 “IOS 14 UI kit”를 검색해주세요. 

2. 파일 탭에서 “Duplicate”를 눌러 설치해주세요. 

3. 피그마에서 해당 파일이 자동으로 열리면, 내가 원하는 컴포넌트를 자유롭게 선택해 사용해주세요!

아마 android UI도 같은 방법으로 가능할 듯