2025년 초보자를 위한 figma 사용법 소개

새로운 디자인 도구를 배우는 일은 쉽지 않지만, Figma 사용법은 비교적 간단합니다. Figma는 무료로 시작할 수 있고, Windows와 Mac 모두 지원하며, 특히 실시간 협업 기능이 뛰어나 개인은 물론 팀 단위 작업에도 적합합니다.

오늘의 글에서는 초보자도 쉽게 이해할 수 있도록 Figma의 기본 사용법부터 핵심 기능까지 체계적으로 소개합니다. 처음 Figma를 접하는 분들도 이 가이드를 통해 효과적으로 디자인을 시작할 수 있을 것입니다.

1부. Figma 사용법 -인터페이스 익히기

먼저, figma.com에 접속해 회원가입을 진행하세요. 기본 사용은 무료입니다! 회원가입을 완료했다면, 'Drafts(초안)' 메뉴로 이동해 'New File(새 파일)'을 클릭해 대시보드를 둘러볼 준비를 합니다.

(1) UI에 익숙해지기

화면 중앙에는 작업할 수 있는 빈 캔버스가 보입니다. 이곳에서 프레임(Frame)을 삽입할 수 있는데, 프레임은 Figma에서 가장 핵심적인 기능입니다. 키보드에서 F 키를 누르면 다양한 프레임 옵션을 오른쪽 패널에서 확인할 수 있습니다. iPhone 화면부터 소셜 미디어 게시물 레이아웃까지 다양한 템플릿이 준비되어 있습니다.

화면 왼쪽에는 'Layers(레이어)' 탭이 있습니다. 작업을 진행할수록 여기에는 캔버스에 추가된 다양한 레이어, 프레임, 요소들이 표시됩니다. 각 레이어는 드래그 앤 드롭으로 자유롭게 순서를 변경할 수 있으며, 프레임, 컴포넌트, UI 요소들은 텍스트 옆에 미니 아이콘으로 구분되어 표시됩니다.

레이어 외에도, 'Assets(에셋)' 탭에서는 모든 컴포넌트가 저장되어 쉽게 접근할 수 있으며, 'Pages(페이지)'에서는 디자인 파일의 다양한 섹션을 설정할 수 있습니다.

(2)기본 기능 조작하기

화면 좌측 상단에는 툴바가 위치해 있습니다. 여기서는 피그마 아이콘을 통해 파일 설정을 확인하고, 파일을 임포트/익스포트할 수 있습니다. 도형 툴 아이콘(또는 벡터 도형 버튼)을 선택하면 사각형, 원, 선 등의 도형을 생성할 수 있습니다. 또한 'Text(텍스트)' 버튼을 클릭하거나 T 키를 눌러 캔버스에 텍스트를 추가할 수 있습니다.

우측 패널의 'Design(디자인)' 탭에서는 프레임의 좌표와 크기 등의 세부 정보를 확인할 수 있습니다. 각 프레임과 객체의 코너 반경을 개별적으로 조정할 수도 있습니다. 여기서는 표준 8포인트 그리드나 가장 일반적으로 사용되는 12컬럼 그리드를 사용할 수 있는 레이아웃 그리드도 제공됩니다. 그리드 속성으로 이동하여 필요에 맞게 커스터마이징할 수 있습니다.

이미지를 추가하여 프레임이나 객체 안에 배치할 수도 있습니다. 이미지를 최적화하려면 우측 패널의 Fill(채우기) 섹션에서 이미지의 가시성을 조정할 수 있습니다. 또한 Constraints(제약조건)을 설정하여 특정 프레임이나 객체 내에서 이미지를 고정할 위치를 지정할 수 있습니다.

또한 이미지나 도형에 두꺼운 혹은 얇은 Strokes(스트로크)를 추가할 수 있습니다. 더 나아가 Effects(효과)를 적용할 수 있는데, 드롭 섀도우, 내부 섀도우, 배경 블러 등이 있습니다. 이러한 기능을 사용할 때 가장 좋은 점은 각 요소 옆에 있는 눈 모양 아이콘을 클릭해 간편하게 가시성을 조절할 수 있다는 것입니다.

2부. 피그마의 추가 기능 살펴보기

