피그마(Figma)를 처음 사용하려고 하면 화면에 다양한 메뉴가 보여서 어디서부터 시작해야 할지 막막할 수 있습니다. 포토샵이나 일러스트레이터를 사용해 본 사람도 프레임, 레이어, 오토 레이아웃 같은 기능은 낯설게 느껴질 수 있는데요.
피그마는 웹사이트와 모바일 앱 UI 디자인부터 카드뉴스, 배너, 프로토타입 제작까지 활용할 수 있는 디자인 도구입니다. 여러 사람이 같은 파일에서 작업하고 의견을 주고받을 수 있다는 점도 특징입니다.
이번 글에서는 피그마를 처음 사용하는 분들을 위해 계정 준비부터 도형과 텍스트를 활용한 디자인 제작, PNG 이미지 저장 방법까지 순서대로 알아보겠습니다.
1. 피그마란 무엇일까요?
피그마는 웹사이트와 모바일 앱의 화면을 디자인하고, 인터랙션을 연결해 시제품을 만들어 볼 수 있는 디자인 도구입니다.
별도의 디자인 프로그램을 설치하지 않고 웹 브라우저에서 사용할 수 있으며, 데스크톱 앱도 제공합니다. 파일을 공유하면 권한에 따라 다른 사람과 함께 작업하거나 디자인에 댓글을 남길 수 있습니다.
피그마를 활용할 수 있는 작업은 다음과 같습니다.
웹사이트 및 모바일 앱 UI 디자인
SNS 카드뉴스와 프로모션 배너 제작
버튼, 아이콘 등 반복해서 사용하는 디자인 요소 관리
화면 전환과 클릭 동작을 확인하는 프로토타입 제작
디자인 시안 공유 및 협업
디자인을 처음 배우는 단계라면 모든 기능을 한꺼번에 익히기보다 프레임, 도형, 텍스트, 색상 변경, 이미지 내보내기부터 시작하는 것이 좋습니다.
2. 피그마 시작하기
① 피그마 공식 사이트 접속하기
먼저 Figma 공식 홈페이지에 접속해 계정을 만들거나 로그인합니다.
로그인한 뒤 디자인 파일을 새로 만들면 작업을 시작할 수 있습니다. 계정 유형과 현재 제공되는 기능에 따라 파일 생성 한도 등이 다를 수 있으므로, 무료로 시작하려면 최신 요금제와 파일 제한도 함께 확인하세요.
② 새 디자인 파일 만들기
파일 브라우저에서 새 디자인 파일을 생성합니다. 화면에 표시되는 새 파일 생성 메뉴는 인터페이스 업데이트에 따라 달라질 수 있습니다.
디자인 편집 화면이 열리면 가운데의 캔버스가 작업 공간입니다. 이곳에 도형과 텍스트를 배치해 디자인을 만듭니다.
③ 작업 화면 이해하기
피그마의 편집 화면은 크게 네 영역으로 나눠 이해하면 편합니다.
상단 툴바: 프레임, 도형, 텍스트 등 디자인 요소를 추가하는 도구
왼쪽 패널: 페이지와 레이어를 확인하고 정리하는 영역
가운데 캔버스: 실제 디자인을 배치하고 편집하는 작업 공간
오른쪽 속성 패널: 선택한 요소의 크기, 위치, 색상 등을 조정하는 영역
처음에는 모든 메뉴를 외우려고 하지 않아도 됩니다. 도형이나 텍스트를 하나 선택해 보고 오른쪽 패널에서 어떤 설정을 바꿀 수 있는지 확인하는 것만으로도 기본적인 사용법을 익힐 수 있습니다.
3. 프레임 만들기
프레임(Frame)은 디자인 요소를 담는 컨테이너입니다. 웹페이지 한 화면이나 모바일 앱 화면, SNS 콘텐츠처럼 일정한 크기의 작업 영역을 만들 때 사용합니다.
프레임 만드는 순서
상단 툴바에서 프레임 도구를 선택합니다.
캔버스에서 드래그해 원하는 크기의 프레임을 만듭니다.
오른쪽 속성 패널에서 너비와 높이를 조정합니다.
필요하다면 기기나 콘텐츠 유형에 맞는 프레임 프리셋을 선택합니다.
프레임 도구의 기본 단축키는 F입니다.
예를 들어 모바일 앱 첫 화면을 디자인한다면 모바일 기기 프리셋을 선택해 작업 영역을 만들 수 있습니다. SNS 콘텐츠를 제작한다면 필요한 이미지 비율에 맞춰 프레임 크기를 설정하면 됩니다.
초보자 팁: 처음부터 복잡한 웹사이트를 만들기보다 하나의 프레임 안에 제목, 이미지, 버튼을 배치하는 연습부터 시작해 보세요.
4. 도형과 텍스트 추가하기
프레임을 만들었다면 이제 디자인에 필요한 요소를 배치할 차례입니다.
① 사각형과 원 만들기
피그마에서는 사각형이나 원 같은 기본 도형을 활용해 카드, 버튼, 배경 등을 만들 수 있습니다.
사각형 도구를 선택합니다.
캔버스에서 드래그해 도형을 만듭니다.
도형을 선택한 상태에서 오른쪽 패널의 크기와 색상 설정을 조정합니다.
원이 필요하다면 타원 도구를 사용합니다.
사각형 도구의 기본 단축키는 R입니다.
도형은 배경이나 장식 요소로 활용할 수 있고, 여러 도형을 조합하면 간단한 아이콘이나 일러스트도 만들 수 있습니다.
② 텍스트 추가하기
텍스트 도구를 선택하거나 T 키를 눌러 캔버스에 글자를 입력합니다.
텍스트를 선택하면 오른쪽 패널에서 글꼴, 글자 크기, 굵기, 정렬 등을 조정할 수 있습니다. 제목과 본문에 서로 다른 크기를 적용하면 콘텐츠의 정보 구조를 더 쉽게 전달할 수 있습니다.
예를 들어 카드뉴스를 만든다면 다음처럼 구성할 수 있습니다.
제목: 핵심 내용을 크게 표시
본문: 제목보다 작은 크기로 설명 작성
강조 문구: 색상이나 굵기를 달리해 중요한 정보 표시
글자를 배치한 뒤에는 프레임 바깥으로 벗어나지 않았는지, 글자끼리 겹치지 않았는지도 확인하세요.
5. 색상과 크기 조정하기
도형이나 텍스트를 선택하면 오른쪽 속성 패널에서 색상과 크기 등을 조정할 수 있습니다.
색상 변경 방법
색상을 변경할 요소를 선택합니다.
오른쪽 패널에서 Fill(채우기) 항목을 찾습니다.
색상 영역을 클릭합니다.
원하는 색상을 선택하거나 색상 코드를 입력합니다.
Fill은 선택한 요소의 내부 색상을 의미합니다. 테두리를 추가하고 싶다면 Stroke 설정을 활용할 수 있습니다.
크기와 위치 조정하기
요소를 선택한 뒤 오른쪽 패널에서 너비와 높이, X·Y 위치 값을 조정할 수 있습니다. 캔버스에서 직접 드래그해 이동하거나 크기를 변경하는 방법도 있습니다.
여러 요소를 정렬할 때는 눈대중으로 배치하는 것보다 정렬 도구와 위치 값을 활용하면 더 일관된 결과를 만들 수 있습니다.
6. 레이어와 그룹 이해하기
피그마에서 도형과 텍스트를 추가하면 각 요소가 레이어로 관리됩니다. 레이어는 디자인 요소를 개별적으로 선택하고 편집할 수 있도록 해주는 단위입니다.
예를 들어 카드뉴스 한 장에는 배경, 제목, 본문, 이미지가 각각 별도의 레이어로 존재할 수 있습니다.
그룹과 프레임은 무엇이 다를까요?
| 구분 | 그룹(Group) | 프레임(Frame) |
|---|---|---|
| 주요 역할 | 여러 요소를 함께 관리 | 요소를 담는 작업 영역 구성 |
| 자체 크기와 속성 | 프레임과 같은 컨테이너 속성은 없음 | 자체 크기와 속성 설정 가능 |
| 활용 예시 | 함께 이동할 장식 요소 | 앱 화면, 카드, 버튼 영역 |
여러 요소를 한꺼번에 이동하고 싶다면 그룹으로 묶는 방법을 사용할 수 있습니다. 요소의 크기와 배치, 내부 여백 등을 관리해야 한다면 프레임이 더 적합할 수 있습니다.
초보자라면 왼쪽 레이어 패널에서 각 요소의 이름을 알아보기 쉽게 바꾸는 습관도 들여 보세요. 나중에 디자인을 수정할 때 원하는 요소를 찾기가 훨씬 수월해집니다.
7. 완성한 디자인을 PNG로 저장하기
디자인을 완성했다면 이미지 파일로 내보내 다른 프로그램이나 블로그에서 사용할 수 있습니다.
이미지 내보내기 순서
내보낼 프레임이나 요소를 선택합니다.
오른쪽 속성 패널의 Export(내보내기) 영역을 찾습니다.
+버튼을 눌러 내보내기 설정을 추가합니다.파일 형식에서 PNG를 선택합니다.
Export 버튼을 눌러 파일을 저장합니다.
브라우저에서 피그마를 사용한다면 일반적으로 브라우저의 다운로드 위치에 파일이 저장됩니다. 실제 저장 위치는 브라우저 설정에 따라 달라질 수 있습니다.
PNG, JPG, SVG 중 어떤 형식을 선택할까요?
PNG: 투명 배경이 필요하거나 글자와 그래픽이 포함된 이미지에 적합합니다.
JPG: 사진처럼 파일 크기를 줄이는 것이 중요한 이미지에 적합합니다. 투명 배경은 지원하지 않습니다.
SVG: 아이콘이나 로고처럼 크기를 확대해도 선명해야 하는 벡터 그래픽에 적합합니다.
블로그 썸네일이나 카드뉴스처럼 글자와 도형이 포함된 이미지를 저장할 때는 PNG부터 사용해 보면 좋습니다. 로고나 아이콘을 다른 디자인 프로그램에서 편집할 예정이라면 SVG도 고려할 수 있습니다.
8. 피그마 초보자가 알아두면 좋은 단축키
자주 사용하는 기본 단축키를 익혀 두면 작업 속도를 높이는 데 도움이 됩니다.
| 기능 | Windows | Mac |
|---|---|---|
| 프레임 도구 | F | F |
| 사각형 도구 | R | R |
| 텍스트 도구 | T | T |
| 그룹 만들기 | Ctrl + G | ⌘ + G |
| 복제하기 | Ctrl + D | ⌘ + D |
| 실행 취소 | Ctrl + Z | ⌘ + Z |
| 캔버스 이동 | Space를 누른 채 드래그 | Space를 누른 채 드래그 |
단축키는 선택한 요소와 현재 작업 상태에 따라 동작이 달라질 수 있습니다. 더 많은 단축키는 피그마의 공식 도움말에서 확인할 수 있습니다.
9. 처음 연습하기 좋은 디자인 과제
기본 도구를 익혔다면 간단한 카드뉴스 한 장을 직접 만들어 보세요.
다음 순서대로 진행하면 됩니다.
원하는 크기의 프레임을 만듭니다.
배경색을 지정합니다.
제목과 본문 텍스트를 추가합니다.
사각형이나 원을 이용해 장식 요소를 만듭니다.
요소의 크기와 간격을 조정합니다.
완성된 프레임을 PNG로 내보냅니다.
처음부터 완벽하게 만들 필요는 없습니다. 프레임을 만들고, 요소를 배치하고, 색상과 크기를 조정하고, 파일을 내보내는 흐름을 한 번 경험하는 것이 중요합니다.
기본 작업에 익숙해졌다면 다음 단계로 오토 레이아웃(Auto Layout), 컴포넌트(Components), 프로토타입(Prototype) 기능을 배워 보세요. 반복되는 디자인 요소를 효율적으로 관리하고 실제 화면처럼 동작하는 시안을 만드는 데 도움이 됩니다.
피그마는 처음에는 메뉴가 많아 복잡하게 느껴질 수 있지만, 기본적인 디자인 작업은 프레임과 도형, 텍스트, 속성 조정, 내보내기 순서로 익히면 됩니다.
처음부터 모든 기능을 배우기보다 작은 카드뉴스나 모바일 화면 하나를 완성해 보세요. 기본 도구에 익숙해진 다음 오토 레이아웃과 컴포넌트 기능을 추가로 익히면 보다 효율적으로 디자인 작업을 진행할 수 있습니다.