[UIUX] 피그마(Figma) 사용법, Design패널 단축키 안내, 영문 피그마 (2)

 

 

 

Figma 오른쪽 패널 Design, Prototype, Inspect

피그마 디자인 패널

피그마 사용해보셨나요? UIUX의 떠오르는 툴셋 피그마의 기능에 대해 정리해보겠습니다.

오늘은 오른쪽 패널 중 Design 패널의 단축키를 정리해보겠습니다.

※피그마 영문 버전 기준입니다.

 

왼쪽 사진에 보이는 것이 피그마 UI 상 오른쪽에 위치한 Design 패널인데요,

Design 패널에는 정렬과 오브젝트의 위치, 각도, 굴곡, 레이어, 면과 선,

컴포넌트 정보와 움직임 제한 그리고 내보내기 등에 대해 설정할 수 있습니다.

 

 

 

 

 

 

 

 

 

피그마 정렬

오브젝트 선택 후 정렬 또는 프레임안에서 정렬 버튼을 누를 경우 프레임 기준으로 정렬됩니다.

단축키 option (Alt) + A, W, S, D를 누르면 도형이 방향키처럼 따라 움직입니다. (게임 해보신 분들은 알만한 방향키)

option (Alt) + A 는 왼쪽 / option (Alt) + W는 위 / option (Alt) + S 아래 / option (Alt) + D 는 오른쪽

Mac	option + A, W, S, D
Window	alt + A, W, S, D

프레임 혹은 도형기준으로 수직과 수평 정렬할 수 있습니다.

수평 정렬 단축키

Mac	option + H
Window	alt + H

수직 정렬 단축키

Mac	option + V
Window	alt + V

 

정렬 패널에 있는 화살표 아이콘을 누르시면 Tidy Up, Distribute vertical spacing, Distribute horizontal spacing 이 나오는데요,

아래 움직이는 이미지를 보고 어떻게 작동하는지 알려드리겠습니다.

 

Distribute horizontal / vertical spacing (간격 동일 분배)

n개의 오브젝트 선택 후 Distribute horizontal / vertical spacing 를

누르면 각 오브젝트에 동일한 간격이 분배됨.

 

Mac	control + option + H (가로) / control + option + V (세로)
Window	alt + shift + H (가로) /  alt + shift + H (세로)

 

 

 

 

혹은 n개의 오브젝트 선택 후 오른쪽 하단에 생성된 아이콘을

클릭하면 정렬됨.

 

 

 

 

 

 

또는 n개의 오브젝트 선택 후 오른쪽 Design 패널에서 수치 값을 조정하여 간격을 조정할 수 있음.

 

 

 

 

Tidy Up

 

 

오브젝트 끼리 세로, 가로 간견을 맞추어 정리해줌

 

Mac	control + option + T
Window	alt + shift + T

 

Export 내보내기

 

 

이미지, 리소스의 확장자 or 배수를 선택해 내보내기로 추출가능

 

 

 

 

 

 

---

따로 단축키가 없어 설명만 작성하고 넘어갑니다.

피그마 레이어

레이어 블렌드 모드와 opacity(불투명도) 조정

피그마 Fill (면)

지정 색상, opacity(불투명도) 조정 및 그라디언트 설정

이미지일 경우 이미지의 옵션 Fill, Fit, Crop, Tile (패턴) 설정 및

노출, 대비, 색조, 온도, 그림자 등을 설정