이제 디자인 워크플로우를 최적화하는 데 큰 도움이 되는 다른 기능들을 살펴보겠습니다:

(1)Auto Layout(자동 레이아웃)

이 기능은 프레임의 크기를 조정할 때 내부 콘텐츠가 자동으로 확장되거나 축소되는 프레임을 생성할 수 있어 게임 체인저 역할을 합니다. 결과적으로 반응형 디자인을 손쉽게 만들 수 있으며 작업 시간을 크게 단축시켜 줍니다.

원하는 레이어를 선택한 후 Shift + A를 누르면 오토 레이아웃(Auto Layout) 프레임이 생성됩니다. 오른쪽 패널에 있는 Figma 오토 레이아웃 속성을 활용해 프레임을 더욱 최적화할 수 있습니다.

(2)컴포넌트(Components)

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

그리고 가장 좋은 점은 무엇일까요? 바로, 마스터 컴포넌트에서 변경을 하면 해당 변경 사항이 모든 인스턴스(복제본)에도 자동으로 반영된다는 것입니다. 정말 편리하죠!

(3)프로토타이핑(Prototyping)

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

프로토타입 탭에서 각 화면을 앞뒤로 연결하여 인터랙션을 설정할 수 있습니다. 필요한 조정을 통해 흐름을 자연스럽게 만들 수 있죠. 또한, Figma Mirror 앱을 다운로드하면 모바일 기기에서 프로토타입을 실시간으로 미리보기할 수 있습니다.

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

화면 오른쪽 상단에 있는 재생(▶️) 아이콘을 클릭하면 새 탭에서 프레젠테이션 모드를 실행할 수 있습니다. 프로토타이핑 작업을 마친 후, UI 화면과 인터랙션이 어떻게 동작하는지 시각적으로 확인할 수 있습니다.

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

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

(6) 공유 및 협업

화면 오른쪽 상단에 있는 파란색 공유 버튼을 클릭하면 다른 사람을 디자인 파일에 초대할 수 있습니다. 이메일 주소를 입력하거나 링크를 복사해 공유할 수 있으며, 실시간 채팅과 댓글 기능을 통해 프로젝트에 대해 자유롭게 소통할 수 있습니다. 다양한 디자인 프로젝트에서 팀 협업을 강화하는 데 매우 유용한 기능입니다.

(7) 커뮤니티

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

3부. Figma 자주 묻는 질문(FAQ)

Q1. Figma는 배우기 쉬운가요?

네, Figma는 비교적 간단하며 사용자가 편안한 속도로 인터페이스를 익힐 수 있습니다. 기본 조작에 익숙해지는 데는 며칠 정도면 충분합니다.

Q2. Figma를 가장 잘 배우는 방법은?

초보자라면 YouTube에서 제공하는 Figma 단계별 튜토리얼을 시청하거나 블로그 포스트를 통해 자주 사용하는 기능과 기본기를 익히는 것이 가장 효과적입니다.

Q3. Adobe가 Figma보다 더 좋은가요?

Adobe 역시 훌륭하지만, 팀 협업 측면에서는 Figma가 압도적인 강점을 가지고 있습니다. 특히 다양한 서드파티 플러그인과 추가 기능을 통해 사용자 맞춤화가 가능해져, 더욱 뛰어난 생산성을 발휘할 수 있습니다.

4부. 피그마 대안: 무료 템플릿 제공!

Figma와 유사한 기능을 갖춘 대체 도구를 찾고 계신가요? 그렇다면 픽소(Pixso)를 추천합니다. Pixso는 Figma, Sketch 등 다양한 디자인 파일을 가져올 수 있으며, 팀 프로젝트를 위한 무제한 파일 및 템플릿을 무료로 제공합니다. 또 하나 놀라운 점은 별도의 앱 설치 없이 프로토타입 인터랙션을 바로 미리 볼 수 있다는 것입니다.

결론.

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

하지만 만약 더 많은 무료 템플릿과 무제한 파일 저장 기능을 원한다면, 픽소(Pixso)를 대안으로 고려해보세요. Pixso는 Figma 못지않은 뛰어난 사용성은 물론, 팀 작업에 최적화된 환경을 제공합니다. 특히 추가 설치 없이도 프로토타입을 바로 미리 볼 수 있어 더욱 효율적입니다.