카테고리 없음

Cursor + Figma MCP 가이드 - Figma 계정 생성 및 기본 사용법

퇴근하고싶은 2025. 10. 28. 09:00

Figma란?

Figma(피그마)는 웹 브라우저에서 작동하는 디자인 도구입니다. 포토샵이나 일러스트레이터처럼 디자인을 만들 수 있지만, 별도의 프로그램 설치 없이 인터넷만 연결되면 어디서든 사용할 수 있습니다. 특히 UI/UX 디자인(앱, 웹사이트 화면 디자인)에 최적화되어 있습니다.

왜 Figma를 사용하나요?

  • ✅ 무료로 시작 가능: 개인 사용자는 무료로 충분히 사용할 수 있습니다
  • ✅ 브라우저에서 작동: 설치 없이 즉시 사용 가능합니다
  • ✅ 실시간 협업: 여러 사람이 동시에 작업할 수 있습니다
  • ✅ AI 연동: Cursor와 연동하여 디자인을 코드로 변환할 수 있습니다

Step 1: Figma 계정 만들기

1-1. Figma 웹사이트 접속

  1. 웹 브라우저를 실행합니다
  2. 주소창에 https://www.figma.com 을 입력하고 Enter
  3. Figma 홈페이지가 나타납니다

1-2. 회원가입 시작

  1. 우측 상단의 "Sign up" 버튼을 클릭합니다
  2. 또는 중앙의 "Get started for free" 버튼을 클릭합니다

1-3. 가입 방법 선택

다음 방법 중 하나를 선택할 수 있습니다:

방법 1: Google 계정으로 가입 (추천)

  1. "Continue with Google" 버튼 클릭
  2. Google 계정 선택 화면에서 사용할 계정 선택
  3. Figma 접근 권한 허용
  4. 자동으로 계정이 생성됩니다

방법 2: 이메일로 가입

  1. 이메일 주소를 입력하는 칸에 이메일 입력
  2. "Continue with email" 버튼 클릭
  3. 비밀번호를 설정합니다 (최소 8자 이상)
  4. 이메일로 전송된 인증 링크를 클릭합니다
  5. 인증이 완료되면 계정이 활성화됩니다

💡 추천: Google 계정으로 가입하면 가장 빠르고 간편합니다

1-4. 프로필 설정

  1. 이름을 입력합니다 (나중에 변경 가능)
  2. "What will you use Figma for?" 질문에 "Personal projects" 선택
  3. "What's your role?" 질문에 "Developer" 또는 "Designer" 선택
  4. "Continue" 버튼 클릭

1-5. 플랜 선택

  1. 플랜 선택 화면이 나타나면 "Starter (Free)" 선택
  2. 무료 플랜으로도 충분히 학습하고 사용할 수 있습니다
  3. 나중에 필요하면 언제든지 유료 플랜으로 업그레이드 가능합니다

Step 2: Figma 데스크톱 앱 설치하기

Figma는 웹 브라우저에서도 사용할 수 있지만, 데스크톱 앱을 설치하면 더 빠르고 편리하게 사용할 수 있습니다.

2-1. 다운로드 페이지 접속

  1. Figma에 로그인한 상태에서
  2. 상단 메뉴의 사용자 프로필 아이콘 클릭
  3. 드롭다운 메뉴에서 "Get desktop app" 선택
  4. 또는 직접 https://www.figma.com/downloads/ 로 이동

2-2. Windows용 앱 다운로드

  1. "Download for Windows" 버튼 클릭
  2. FigmaSetup.exe 파일이 다운로드됩니다 (약 70MB)
  3. 다운로드 완료까지 기다립니다

2-3. 설치 실행

  1. 다운로드한 FigmaSetup.exe 파일을 더블클릭합니다
  2. "이 앱이 디바이스를 변경할 수 있도록 허용하시겠어요?" 창이 나타나면 "예" 클릭
  3. 설치가 자동으로 진행됩니다 (약 1-2분 소요)
  4. 설치 완료 후 Figma가 자동으로 실행됩니다

2-4. 로그인

  1. 데스크톱 앱이 실행되면 로그인 화면이 나타납니다
  2. 웹에서 가입했던 방법과 동일하게 로그인합니다
    • Google 계정으로 가입했다면: "Continue with Google"
    • 이메일로 가입했다면: 이메일과 비밀번호 입력
  3. 로그인이 완료되면 Figma 메인 화면이 나타납니다

