피그마 이용방법 | 첫 사용자를 위한 입문서

피그마 기본 사용방법, 핵심 단축키, 피그마 간단하게 보는 방법, View 권한인 경우 사용법

Feb 28, 2024

Contents

🧐FIGMA 피그마가 뭐에요?01 워크스페이스 구조와 사용법 02 실시간 협업 및 커뮤니케이션 1) 작업본을 파일로 보관할 때 : PDF로 EXPORT 2) 간편하게 작업 공유할 때 : link (view 권한)3) 결과물의 특정 부분 피드백할 때 : Comment 4) 같이 작업 중인 경우 간단 채팅 : Cursor chat 03 상황 별 FIGMA 작업본 활용 📃 오늘의 연습 NEXT 2회차 교육

🧐FIGMA 피그마가 뭐에요?

💡

‘디자인 및 협업’을 위한 클라우드 기반의 그래픽 디자인 작업 도구 *클라우드 기반 = 온라인 환경을 통해 사용자에게 서비스를 제공한다는 뜻 FIGMA를 이용하면,

첫째, 협업이 용이합니다. #실시간_공동작업 - 유연한 협업: 동시에 동일한 파일을 편집하고 실시간으로 변경 사항을 확인

둘째, 접근성&편의성이 뛰어납니다. #웹브라우저 #링크공유 - 별도의 소프트웨어 설치 없이 어디서나 인터넷에 접속하여 Figma에 접근

셋째, 자동 저장 및 백업이 이루어집니다. - 클라우드 상에서 작업되어, 파일 자동저장 & 백업

1️⃣ 회원가입하기

1) Figma 피그마 접속 ▶️ https://www.figma.com/

2) (권장) App다운로드 ▶️ https://www.figma.com/downloads/

Guide to the Figma desktop app

Before you start Who can use this feature Supported on any team or plan. macOS: Must be running macOS 11 or later Windows: Must be running Windows 10 or later in a 64-bit environment ...

https://help.figma.com/hc/en-us/articles/5601429983767-Guide-to-the-Figma-desktop-app

2️⃣ 작업공간 만들기

+ NEW draft 1. Design : 피그마에서 디자인 작업을 수행하는데에 적합합니다. 2. Figjam : 간단한 도식도 제작에 적합합니다.

HOME 화면의 좌측은 폴더라고 생각하면 됩니다.
- DRAFT : 내가 작업하는 파일
- Favorite files : 별표시한 파일
- Teams : 그룹에서 작업하는 파일 — HOME 화면의 좌측은 폴더라고 생각하면 됩니다. - DRAFT : 내가 작업하는 파일 - Favorite files : 별표시한 파일 - Teams : 그룹에서 작업하는 파일

01 워크스페이스 구조와 사용법

🙌처음 보는 화면을 호기심으로 바라봐주세요 :) 요즈음 PPT라고 생각해보면, 더욱 수월할거예요.

☑️ 앞으로 쭉 써먹을 핵심 단축키

도움말 보기 Ctrl + Shift + /

[작업 공간 구조]

1. 주요 메뉴: 자주 사용하는 메뉴 공간 *직접 클릭하는 것보다 단축키를 외우는 것이 훨씬 빠-름! *각 메뉴 위에 마우스를 올리면, 메뉴명과 단축키 표시됨 2. 레이어/에셋 패널: 작업 목록 1) 레이어: 현재 페이지에 생성된 요소의 목록 2) 에셋: 현재 파일에서 고정적으로 반복 사용할 요소를 에셋화한 디자인 오브젝트의 목록 3. 공유 & 비율 *작업자, 들어와 있는 공동 작업자, 공유 등 파일에 대한 설정 확인 가능! *FIGMA는 X축과 Y축으로 이루어진 큰 캔버스라고 생각해주세요 :) 4. 디자인/프로토타입 패널: 선택한 요소의 상세 편집 목록 1) 디자인: 크기, 색상 등 상세 편집 기능 2) 프로토타입: PPT 프리젠테이션 또는 웹브라우저 등 동적인 움직임을 설정할 수 있는 기능

02 실시간 협업 및 커뮤니케이션

☝️피그마는 이렇게 활용할 수 있어요.


- 작업 중인 파일의 최신본을 확인할 때!
- 작업을 공유할 때!
- 작업 중간 피드백이 필요할 때!

(미리보기) 오늘의 연습
해당 글 확인 후, 1번에서 3번까지 진행해 보세요! — (미리보기) 오늘의 연습 해당 글 확인 후, 1번에서 3번까지 진행해 보세요!

1) 작업본을 파일로 보관할 때 : PDF로 EXPORT

우측의 디자인 패널은 “선택한 요소”를 편집 또는 추출할 수 있어요 :)
- 선택한 요소는 좌측 레이어 패널에서 확인 가능 — **우측의 디자인 패널**은 “선택한 요소”를 편집 또는 추출할 수 있어요 :) - 선택한 요소는 좌측 레이어 패널에서 확인 가능

2) 간편하게 작업 공유할 때 : link (view 권한)

3) 결과물의 특정 부분 피드백할 때 : Comment

코멘트 기능은 “협업”하는 경우, 매우 유용합니다. — **코멘트** 기능은 “협업”하는 경우, 매우 유용합니다.

4) 같이 작업 중인 경우 간단 채팅 : Cursor chat

03 상황 별 FIGMA 작업본 활용

✌️ FIGMA는 링크기반으로 공유가 가능합니다.

영업 담당자가 발표 자료를 공유할 때? 간단하게 최신 자료를 확인하고 싶을 떄?

= 링크 주세요!

1. Figma를 함께 사용하고 있다면?
- 레이어 이름 알려주세요 → [ Ctrl + F ] 검색 후, 레이어 클릭 → [ Shift + 2 ] 해당 영역으로 이동

2. Figma 작업본을 공유 받는다면?
- 링크 공유 주세요! — 1. Figma를 함께 사용하고 있다면? - 레이어 이름 알려주세요 → [ Ctrl + F ] 검색 후, 레이어 클릭 → [ Shift + 2 ] 해당 영역으로 이동 2. Figma 작업본을 공유 받는다면? - 링크 공유 주세요!

📃 오늘의 연습

1️⃣

피그마 기본 셋팅 (계정 생성 및 작업환경 설정)

위 과정을 차근차근 진행해주세요.

회원가입 > 내 작업공간 살펴보기 > 프레임 만들기 & 주요 단축키 눌러보기

2️⃣

배운 기능 활용하기

NEXT 2회차 교육

Figma Community 에서 템플릿 가져오기

유용한 Plugin 활용

반복 사용 Component 만들기

Share article