** 영상으로 보고 싶은 분은 아래 주소를 클릭해 주세요.
1. 회원가입
- 피그마 주소는 아래와 같습니다.
Figma | 협업을 위한 인터페이스 디자인 도구
Figma는 의미 있는 제품을 제작하는 선도적인 협업 디자인 플랫폼입니다. 디자인, 프로토타입, 제품을 더 빠르게 제작하고 모든 피드백을 한 곳에서 수집하세요.
www.figma.com
- 해당 주소로 들어가서 회원가입을 하면 됩니다.
- 사이트에서 [지금 무료로 시작하기]버튼을 눌러서 가입합니다.
- 보통 구글 계정으로 많이 합니다. 일반 이메일로도 가능합니다.
- 이메일이 여러 개면 여러 계정으로 가입이 가능합니다.
- 가입 과정은 위에 제공해 드린 영상으로 자세히 참고해 주세요.
2. 피그마 앱 설치
- 피그마는 웹 브라우저에서도 그냥 사용이 가능하나, 글꼴 사용이나 2개의 모니터로 확인하고 싶은 경우 앱을 설치하는 것이 좋습니다.
- 내 컴퓨터에 설치된 글꼴을 사용하려면 특히, 앱을 설치해주시길 바랍니다.
1) 피그마 앱 다운 받기
- 로그인을 한 후에 좌측상단의 계정을 누릅니다.
- 그럼 아래로 까만 드롭다운 메뉴가 뜨는데, 거기서 [Get desktop app]을 눌러 줍니다.
- 그럼 크롬브라우저인 경우 우측상단에 다운로드가 됩니다.
- 대부분 다운로드가 될 것이고, 위치를 선택하라는 탐색기가 나오면 다운로드할 위치를 잘 선정하면 됩니다.
2) 피그마 앱 설치하기
- 다운로드된 곳을 찾아보면 [FigmaSetup.exe] 파일이 있습니다. 맥은 dmg파일로 다운로드하여집니다.
- 더블클릭해서 설치하면 됩니다.
3) 피그마 앱과 브라우저 연동
- 처음에는 이런 화면이 뜹니다.
- 브라우저로 로그인 버튼을 눌러, 브라우저에서도 연동을 해주면 됩니다.
- 그럼 브라우저에서 로그인되어 있는 아이디로 로그인한다고 뜹니다.
- 아래 [데스크톱 앱을 엽니다] 버튼을 눌러 줍니다.
- 그럼 애플리케이션으로 열라고 컨펌창이 뜹니다.
- [Figma 열기] 버튼을 눌러 주면 피그마앱에서 연동이 됩니다.
- 자세한 것은 영상을 보면 더 좋습니다.
3. 피그마 인터페이스 확인
- 피그마는 현재 다양한 프로그램을 지원하고 있습니다.
- 어떤 프로그램들을 지원하는지 보고 디자인 프로그램의 인터페이스를 보겠습니다.
1) 피그마 프로그램 확인
- 피그마가 로그인된 첫 화면입니다.
- 우측 상단에 보면 Design버튼부터 Make버튼까지 있습니다.
- 각각의 프로그램을 따로 지원한다고 보면 됩니다.
📊 Figma 프로그램 비교표
| 프로그램 | 주요기능 | 파일확장자 | 대표 사용자 | 주요 활용 | 비고 |
| Figma Design | UI·UX 디자인, 프로토타입, 컴포넌트 시스템 | .fig | 디자이너, 개발자 | 앱·웹 인터페이스 디자인, 디자인 시스템 구축 | 피그마의 핵심 도구 |
| FigJam | 온라인 화이트보드, 협업 아이디어 정리 | .jam | 기획자, 마케터, 디자이너 | 브레인스토밍, 여정맵, 회의/워크숍 | 누구나 참여 가능한 협업형 도구 |
| Figma Slides | 프레젠테이션 제작, 협업 발표 자료 | .deck | 팀 전체 | 발표자료, 디자인 리뷰, 보고서 | 디자인과 발표가 한 곳에서 |
| Figma Buzz | 마케팅 자산 제작, 템플릿 기반 대량 생성 | .buzz | 마케팅팀, 콘텐츠팀 | SNS 이미지, 배너, 캠페인 시각물 | 브랜드 일관성 유지에 탁월 |
| Figma Sites | 웹사이트 제작, 반응형 디자인, 퍼블리싱 | .site | 디자이너, 스타트업 | 랜딩페이지, 포트폴리오, 제품 사이트 | 베타 단계 (웹 제작 특화) |
| Figma Make | AI 기반 디자인 & 프로토타이핑 | .make | 디자이너, 기획자 | 앱/웹 프로토타입, No-code 제작 | AI 중심의 신기술 도구 |
2) 피그마 Design 인터페이스
- 상단의 Design 버튼을 누르면 디자인 파일을 열 수 있습니다.
- 처음 열었을 때의 디자인 화면입니다.
- 피그마 메뉴를 누르면 전체 메뉴가 드롭다운 됩니다.
- 인터페이스 최소화/최대화 버튼입니다. 누르면 패널이 보이거나 보이지 않게 처리합니다.
- Untitled로 되어 있는 부분을 더블클릭하면
- 파일 패널과 에셋패널입니다. 파일은 콘텐츠를 페이지와 레이어로 관리하고, 에셋은 컴포넌트를 관리합니다.
- 툴 박스인데 디자인모드(Design Mode), 드로 모드(Draw Mode), 개발 모드(Dev Mode) 3 부분으로 나뉩니다.
- 디자인 패널과 프로토타입 패널입니다. 디자인 패널은 콘텐츠들의 자세한 설정을 변경할 수 있고, 프로토타입 패널은 실제 웹앱 같은 효과를 줄 수 있는 인터랙션 창을 제공합니다.
** 모드와 각각 툴을 뒤의 강좌들을 통해 자세히 보도록 하겠습니다.
'디자인프로그램 > [2025년버전]피그마' 카테고리의 다른 글
| [피그마2025강의] 6강 피그마 - 모서리 둥근 사각형 - 배터리 아이콘 만들기 (0) | 2025.11.11 |
|---|---|
| [피그마2025강의] 5강 피그마 - 사각형 도형툴 - 햄버거 버튼 만들기 (0) | 2025.11.10 |
| [피그마2025강의] 4강 피그마 Layout Guide(=Grid) (0) | 2025.11.10 |
| [피그마2025강의] 3강 피그마 가이드(Guide) (0) | 2025.11.09 |
| [피그마2025강의] 2강 피그마 프레임(Frame) (0) | 2025.11.06 |
