[최신 업데이트] 초보자를 위한 피그마 사용법 소개

피그마 사용법을 처음 익힌다면 새 디자인 파일에서 프레임을 만들고, 텍스트와 버튼을 배치한 뒤 두 화면을 연결해 보세요. 이 글에서는 로그인 화면을 예로 들어 오토 레이아웃, 컴포넌트, 프로토타입과 공유까지 이어서 설명합니다. 무료 Starter 플랜으로도 이 기본 과정을 따라 할 수 있습니다.

먼저 작업 화면과 기본 도구를 살펴보고, 하나의 로그인 흐름을 직접 구성한 뒤 무료·유료 플랜의 차이를 알아보겠습니다. 팀에서 다른 디자인 도구도 검토하고 있다면 마지막의 Pixso 작업 환경 비교를 참고하세요.

1부. Figma란 무엇인가? 피그마의 특징과 사용 환경

피그마(Figma)는 브라우저에서 사용할 수 있는 UI/UX 디자인 도구입니다. 디자인을 클라우드에 저장하고 여러 사람이 같은 파일을 함께 편집할 수 있어 디자이너뿐 아니라 기획자·개발자도 화면을 보며 의견을 나눌 수 있습니다. 자동 저장은 현재 작업을 보관하는 기능이며, 과거 상태를 살펴보거나 복원하는 버전 기록과는 구분됩니다.

📌피그마의 주요 특징

(1) 실시간 협업 기능

• 여러 팀원이 동시에 동일한 디자인 파일을 수정
• 실시간 커서 공유로 누구의 작업인지 한눈에 확인
• 댓글(코멘트) 기능으로 피드백과 리뷰가 간편
• 접근 권한을 뷰어·에디터 등으로 세분화 가능

(2) 웹 기반 접근성

• Windows, macOS, Linux에서 지원되는 브라우저로 디자인 파일에 접근
• 별도 설치 없이 바로 작업 가능
• 클라우드 자동 저장과 과거 작업을 확인하는 버전 기록 제공

(3) 다양한 사용자층에 적합

• 개인 디자이너: UI 연습, 포트폴리오 제작에 유리
• 팀(디자이너·기획자·개발자): 공동 작업과 의사소통이 원활
• PM·마케터 등 비디자이너 직군:기획안·와이어프레임 등을 시각적으로 표현하기에 좋음

2부. 초보자를 위한 기본적인 Figma 사용법

(1) 피그마 회원가입과 새 파일 생성하기

figma.com에 로그인한 뒤 파일 브라우저의 Drafts에서 새 Figma Design 파일을 만듭니다. 파일 이름을 ‘로그인 화면 연습’으로 바꾸면 나중에 쉽게 찾을 수 있습니다. 개인 연습은 Drafts에서 시작하고, 함께 편집할 파일은 팀의 공동 작업 공간에 두세요. 무료 파일 수와 협업 범위의 차이는 아래 비교표에서 설명합니다.

(2) UI에 익숙해지기

피그마를 처음 열면 중앙에는 작업의 중심이 되는 캔버스가 표시되며, 이곳에서 프레임(Frame)과 다양한 요소를 배치하게 됩니다. 키보드 F 키를 누르면 iPhone 화면 크기, 웹 페이지, 소셜 미디어 레이아웃 등 다양한 프레임 템플릿을 바로 선택할 수 있어 초보자도 쉽게 작업 시작이 가능합니다.

아래 기능 설명에 사용한 화면은 이전 Figma 인터페이스입니다. 현재 화면에서는 도구 위치가 다를 수 있으므로 기능 이름과 단축키를 함께 확인하세요.

왼쪽에는 Layers(레이어) 패널이 있어 현재 캔버스에 배치된 프레임·텍스트·도형 등 모든 요소가 순서대로 표시됩니다. 드래그하여 순서를 바꾸거나 그룹화할 수 있으며, 아이콘으로 요소 종류가 구분되어 작업 구조를 빠르게 파악할 수 있습니다. 같은 영역의 Assets(에셋) 탭에서는 저장된 컴포넌트를 바로 불러올 수 있고, Pages(페이지) 메뉴를 이용해 디자인을 여러 섹션으로 나누어 관리할 수도 있습니다.

📌 UI 핵심 포인트 정리

• 중앙: 작업 캔버스
• 왼쪽: 레이어·에셋·페이지 관리
• F 키: 다양한 프레임 템플릿 빠르게 선택
• 요소들은 아이콘으로 구분되어 구조 파악이 쉬움

(3)기본 기능 조작하기