Step 3: Figma 화면 구성 이해하기

3-1. 메인 화면 (파일 브라우저)

로그인 후 처음 보이는 화면입니다:

┌──────────────────────────────────────────────────────┐
│ 상단 바: Figma 로고, 검색, 프로필                     │
├──────────────────────────────────────────────────────┤
│ 왼쪽 사이드바:                                        │
│  - Recents (최근 파일)    │                          │
│  - Drafts (초안)          │   중앙: 파일 목록          │
│  - Teams (팀)             │                          │
│  - Community (커뮤니티)   │                          │
│                           │                          │
└──────────────────────────────────────────────────────┘

주요 메뉴 설명:

  • Recents: 최근에 열었던 파일들
  • Drafts: 내가 만든 개인 파일들
  • Teams: 팀 프로젝트 (유료 플랜)
  • Community: 무료 템플릿과 다른 사용자의 디자인

3-2. 새 디자인 파일 만들기

  1. 좌측 상단의 "New design file" 버튼 클릭
    • 또는 단축키: Ctrl + N
  2. 빈 캔버스가 열립니다
  3. 좌측 상단에 "Untitled"라고 표시되는데, 클릭해서 파일 이름을 변경할 수 있습니다

Step 4: Figma 에디터 화면 구성

4-1. 전체 레이아웃

 
 
┌────────────────────────────────────────────────────────────┐
│ 상단 툴바: 도구 아이콘들                                    │
├─────┬──────────────────────────────────────────────┬───────┤
│     │                                              │       │
│ 좌측 │           중앙 캔버스                         │ 우측  │
│ 패널 │      (디자인 작업 공간)                       │ 패널  │
│     │                                              │       │
│     │                                              │       │
├─────┴──────────────────────────────────────────────┴───────┤
│ 하단 상태바: 줌 레벨, 팀원 정보                             │
└────────────────────────────────────────────────────────────┘

4-2. 상단 툴바 (주요 도구)

왼쪽부터 오른쪽 순서로:

  1. 이동 도구 (V): 오브젝트를 선택하고 이동
  2. 프레임 도구 (F): 화면 프레임 만들기 (가장 많이 사용!)
  3. 도형 도구:
    • 사각형 (R)
    • 원형 (O)
    • 선 (L)
    • 화살표
    • 다각형
  4. 펜 도구 (P): 자유로운 곡선 그리기
  5. 텍스트 도구 (T): 글자 입력
  6. 손 도구 (H): 캔버스를 드래그해서 이동
  7. 주석 도구 (C): 코멘트 달기

💡 팁: 괄호 안의 알파벳은 단축키입니다. 예: T를 누르면 텍스트 도구가 활성화됩니다

4-3. 좌측 패널 (레이어)

  • 현재 페이지의 모든 오브젝트 목록
  • 폴더 구조처럼 계층적으로 표시됩니다
  • 레이어를 클릭하면 선택, 드래그하면 순서 변경

4-4. 우측 패널 (속성)

선택한 오브젝트의 속성을 수정할 수 있습니다:

  • Design: 위치, 크기, 색상, 효과 등
  • Prototype: 인터랙션 설정 (클릭 시 다른 화면으로 이동 등)
  • Code: 개발자용 정보 (CSS 코드 등)

Step 5: 첫 번째 디자인 만들어보기

5-1. 모바일 화면 프레임 만들기

  1. 상단 툴바에서 프레임 도구 (F) 클릭 또는 단축키 F
  2. 우측 패널에 다양한 프레임 프리셋이 나타납니다
  3. "Phone" 섹션에서 "iPhone 14 Pro" 클릭
  4. 캔버스에 아이폰 화면 크기의 프레임이 생성됩니다

