etc. 피그마(figma) Manual

❗ 피그마(figma) 란?

 

https://www.figma.com/

Figma: the collaborative interface design tool.

- 웹 기반 UI/UX 디자인 및 프로토타이핑 툴.
- 무료 프로그램임에도 불구하고 어도비 XD, 스케치 등에 꿀리지 않거나 오히려 더 나은 성능을 보여줌.

- 한 화면에서 디자인 / 포로토타이핑 / 코드 모두 확인 가능. (올인원 툴)

 

- 웹 기반 툴이라 설치가 따로 필요없으나, 네이티브 앱도 지원중.

- 저장이 존재하지 않음. 작업을 하는 순간마다 자동으로 저장됨.

- 협업에 특화되어있음. 웹 기반이기 때문에 링크를 공유하여 온라인 실시간 작업 가능.

- 디자이너와 개발자의 소통을 도와주는 기능이 많음.

- 개발자가 참조할 수 있는 개발 툴바가 있고, 수치값을 확인할 수 있음.

 

- 프로토타입 제작 가능 (어느 버튼을 클릭하면 어떤 화면으로 이동하는지)

- 기존에 스케치 에서 사용하던 파일 Import 가능

- 커뮤니티를 통해 공개된 도메인 안에 프로젝트 공개 가능 

 

 

 

 

 

❗ 피그마(figma) 사용법

 

1 / Drafts 우측에 + 버튼 ㅡ Design File 클릭

 

 

2 / 좌상단 아이콘 클릭 후 (그리드 모양)

- 원하는 크기의 캔버스 선택 

(주로 웹 기획을 하므로 Desktop을 선택)

Desktop (1280 * 720)

 

 

 

 

 💡 KEYBOARD SHORTCUTS 단축키

 

 

 

<필수 기능>

 

• Ctrl + \ (역슬래시) : UI 숨기기 / 나타내기
• I : 색 고르기 (팔레트)
• Ctrl + / :  퀵 앤션 (기능 , 메뉴 , 커맨드, 플러그인 등 검색)

 

<Tool 단축키>

	Move Tool	V
	Frame Tool	F
	Pen Pencil (손글씨)	P shift + P
	Text Tool	T
	Comment	C
	Rectangle Ellipse	R O
	Line Arrow Line	L shift + L
	Slice Tool	S

 

 

 

 

 

- 그 外 단축키들은 추후 추가 예정

 

 

---

 

 

 

 

REFERENCE

Figma 사용법 (UI 툴 피그마로 프로토타입 만들기)