F는 프레임, R은 사각형, O는 원, T는 텍스트 도구를 선택하는 단축키입니다. 객체를 선택하면 우측 Design 패널에서 크기·위치·모서리 반경을 조정할 수 있습니다. 화면을 일정한 간격으로 정렬하려면 프레임에 레이아웃 그리드를 추가하세요. 웹 화면에서는 12열 그리드, 세부 간격을 맞출 때는 8px 단위처럼 프로젝트에 맞는 규칙을 정해 사용할 수 있습니다.

이미지나 아이콘을 삽입한 후에는 Fill(채우기) 설정에서 이미지 비율·가시성을 조정할 수 있고, Constraints(제약조건) 기능을 통해 프레임 내에서 고정될 위치나 반응형 레이아웃 동작을 설정할 수 있습니다. 또한 Stroke(선) 또는 Effects(효과) 옵션에서 그림자, 블러 등 다양한 시각 효과를 손쉽게 추가할 수 있으며, 각 항목 오른쪽의 눈 모양 아이콘으로 빠르게 표시 여부를 전환할 수 있습니다.

📌 기본 조작 핵심 요약

• F·R·O·T: 프레임·사각형·원·텍스트 도구 선택
• 우측 패널: 크기, 간격, 그리드, 반응형 속성 설정
• 이미지 삽입: Fill·Constraints로 크기와 위치 제어
• Stroke·Effects: 선, 그림자, 블러 등 시각 효과 추가

로그인 화면에서 환영 화면까지 직접 연결하기

로그인 버튼을 누르면 환영 화면으로 이동하는 간단한 모바일 화면을 만들어 보겠습니다. 여기서 만드는 것은 화면 전환을 확인하는 프로토타입이며, 실제 계정 인증 기능은 별도로 개발해야 합니다.

1. 두 화면 만들기: F를 누르고 캔버스에 프레임을 만듭니다. 우측 패널에서 너비 390, 높이 844로 설정하고 이름을 Login으로 바꿉니다. 프레임을 복제해 Welcome이라고 이름 붙입니다. Login에는 T로 ‘로그인’ 제목을, R로 입력란 모양의 사각형을 그리고 그 안에 ‘이메일’을 적습니다. Welcome에는 ‘환영합니다’를 적습니다.
2. 문구에 맞춰 커지는 버튼 만들기: 화면 밖의 빈 캔버스에 ‘로그인’ 텍스트를 만들고 선택한 뒤 Shift + A를 누릅니다. 텍스트를 감싼 오토 레이아웃 프레임의 좌우 패딩을 16px, 상하 패딩을 12px로 설정합니다. 가로·세로 크기는 Hug contents로 지정하고, 프레임에 배경색을 넣습니다. 문구를 ‘이메일로 로그인’으로 바꾸면 패딩을 유지한 채 버튼 너비가 늘어납니다.
3. 버튼을 재사용하기: 버튼 프레임을 선택하고 우클릭 메뉴의 Create component로 컴포넌트를 만듭니다. 이름을 Button/Primary로 바꾼 뒤 Assets에서 이 버튼을 Login 프레임으로 끌어옵니다. 이렇게 놓은 버튼은 인스턴스입니다. 메인 컴포넌트의 모서리 반경을 바꿔 인스턴스에도 반영되는지 확인하고, 로그인 화면의 버튼 문구는 인스턴스에서 수정합니다.
4. 화면 연결하기: Login 안의 버튼 인스턴스를 선택하고 Prototype 탭으로 전환합니다. 버튼의 연결점을 Welcome 프레임으로 드래그하고 트리거를 On click, 액션을 Navigate to, 목적지를 Welcome으로 설정합니다. 기기를 휴대전화로 지정하면 같은 트리거가 On tap으로 표시될 수 있습니다. 첫 연습에서는 애니메이션을 Instant로 두면 이동 여부에 집중할 수 있습니다.
5. 실행하고 공유하기: Login 프레임을 우클릭하고 Add starting point로 시작점을 지정한 뒤 Present로 실행합니다. 로그인 버튼을 눌렀을 때 Welcome으로 이동하면 연결이 된 것입니다. 버튼의 글자를 누를 때만 반응한다면 연결 시작점을 텍스트 대신 버튼 프레임으로 옮겨 클릭 영역을 넓힙니다. 화면이 이동하지 않으면 목적지가 Welcome인지 확인합니다. 검토할 팀원에게 링크를 보낼 때는 Share에서 해당 이메일에 Can view 권한을 줍니다. 상대방에게 접근 요청 화면이 뜨면 초대받은 이메일로 로그인했는지와 링크의 접근 범위를 확인하세요.

3부. 실무에서 바로 쓰는 피그마 핵심 기능 설명

피그마는 초보자도 쉽게 활용할 수 있지만, 실무에서 디자인 속도와 효율을 높이기 위해 꼭 알아두어야 할 핵심 기능들이 있습니다. 아래에서는 레이아웃 구성부터 프로토타입 제작, 파일 공유, 커뮤니티 활용까지 실무에서 가장 자주 쓰이는 7가지 주요 기능을 정리했습니다.

