Figma[피그마] 피그마 입문 A to Z 부트캠프 메타코드_홈화면과 페이지 구성

 

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서

피그마 프로그램의 홈화면과 페이지 구성에 대해서 알아보겠습니다.

 

 

홈화면 - 좌측 메뉴

 

로그인을 하고 웹이나 프로그램에서의 홈 화면입니다.

홈 화면 '좌측'에는 다음과 같은 기능이 있습니다.

 

 

• 프로필 변경 : 프로필 선택 -> 프로필의 연필 아이콘 선택 -> save(저장됨)
• 컬러 테마 변경 : 프로필 선택 -> Theme -> 라이트/다크/시스템 테마 중 선택 
• Setting 메뉴 : 피그마 세팅을 변경할 수 있는 공간 (account/Community/Notification)
• Recents :최근 작업물을 확인할 수 있는 공간
• Your teams : 팀에 관한 확인이 가능한 공간
• Drafts : 내가 만든 파일 + 팀 플랜 협업 가능 공간 (임시 파일 모아두는 곳, 내 팀으로 옮겨서 작업)
• Teams : 내팀 (혼자뿐이지만 팀이 만들어진다) = 포트폴리오
• Create new team : 팀 만들기는 별도의 비용이 들이 않기 때문에 사용 가능 -> 포트포리오처럼 새로운 팀 생성

 

 

• +Project : 프로젝트 이름 기입 -> 프로젝트가 생성
• Invite : 프로젝트 선택 -> Invite 선택 -> 초대링크/이메일로 초대
• can view : 뷰어 권한만 부여 가능
• can edit : 에디트 권한을 부여

Member 페이지 : 전체 멤버 확인 및 정렬이 가능합니다.

특정 멤버의 이름의 체크 박스 선택 : 이름 변경/에디트 권한 확인

해당 멤버의 이메일 복사가 가능합니다.

 

 

홈 화면 - 중앙 메뉴

 

위의 홈 화면에서 '중앙'에 위치한 메뉴들의 기능을 알아보겠습니다.

 

 

• +Design file : 새로운 디자인 파일을 생성
• +FigJam board : 새로운 화이트 보드 형식의 협업툴 생성
• Import : 피그마 클라우드가 아닌 외부의 파일을 불러온다

• Recently viewed : 최근의 보았던 파일이 보인다
• Shared files : 공유를 받은 파일을 볼 수 있다
• Shared projects : 공유를 받은 프로젝트를 볼 수 있다
• 밑의 사진에 분류값을 바꾸어 찾고자 하는 파일을 찾음 -> 썸네일과 리스트 형태 표현
• 파일에 별표 모양 : 즐겨찾기 / 마우스 오른쪽으로 선택 : 파일 수행 가능 기능 표현

 

 

피그마 커뮤니티 활용 및 특징 

 

피그마 커뮤니티의 특징

 

 

1. 전세계 피그마 유저와의 소통이 가능하다 : 기본적으로 영어를 사용하여 소통하고 F&Q를 활용하면 좋다
2. 방대한 리소스(아이콘, 비주얼 에셋 등) : 방대한 리소스들을 다운로드하여 사용 가능하다
3. CC BY 4.0 라이선스 

---

 

피그마 커뮤니티 접속하는 방법

피그마 홈페이지 로그인 - 상단 Community Resources 선택 - 커뮤니티를 활용하면 됩니다.

피그마 프로그램/웹 메인화면 - 왼쪽 아래에 Community 선택 - 커뮤니티를 활용하면 됩니다.

 

https://www.figma.com/community

Figma Community: Explore templates, plugins, and widgets published by the community

 

 

리소스를 다운로드 받아서 활용하는지에 중점을 두고 말하겠습니다.

 

0123

 

#Icons 선택 - files+templates - 위에서 All products/paid+free/All creators 바꾸어 원하는 파일 찾기

 

ex) All products & free & All creators로 놓고 

Material Design Icons를 선택합니다. 

( 같이 작업하는 사람들에게 Share 가능합니다.)

어떤 리소스들이 있는지 Preview로 확인할 수 있고, Open in Figma를 선택합니다.

Pages에는 구글에서 이 파일들이 무엇인지 간단하게 설명해놨습니다.

 

오늘은 UI/UX 디자인과 포트폴리오 구성을 위해 메타코드M 강의에서

피그마 프로그램의 홈화면과 페이지 구성에 대해서 알아보았습니다.

 

 

 

 지금까지의 내용은 강의를 통해 
보실 수 있습니다


https://mcode.co.kr/

메타코드M

• 메타코드M 사이트에서는 취업특강 신청도 가능하고, 다양한 강의가 무료/유료로 제공되고 있으니 이용하기 바랍니다😄