![](https://i0.wp.com/www.simple-coding.com/wp-content/uploads/2024/05/course-details-tab-4.png?resize=300%2C300&ssl=1)
📃 요약
요소 기술 :
– Basic : Figma
📃 기술 구현
스펙 :
- figma 디자인 협업툴
📃 Figma 기본 실습
디자인 툴의 구조 및 용어를 알아봄
– 디자인 화면
왼쪽 : 레이어 패널
위쪽 : 툴바
중앙 : 캔버스
오른쪽 : 디자인 패널
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/07aeee74-bb36-4b1c-9136-67ab737271d2/image.png?ssl=1)
실습 예제 복사 및 가져오기
처음 만나는 피그마 실습 예제 파일 가져오기 : 실습은 책 예제를 통해 진행
참고) 최신 피그마 툴과 책에 소개된 피그마툴(과거 버전)은 기능 및 모양이 다르니 감안하여 책은 보조자료로 활용하기
1) 좌측 아래 Explore Community 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/277c462c-5eb2-4591-a9d3-8f6d30f2b0b5/image.png?ssl=1)
2) 검색양식 : 처음 만나는 피그마
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/56d43908-c7e1-4fd0-91a2-33fe1d09b456/image.png?ssl=1)
3) Open in Figma 버튼 클릭
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/3e784f9f-0fe6-4864-99a8-3a555c3f7eb0/image.png?ssl=1)
4) Figma 에서 예제 파일 자동으로 열림
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/a0790348-327d-43ee-b0de-1a12f4501853/image.png?ssl=1)
10장 플러그인 사용하기
- 피그마에 없는 기능을 확장해서 프로세스를 단축시키는 기능
– 플로그인 설치하기
Content Reel 설치
- 캔버스 - 마우스 오른쪽 클릭 : - Manage plugins... 클릭 :
1) Content Reel 설치
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/6b89881d-00ab-47de-bc7a-bf264a9d582a/image.png?ssl=1)
2) Content Reel … 클릭 :
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/a9f46d90-d32b-46d0-8393-a0355e7c8acd/image.png?ssl=1)
3) view details 선택 : Run 선택
- Next 누름 : 설치
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/8c1e2c44-5bcf-4578-9759-f08115f9e729/image.png?ssl=1)
같은 방식으로 Unsplash 플러그인 설치
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/8ae775cf-d2ca-4306-94ee-c903d1d845ff/image.png?ssl=1)
– 플러그인 사용하기
1) Content Reel 사용하기
- 연락처, 주소, 아바타사진등을 선택하면 자동으로 랜덤하게 넣어줌 - 연락처 디자인할때 사용하면 편리함
1) 마우스 오른쪽 클릭 – Plugins 선택
- Content Reel 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/aa44a248-df67-42a8-bd6c-27c1be66fe37/image.png?ssl=1)
2) Sing in 클릭 : 회원가입 페이지로 이동
- google 로 로그인
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/9b3e23e8-5dd8-49d0-a8aa-d69b6b30a2f1/image.png?ssl=1)
3) 로그인 후 피그마 화면
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/09bd25d7-cc54-4780-93a6-7a59135960a1/image.png?ssl=1)
4) Text 탭을 선택
- Full Name, US Phone Number, Email, Company 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/1df0b805-44e7-4c98-8c87-f38b4396c691/image.png?ssl=1)
5) 레이어패널 – 10-1 :
- 사진을 모두 선택
- Content Reel – Image 탭 : 아바타 선택
- 사진이 랜덤하게 적용됨
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/4215c87f-6c57-4071-b9ce-7b7eb86f7c3d/image.png?ssl=1)
6) 이름을 모두 선택
- Content Reel – Text 탭 : FullName 선택
- 이름이 랜덤하게 적용됨
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/9c869b60-d1ea-4cfd-816e-0f08de9d87bd/image.png?ssl=1)
7) US Phone Number, Company, Email 도 클릭해 각각 위와 같이 변경 적용함
- Content Reel – Text 탭 : US Phone Number 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/f775775d-3308-4f33-8e23-12a66d2d0643/image.png?ssl=1)
- Content Reel - Text 탭 : Company 선택
![](https://velog.velcdn.com/images/forbob/post/579b2bbc-9a2b-4994-aefc-21eae5f0b6fd/image.png))
- Content Reel - Text 탭 : Email 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/794690eb-cd96-48ff-9c6e-7331643eb5fb/image.png?ssl=1)
2) Unsplash 사용하기
- 사진 넣기 플러그인
1) 레이어 패널 – Profile 프레임 – Profile :
- Unsplash 플러그인 실행
- Search 메뉴 선택 : astronaut
- 검색 결과에서 Niketh Vellanki 사진 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/7394b2dd-2858-40eb-a406-9af7341250c0/image.png?ssl=1)
2) 레이어 패널 – Profile 프레임 – background :
- Search 메뉴 선택 : space
- 검색 결과에서 1st 사진 선택
![](https://i0.wp.com/velog.velcdn.com/images/forbob/post/dd321490-8c55-4430-9e22-4659fcb9ad91/image.png?ssl=1)