(1)오토 레이아웃(Auto Layout)

오토 레이아웃은 요소의 배치 방향·간격·패딩과 크기 조정 규칙을 프레임에 지정하는 기능입니다. 앞의 로그인 버튼처럼 내용에 맞춰 크기를 바꾸려면 Hug contents를 사용합니다. 부모 오토 레이아웃 프레임의 남은 공간을 채우는 자식 요소에는 Fill container를 사용합니다. 버튼 문구나 화면 너비를 바꿔 보면 두 설정의 차이를 확인할 수 있습니다.

레이어를 선택한 뒤 Shift + A를 누르면 오토 레이아웃 프레임이 추가됩니다. 우측 패널에서 방향, 간격, 패딩을 지정하고 가로·세로 크기를 조정하세요. Hug contents는 오토 레이아웃 프레임에, Fill container는 오토 레이아웃 프레임 안의 자식 요소에 적용합니다. 자세한 동작은 Figma 공식 오토 레이아웃 가이드(영문)에서 확인할 수 있습니다.

(2)컴포넌트(Components)

컴포넌트는 디자인 파일 내에서 재사용할 수 있는 UI 요소입니다. 시간을 절약할 수 있는 Figma의 또 다른 유용한 기능이죠. Ctrl/Cmd + Alt + K를 눌러 컴포넌트를 생성할 수 있습니다. 컴포넌트로 변환되면 프레임이나 도형이 보라색 컴포넌트 아이콘으로 바뀝니다.

인스턴스는 메인 컴포넌트와 연결된 복제본입니다. 같은 파일에서 메인 컴포넌트를 수정하면 연결된 인스턴스에도 변경이 반영되지만, 인스턴스에서 개별 수정한 텍스트·색상 등의 오버라이드는 유지됩니다. Detach instance로 연결을 끊은 요소는 더 이상 메인 컴포넌트의 변경을 받지 않습니다. 다른 파일에서 쓰는 라이브러리 컴포넌트는 변경 사항을 라이브러리에 게시하고 사용하는 파일에서 업데이트를 적용하는 과정이 필요합니다.

(3)프로토타입(Prototyping)

오른쪽 패널에서 'Prototype' 탭을 확인할 수 있습니다. 이곳에서 UI 화면 간의 인터랙션을 추가하고 최적화하여 사용자 흐름(스토리)을 완성할 수 있습니다.

프로토타입 탭에서 화면을 연결하고 트리거와 액션을 지정해 흐름을 구성합니다. 휴대전화에서는 Figma 모바일 앱으로 프로토타입을 열 수 있습니다. 파일을 볼 수 있는 계정으로 로그인한 뒤 Recent 또는 검색에서 파일을 찾아 View prototypes를 선택하세요.

(4)프레젠테이션(Presentation)

Present를 선택하면 프레젠테이션 보기에서 프로토타입을 실행할 수 있습니다. 편집기에서 선이 연결되어 있는지만 보지 말고, 시작 화면부터 직접 버튼을 눌러 이동 순서와 돌아오는 경로를 확인하세요. 앞의 예제에서는 Login 화면에서 Welcome으로 이동하는 것이 확인할 핵심 동작입니다.

(5) 파일 가져오기 및 내보내기

Figma에서는 다양한 디자인 파일과 이미지를 프로젝트에 가져올 수 있습니다. 또한, 작업한 에셋을 SVG, JPG, PNG 등 다양한 포맷으로 손쉽게 내보낼 수 있습니다.

(6) 공유 및 협업

Share 버튼을 선택하면 다른 사람을 디자인 파일에 초대할 수 있습니다. 이메일 주소를 입력하거나 접근 범위를 설정한 링크를 복사해 공유합니다. 검토만 하는 사람에게는 보기 권한을, 함께 수정하는 사람에게는 편집 권한을 부여하세요. 댓글은 특정 화면이나 요소에 남길 수 있어 피드백의 위치를 전달하기 좋습니다.

(7) 커뮤니티

마지막으로 소개할 곳은 Figma 커뮤니티입니다. 여기서는 전 세계 디자이너들이 공유하는 다양한 작업물과 템플릿을 만나볼 수 있습니다. 마음에 드는 템플릿을 복사하거나 가져와 Figma 파일에 적용할 수 있으며, 생산성을 높여주는 플러그인도 설치할 수 있어 작업 효율을 크게 높일 수 있습니다.

✨피그마 무료/유료 기능 차이

