피그마 기초
피그마란?
웹 기반 UI/UX 디자인 툴로, 현재 디자이너들에게 가장 자주 쓰이는 디자인 툴이다. 무료이며, 협업이 쉽고, 디자인을 저장하거나 공유하기도 편리하기 때문이다.
출저 : https://uxtools.co/survey/2023/ui-design
피그마 공식 홈페이지
인터페이스
툴바:선택, 생성, 그리기, 확대, 축소 등 여러 기능을 모아둔 곳이다.
왼쪽 사이드바:현재 레이어, 에셋 등읋 확인하고 관리한다.
이름 및 묶음:현재 캔버스의 이름이나 묶음을 알려준다
현재 참가자:현재 캔버스를 보고 있는 사용자를 알려준다.
오른쪽 사이드바:선택된 툴바와 연관된 기능을 보여준다
중앙 화면:캔버스, 디자인을 만들고 수정하는 곳이다.
프레임, 섹션
- 프레임 : 디자인을 하기 위한 기본적인 형태, 툴바에서 프레임을 선택한 다음 캔버스를 누르거나 드래그하면 100x100만큼이나 드래그한 만큼 프레임을 만들 수 잇다. 프레임은 늘리거나 줄일 수 있으며 오른쪽 사이드바의 프레임 프리셋에서 특정 기기(아이폰,갤럭시,노트북 등등)에 맞는 프리셋을 불러올 수 있다.
(프레임 프리셋을 통해 아이폰14-15 프레임과 갤럭시 대형을 가져온 모습) - 섹션 : 피그마 내에서 프레임이나 프레임 내부의 컴포넌트, 컴포넌트의 모음인 그룹 등을 묶어서 섹션화 시킬 수 있다. 섹션은 주로 공용 캔버스 내에서 작업물을 특정한 묶음으로 모아야 할 때 사용한다.
기본 도형, 텍스트
-
도형 : 기본 도형인 사각형은 프레임처럼 툴바 내 컴포넌트 항목을 선택한 다음 화면을 클릭하거나 드래그함으로써 사각형을 그릴 수 있다. 또한 사각형 외의 동그라미, 화살표, 별, 외부 이미지 등 다양한 방식으로 만들 수 있다.
-
텍스트 : 텍스트는 툴바의 텍스트 항목을 선택한 후 화면을 클릭하거나 드래그해서 원하는 크기의 텍스트 레이어를 만들 수 있다. 만들어진 텍스트 레이어는 크기나 길이, 글꼴 등을 조절 가능하다.
코멘트, 좌측 사이드바
- 코멘트 : 작업자 간의 의사소통을 위해 사용하는 기능으로, 툴바에서 코멘트를 선택한 다음 좌클릭을 통해 원하는 코멘트를 남기고 답변을 남기고 필요 시 멘션을 통해 특정 멤버에게 알림이 가게 할 수도 있다.
(코멘트 영역을 선택한 이후 슬래시 버튼을 누르면 실시간으로 마우스 포인터를 따라 내가 입력한 기능이 보이는 기능을 사용할 수 있다.)
- 좌측 사이드바 : 좌측 사이드바는 레이어나 컴포넌트를 잠금으로써 지우지 않거나, 숨김 기능을 통해 화면을 체크할 수 있다.
정렬, 프레임 크기 조정 및 오리엔테이션
-
정렬 : 여러 컴포넌트나 레이어를 묶어 선택한 다음 오른쪽 사이드바에서 좌우나 상하 정렬을 가능하게 한다.
-
프레임 사이즈 : 프레임 사이즈는 우측 사이드바에서 프레임을 선택한 다음 해당 크기를 프리셋에 맞추어 변경하거나 직접 작성해 변경할 수 있다.
-
오리엔테이션: 자바스크립트의 미디어 쿼리처럼 화면을 세로/ 가로로 전환할 수 있다.
포지션, 디멘션
-
포지션 : x, y값을 통해 해당 좌표를 조절할 수 있고 x,y값의 기준은 해당 컴포넌트가 속한 프레임을 기준으로 설정된다.
-
디멘션 : 프레임의 크기와 높이, 회전과 화면 외각의 굴절도를 조절할 수 있다.
레이어
- 레이어 : 피그마 내의 모든 객체는 기본적으로 레이어로, 좌측 사이드바에서 확인 가능하다. 디자인 편리성과 오브젝트 관리를 편하게 하기 위해 프레임, 그룹 등으로 묶어 관리할 수도 있다.
채우기, 선
-
채우기 : 프레임이나 컴포넌트에 색을 채울 수 있다. 피그마에서는 필에서 여러 색을 동시에 넣고 섞은 혼합색을 하나의 결과로서 보여줄 수 있다.
-
선 : 채우기와 비슷하게 외각선의 색깔을 조절 가능하며 크기, 두께, 외각선 기준 등을 조절 가능하다.
선택된 컬러, 이펙트, 내보내기
-
선택된 컬러 : 여러 레이어들을 선택하면 해당 레이어들의 채우기나 선에 사용된 색들을 모아 볼 수 있으며, 해당 컬러값들을 한번에 바꿔서 디자인을 크게 바꿀 수 있다.
-
이펙트 : 우측의 이펙트 옵션에서 레이어에 그림자를 추가하거나 블러 기능을 통해 레이어에 특별한 효과를 추가해줄 수 있다.(세부 옵션으로 그림자나 블러 값 조절 가능)
-
내보내기 : 완성된 프레임을 오프라인으로 저장하거나 작업 공간에 내보내기를 통해 저장해 공유하거나 다른 인원이 각자 수정할 수 있도록 할 수 있다.![]
(내보낼 파일은 SVG, PNG, JPG, PDF 4가지 형식으로 지정할 수 있다.)
