Language

HTML + CSS/피그마

설치 및 다운로드 / 기본 인터페이스

초코렛맛 2024. 5. 2. 13:38

■ 피그마 설치

○ 피그마 사이트

 

○ 피그마 로그인(구글과 연계)

 

  피그마 다운로드

 

 

피그마 실행 / 주요 툴

 

○  새 파일 만들기

- 단축키 Ctrl + N

- 위 메뉴에서 Design file 누르기

 

 

○  이름변경

- 위의 이름을 클릭하면 이름을 변경할 수 있다.

 

 

○  확대 축소

-  Ctrl + 마우스 휠

- +, - 키

- Ctrl + 0 : 100% 크기

- 크기 수치조정

 

 

○  이동과 크기

- Move : 단축키 V : 이동을할 수 있는 툴

- Scale : 단축키 K : 오브젝트의 크기를 변경하는 툴

 

 

○  Frame, Section, Slice

- Section : 아트보드를 전체 관리하는 부분 단축키 Shift + S

- Frame : 아트보드 영역, 하나의 화면을 의미 단축키 A

- Slice : 원하는 영역을 내보낼 수 있는 영역 단축키 S

 

○  Shape

- 기본 도형툴 사각형 R, 원형 O, 선 L

 

○  Pen, Pencil

- Pen : 단축키 P 곡선과 직선을 벡터로 그릴 수 있다.

- Pencil : 단축키 Shift + P

- 도형을 더블클릭하여 벡터 편집을 시작할수 있다.

 

○  Text 툴

- 단축키 : T

- 클릭 드래그 하면 텍스트 박스가 생김

- Ctrl + Enter, Esc 종료

 

Hand 툴

- 단축키 : space

- 화면을 이동

 

○ Comment

- 댓글기능 단축키 C

 

Layers, Disign, proto type panel 등

 

○  Preference 설정

 

- 숫자키를 투명도로 설정하기 위해서는 umber key for opacity를 체크 해야함

- 체크 해제시 0 : 화면 100%, 1: 화면구성 100%, 2: 선택 100%

- 체크 불투명도 넣어줌 숫자를 두개를 눌러주면 5와8 58%로 변경됨

숫자 1개는 3 == 30%

 

 Ctrl, Alt

- Ctrl : 오브젝트 선택

- Alt : 간격 확인

 

오브젝트 내에서

- Ctrl : radius 1개씩 변경, 다중변경 변화

- Alt : 중앙점 고정 크기 변경

- Shift : 배율 고정

 

pen에서

- Ctrl : 선택, 선위에서는 곡선으로 변경, 포인터 위에서는 각도 변경

- Alt : 한쪽 각 변경, 포인트 빼기

 

 

Shift + space

- prototype 화면으로 보기

 

'HTML + CSS > 피그마' 카테고리의 다른 글

피그마 중급  (0) 2024.08.27
피그마  (0) 2024.05.27