항목	Drafts / Starter	유료 플랜
파일·폴더 구성	개인 Drafts 파일은 무제한입니다. 팀 공동 편집은 3개 파일, 파일당 3페이지까지 사용할 수 있습니다.	Professional 이상에서는 공동 작업 파일과 폴더를 확장해 운영할 수 있습니다.
버전 기록	Drafts와 Starter 파일은 최대 30일 범위입니다.	유료 팀의 프로젝트에 있는 파일은 전체 버전 기록을 확인할 수 있습니다. 개인 Drafts는 30일 범위입니다.
오토 레이아웃·컴포넌트·기본 프로토타입	사용 가능	사용 가능
라이브러리·스타일·변수 공유	팀 라이브러리 게시 기능 미포함	유료 플랜에서 제공
프로토타입 변수·표현식·조건부 로직	미포함	유료 플랜에서 제공
동시 공동 편집	공동 작업 파일에서 참여 인원 제한 없이 편집할 수 있습니다.	편집 작업에는 해당 제품을 사용할 수 있는 좌석과 파일 편집 권한이 필요합니다.
커뮤니티 파일·플러그인·위젯	사용 가능	사용 가능

무료 플랜에서도 자동 저장과 공동 편집을 사용할 수 있습니다. 유료 버전 기록의 차이는 과거 기록에 접근할 수 있는 범위입니다. 파일 이름 메뉴의 Show version history에서 기록을 확인할 수 있으며, 과거 버전을 복원하려면 파일 편집 권한이 필요합니다. 세부 항목은 Figma 공식 플랜 비교(영문)와 가격 FAQ(영문)에 정리되어 있습니다.

4부. 다른 협업 도구도 살펴보고 싶다면: Pixso

팀에서 디자인 도구를 비교하고 있다면 Pixso에서도 화면 디자인, 컴포넌트 재사용, 프로토타입과 협업 작업을 이어갈 수 있습니다. 위의 로그인 예제처럼 작은 화면 두 장을 만들어 보고 파일 정리, 의견 공유, 개발 전달 방식이 팀에 맞는지 비교해 보세요.

✨Pixso의 주요 기능:

• 브라우저에서 화면 디자인과 공동 작업
• Sketch 파일 호환 기능
• 디자인 속성 확인과 개발 전달
• AI 패널을 활용한 시안 탐색

(1) Pixso 회원가입 및 시작 방법

Pixso 홈페이지에서 로그인한 뒤 작업 공간에서 새 디자인 파일을 만듭니다. 비교할 때는 같은 로그인 화면을 만들어 보면 좋습니다. 입력란, 버튼, 화면 이동을 차례로 구성하면 필요한 작업을 어느 메뉴에서 수행하는지 익힐 수 있습니다.

(2) 작업 공간과 파일 관리

작업 공간에서는 디자인 파일과 템플릿을 찾을 수 있습니다. 파일을 열면 캔버스와 레이어를 사용해 화면을 구성합니다. 처음에는 팀 전체 파일을 옮기기보다 작은 프로젝트로 파일 정리와 공동 편집 방식을 익히는 편이 좋습니다.

(3) Pixso AI 기능 활용

Pixso AI 패널에서는 만들고 싶은 화면의 요구 사항을 입력해 시안을 탐색할 수 있습니다. 로그인 화면이라면 대상 기기, 입력 항목, 주요 버튼과 화면의 목적을 구체적으로 적어 보세요. 결과를 받은 뒤에는 문구 길이와 버튼 크기, 화면 이동을 직접 조정해 디자인 의도에 맞춥니다.

(4) 개발 전달과 D2C⁺

Pixso의 D2C⁺는 엔터프라이즈 공간의 Dev View에서 디자인 구조를 프런트엔드 코드로 변환하는 기능입니다. Enterprise Full-feature Seat 또는 Dev Seat가 필요하며, 엔터프라이즈 공간의 파일에서 사용할 수 있습니다. D2C⁺ 빠른 시작(영문)에서 적용 조건과 지원 프레임워크를 확인하세요.

팀에서 사용할 기능과 좌석별 조건은 Pixso 요금제에서 비교할 수 있습니다.

결론.

피그마 사용법을 익히는 것은 디자인 입문자와 숙련자 모두에게 큰 도움이 됩니다. 직관적인 인터페이스와 강력한 협업 기능 덕분에 누구나 빠르게 디자인을 시작할 수 있죠. 이번 글을 통해 Figma의 핵심 기능과 활용 방법을 이해했다면, 실제 프로젝트에 바로 적용해보는 것을 추천합니다.

기본 기능을 한 번에 외우기보다 로그인 화면 하나를 완성하고, 버튼 문구와 크기를 바꾸며 결과를 확인해 보세요. 오토 레이아웃으로 간격을 유지하고, 컴포넌트로 같은 버튼을 재사용하고, 프로토타입으로 다음 화면을 연결하는 흐름을 익히면 다른 화면에도 적용할 수 있습니다.