🧐FIGMA 피그마가 뭐에요?
‘디자인 및 협업’을 위한 클라우드 기반의 그래픽 디자인 작업 도구
*클라우드 기반 = 온라인 환경을 통해 사용자에게 서비스를 제공한다는 뜻
FIGMA를 이용하면,
첫째,
협업
이 용이합니다. #실시간_공동작업
- 유연한 협업: 동시에 동일한 파일을 편집하고 실시간으로 변경 사항을 확인둘째,
접근성&편의성
이 뛰어납니다. #웹브라우저 #링크공유
- 별도의 소프트웨어 설치 없이 어디서나 인터넷에 접속하여 Figma에 접근셋째,
자동 저장
및 백업이 이루어집니다.
- 클라우드 상에서 작업되어, 파일 자동저장 & 백업1️⃣ 회원가입하기
1) Figma 피그마 접속 ▶️ https://www.figma.com/ |
2) (권장) App다운로드 ▶️ https://www.figma.com/downloads/ |
![1 피그마 접속](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252Fc2e7810c-c3cd-4d0d-99e0-f5185ccfa399%252FUntitled.png%3Ftable%3Dblock%26id%3Ded5de63c-b33a-4c18-ac51-d0d78080b667%26cache%3Dv2&w=3840&q=75)
![2 (선택) 피그마 Desktop 앱 다운로드](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252Fd598a0f0-d691-4295-9e83-7c81fc37d9b4%252FUntitled.png%3Ftable%3Dblock%26id%3Ded79d4e3-a9e9-4601-b0cf-3316c345b838%26cache%3Dv2&w=3840&q=75)
![피그마는 클라우드 기반 그래픽 디자인 도구](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F8f9d206a-2a24-4170-a02c-448cfccfb185%252FUntitled.png%3Ftable%3Dblock%26id%3D8d9da55c-eb1a-41e0-97bd-9cba4cff4cfe%26cache%3Dv2&w=3840&q=75)
2️⃣ 작업공간 만들기
+ NEW draft
1. Design : 피그마에서 디자인 작업을 수행하는데에 적합합니다.
2. Figjam : 간단한 도식도 제작에 적합합니다. |
![HOME 화면의 좌측은 폴더라고 생각하면 됩니다.
- DRAFT : 내가 작업하는 파일
- Favorite files : 별표시한 파일
- Teams : 그룹에서 작업하는 파일](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F4ac44568-7561-4180-9031-89532f4902b9%252FUntitled.png%3Ftable%3Dblock%26id%3Df0f81d38-ae5d-4f16-8132-0c2118c9bf9a%26cache%3Dv2&w=3840&q=75)
01 워크스페이스 구조와 사용법
🙌처음 보는 화면을 호기심으로 바라봐주세요 :) 요즈음 PPT라고 생각해보면, 더욱 수월할거예요.
☑️ 앞으로 쭉 써먹을 핵심 단축키
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F2ac90cda-9532-4bb1-bb8e-598f7e3cdc3f%252FUntitled.png%3Ftable%3Dblock%26id%3D916c0c77-afc0-4b5c-a1f4-cc1ff7f9a144%26cache%3Dv2&w=3840&q=75)
- 도움말 보기
Ctrl + Shift + /
![주요 단축키 사용 시 Figma 이용이 더욱 편리해집니다.](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F74d409eb-7d20-4109-b8ee-517647b890b6%252FUntitled.png%3Ftable%3Dblock%26id%3Dbe0a42e4-2247-44a3-b1f0-5516100d25c4%26cache%3Dv2&w=3840&q=75)
[작업 공간 구조]
![notion image](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F757f0c14-189d-4622-84a2-70349141158f%252FUntitled.png%3Ftable%3Dblock%26id%3Db9903cb2-80df-4603-8d21-8caa24431c0e%26cache%3Dv2&w=3840&q=75)
1. 주요 메뉴: 자주 사용하는 메뉴 공간
*직접 클릭하는 것보다 단축키를 외우는 것이 훨씬 빠-름!
*각 메뉴 위에 마우스를 올리면, 메뉴명과 단축키 표시됨
2. 레이어/에셋 패널: 작업 목록
1) 레이어: 현재 페이지에 생성된 요소의 목록
2) 에셋: 현재 파일에서 고정적으로 반복 사용할 요소를 에셋화한 디자인 오브젝트의 목록
3. 공유 & 비율
*작업자, 들어와 있는 공동 작업자, 공유 등 파일에 대한 설정 확인 가능!
*FIGMA는 X축과 Y축으로 이루어진 큰 캔버스라고 생각해주세요 :)
4. 디자인/프로토타입 패널: 선택한 요소의 상세 편집 목록
1) 디자인: 크기, 색상 등 상세 편집 기능
2) 프로토타입: PPT 프리젠테이션 또는 웹브라우저 등 동적인 움직임을 설정할 수 있는 기능
02 실시간 협업 및 커뮤니케이션
☝️피그마는 이렇게 활용할 수 있어요.
- 작업 중인 파일의 최신본을 확인할 때! - 작업을 공유할 때! - 작업 중간 피드백이 필요할 때!
![(미리보기) 오늘의 연습
해당 글 확인 후, 1번에서 3번까지 진행해 보세요!](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252Fd3e93308-e740-4bf2-b0ae-13a5648b9582%252FUntitled.png%3Ftable%3Dblock%26id%3D1ab71885-0390-431e-9268-5a03bd94b933%26cache%3Dv2&w=3840&q=75)
1) 작업본을 파일로 보관할 때 : PDF로 EXPORT
![우측의 디자인 패널은 “선택한 요소”를 편집 또는 추출할 수 있어요 :)
- 선택한 요소는 좌측 레이어 패널에서 확인 가능](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F371cec2f-900b-4d4a-be18-8620ce904096%252FUntitled.png%3Ftable%3Dblock%26id%3D30250dcf-438c-4fd8-bd58-44b1a8c90211%26cache%3Dv2&w=3840&q=75)
2) 간편하게 작업 공유할 때 : link (view 권한)
3) 결과물의 특정 부분 피드백할 때 : Comment
![코멘트 기능은 “협업”하는 경우, 매우 유용합니다.](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252F90311675-e182-41f8-9386-3aa0a7ad8588%252FUntitled.png%3Ftable%3Dblock%26id%3D1b33c965-0c30-408f-8d0f-06d10b5eb6de%26cache%3Dv2&w=3840&q=75)
4) 같이 작업 중인 경우 간단 채팅 : Cursor chat
03 상황 별 FIGMA 작업본 활용
✌️ FIGMA는 링크기반으로 공유가 가능합니다.
영업 담당자가 발표 자료를 공유할 때? 간단하게 최신 자료를 확인하고 싶을 떄?
= 링크 주세요!
![1. Figma를 함께 사용하고 있다면?
- 레이어 이름 알려주세요 → [ Ctrl + F ] 검색 후, 레이어 클릭 → [ Shift + 2 ] 해당 영역으로 이동
2. Figma 작업본을 공유 받는다면?
- 링크 공유 주세요!](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252Fed3d8fa8-bcc6-405f-85ec-ea815200202e%252FUntitled.png%3Ftable%3Dblock%26id%3Da61e82c6-7ff5-4ba0-92a1-b7694c45868f%26cache%3Dv2&w=3840&q=75)
📃 오늘의 연습
피그마 기본 셋팅 (계정 생성 및 작업환경 설정)
위 과정을 차근차근 진행해주세요.
- 회원가입 > 내 작업공간 살펴보기 > 프레임 만들기 & 주요 단축키 눌러보기
배운 기능 활용하기
![회원가입 후, 1번에서 3번까지 차근차근 연습해 보세요!](https://inblog.ai/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F266d844e-600b-4a0d-9ce1-9f893075938d%252Fc2edce2a-be19-4257-85f8-685318630d6f%252FUntitled.png%3Ftable%3Dblock%26id%3Def0e3f5b-9e92-4e5e-94f0-e99d1bf8e0fa%26cache%3Dv2&w=3840&q=75)
NEXT 2회차 교육
Figma Community
에서 템플릿 가져오기
- 유용한
Plugin
활용
- 반복 사용
Component
만들기
Share article