5-2. 배경색 변경하기

  1. 프레임을 선택한 상태에서 (파란색 테두리가 보임)
  2. 우측 패널의 "Fill" 섹션 찾기
  3. 흰색 사각형 클릭 (현재 배경색)
  4. 색상 선택기가 나타나면 원하는 색을 선택합니다
    • 예: 연한 회색 (#F5F5F5)
  5. 색상 선택기 밖을 클릭해서 닫습니다

5-3. 텍스트 추가하기

  1. 상단 툴바에서 텍스트 도구 (T) 클릭 또는 단축키 T
  2. 프레임 안의 중앙 상단쯤 클릭
  3. "Hello Figma!"라고 입력합니다
  4. 텍스트를 입력한 후 이동 도구 (V)로 전환합니다
  5. 우측 패널에서 텍스트 속성 조정:
    • Font size (글꼴 크기): 32
    • Font weight (글꼴 굵기): Bold (굵게)
    • Alignment (정렬): Center (가운데)

5-4. 사각형 버튼 만들기

  1. 상단 툴바에서 사각형 도구 (R) 클릭 또는 단축키 R
  2. 프레임 안의 텍스트 아래쪽에 드래그해서 사각형을 그립니다
    • 가로: 약 200px
    • 세로: 약 50px
  3. 우측 패널에서 사각형 속성 조정:
    • Fill (채우기): 파란색 (#0066FF)
    • Corner radius (모서리 둥글기): 8
  4. 사각형 위에 텍스트 추가:
    • 텍스트 도구 (T)로 사각형 중앙 클릭
    • "Click Me" 입력
    • 글꼴 색상을 흰색으로 변경
    • 글꼴 크기: 16

5-5. 오브젝트 정렬하기

  1. 이동 도구 (V)로 전환
  2. Shift 키를 누른 상태에서 텍스트와 버튼을 모두 선택합니다
  3. 상단 툴바에서 정렬 아이콘을 찾습니다:
    • 가로 중앙 정렬 아이콘 클릭
  4. 선택한 오브젝트들이 프레임의 가로 중앙에 정렬됩니다

5-6. 파일 저장하기

Figma는 자동으로 저장되므로 별도의 저장 버튼을 누를 필요가 없습니다! 작업하는 동시에 클라우드에 자동 저장됩니다.

확인 방법:

  • 좌측 상단의 파일 이름 옆에 "Saved" 표시가 있으면 저장된 것입니다

Step 6: 기본 조작법 익히기

6-1. 줌 인/아웃

  • Ctrl + 마우스 휠: 스크롤하면서 확대/축소
  • Ctrl + Plus (+): 확대
  • Ctrl + Minus (-): 축소
  • Ctrl + 0: 100% 크기로
  • Ctrl + 1: 전체 보기 (모든 오브젝트가 화면에 맞춰짐)

6-2. 캔버스 이동

  • Space + 드래그: 캔버스를 손으로 끌듯이 이동
  • 마우스 휠 클릭 + 드래그: 위와 동일

6-3. 오브젝트 선택

  • 클릭: 단일 오브젝트 선택
  • Shift + 클릭: 여러 오브젝트 선택
  • Ctrl + A: 전체 선택
  • Ctrl + 클릭: 그룹 안의 오브젝트 직접 선택

6-4. 오브젝트 복사/붙여넣기

  • Ctrl + C: 복사
  • Ctrl + V: 붙여넣기
  • Ctrl + D: 제자리에 복제
  • Alt + 드래그: 드래그하면서 복제

6-5. 실행 취소/다시 실행

  • Ctrl + Z: 실행 취소
  • Ctrl + Shift + Z: 다시 실행

Step 7: 유용한 단축키 정리

기능Windows 단축키

이동 도구 V
프레임 도구 F
사각형 도구 R
원형 도구 O
텍스트 도구 T
선 도구 L
펜 도구 P
손 도구 (이동) H 또는 Space
주석 도구 C
그룹 만들기 Ctrl + G
그룹 해제 Ctrl + Shift + G
앞으로 가져오기 Ctrl + ]
뒤로 보내기 Ctrl + [
전체 보기 Ctrl + 1
선택 영역 보기 Ctrl + 2

Step 8: Community에서 템플릿 사용해보기

8-1. Community 접속

  1. 좌측 사이드바에서 "Community" 클릭
  2. 검색창에 "mobile app UI" 또는 "login screen" 입력
  3. 무료 템플릿들이 표시됩니다

8-2. 템플릿 복사하기

  1. 마음에 드는 템플릿 클릭
  2. "Open in Figma" 또는 "Get a copy" 버튼 클릭
  3. 템플릿이 내 Drafts에 복사됩니다
  4. 이제 자유롭게 수정할 수 있습니다

💡 팁: Community의 템플릿을 활용하면 빠르게 프로페셔널한 디자인을 만들 수 있습니다!

반응형