본문 바로가기
UX UI

[UX UI figma] 피그마 인터페이스 (2) - 추가적인 툴바

by PNcoding 피엔코딩 2023. 3. 10.

안녕하세요 PNcoding입니다 :)

이번 포스팅에선 Figma의 인터페이스 중 추가적인 툴바에 대하여 알아보도록 할게요!

 

 

저번 포스팅에서 기본적인 툴바에 대하여 설명을 했으니 궁금하신 분은 저번 포스팅을 참고해 주시면 됩니다.

https://pncoding.tistory.com/6

 

[UX UI figma] 피그마 인터페이스 (1) - 툴바

안녕하세요 PNcoding입니다 :) 이번 포스팅에선 Figma의 인터페이스에 대하여 알아보도록 할게요! 우선 Figma(밑에서는 한글로 지칭하도록 하겠습니다)를 사용하기 위해서는 계정을 먼저 만들어 주셔

pncoding.tistory.com

 

 

 


 

 

 

 

 

 

피그마 화면의 중앙 상단에 있는 툴 내용과 오른쪽상단의 툴에 대하여 설명드리도록 하겠습니다.

 

 

 

 

1. 가운데 위치한 툴바 영역

 

 

 

피그마 화면의 가운데 부분에서는 내가 작업하고 있는 프로젝트의 이름을 변경하거나 프로젝트를 생성할 수 있는 피그마의 첫 화면으로 이동할 수 있습니다.

 

 

하지만 이 부분은 오브젝트를 선택했을 시 다른 모양으로 바뀌게 됩니다.

 

 

왼쪽부터 순서대로 설명을 드리도록 하겠습니다.

 

 

 

Edit Object

 

 

개체편집과 관련된 아이콘입니다.

단일 오브젝트를 선택한 뒤 아이콘을 클릭하거나 키보드의 엔터키나 마우스 더블클릭을 하면 벡터 편집 모드로 들어갈 수 있습니다.

 

 

 

 

 

벡터 편집 모드가 활성화되면 왼쪽상단의 툴바의 모양이 바뀌게 되며 오브젝트에 빗금이 쳐집니다.

이 모드에서 오브젝트에 패스 선을 긋거나, 합치거나 지워주거나 색을 넣어줄 수 있습니다.

 

 

 

 

 

Use As Mask

 

 

마스크를 만드는 기능입니다.

두 개 이상의 오브젝트를 선택한 다음 화면 상단의 마스크 버튼을 누르면 마스크 구조 생성이 됩니다.
기본적으로 제일 아래에 있는 오브젝트를 기준으로 위로 올라간 오브젝트가 잘리게 됩니다.

 

 

 

마스크 기능을 활용하면 이런 작업도 할 수 있습니다.

다음과 같이 두 개의 오브젝트를 준비 한 다음 마스크 작업을 하면 멋진 글씨를 만들어 줄 수 있습니다.

 

 

 

 

 

반응형

 

 

 

Boolean groups

 

 

불리언 그룹이라고 부르며 다른 디자인 프로그램에 있는 패스파인더와 동일한 기능을 합니다.

하나 이상의 오브젝트(도형)를 선택하여 합치거나 빼 줄 때 사용합니다.

아이콘을 클릭하면 여러 개의 메뉴가 나오며, 위에서부터 순서대로 설명드리도록 하겠습니다.

 

 

 

1. Union selection

두 오브젝트를 겹친 후 적용하면 두 개의 도형이 합쳐지며, 위에 올라간 도형의 색으로 표현이 됩니다.

 

 

 

2. Subtract selection

두 오브젝트를 겹친 후 적용하면 위에 올라간 도형의 모양으로 구멍이 생기게 됩니다.

 

 

 

3. Intersect selection

두 오브젝트를 겹친 후 적용하면 겹친 부분만 남게 됩니다.

 

 

 

4. Exclude selection

두 오브젝트를 겹친 후 적용하면 겹친 부분이 사라지고 겹치지 않은 부분이 남습니다.
(홀수로 겹친 부분은 남고 짝수로 겹친 부분은 사라진다고 보면 됩니다.)

 

 

 

5. Flatten selection

기본적으로 불리언그룹을 사용하면 겹쳐진 오브젝트들은 그룹으로 표현이 됩니다.

하지만 이 아이콘을 누르게 되면 그룹화가 만들어지는 것이 아닌 하나의 레이어로 변경이 됩니다.

 

 

 

 

 

 

Create Link

 

하이퍼링크를 만들어 줄때 사용합니다. 이 아이콘은 텍스트를 작성했을 때만 활성화가 됩니다.
링크를 걸고 싶은 텍스트를 클릭한 뒤 링크 아이콘을 클릭하면 url을 입력할 수 있는 창이 나옵니다.

그곳에 연결하고 싶은 url 주소를 입력하시면 되고, 입력이 완료되면 글자 밑에 밑줄이 생성이 됩니다.

 

 

 

 


 

 

2. 오른쪽에 위치한 툴바 영역

 

View Profile

 

파일을 보고 있는 구성원이 표시됩니다.

상대방이 어떤 작업을 하고 있는지 확인 가능하기에 피그마에서의 커뮤니케이션에 매우 유용한 기능이라고 할 수 있습니다.

 

 

 

 

 

 

Share

 

파일 공유를 하고 싶을 때 사용하며 이메일 입력하는 곳에 공유하고 싶은 상대의 이메일을 입력하면 파일 공유가 가능합니다.

 

 

 

 

 

Present

 

 

작업하고 있는 파일을 미리볼 수 있으며 프로토타입과 상호작용을 할 수 있습니다.

 

 

 

 

 

 

Zoom / View Ooptions

 

 

보고 있는 파일의 보기 비율을 조절할 수 있습니다.
뿐만 아니라 픽셀 미리보기, 픽셀 그리드, 레이아웃 그리드 룰러 등을 지정 가능하며,
특히 Rulers(룰러)는 자주 사용되기에 단축키를 알고 있으면 좋습니다.
룰러의 단축키는 Shift + R입니다.

 

 

 

 

 

 

 

 


 

 

 

 

여기까지에서 피그마의 추가적인 툴바에 대하여 알아보았습니다.

다음 포스팅에서는 레이어패널에 대한 내용을 알아보도록 합시다 :)

 

 

 

 

 

 

반응형