'GDGoC 4th FYT 스터디' 에서 진행한 내용을 정리했습니다.
🔽 예상 독자
- figma 를 처음 사용하는데 기본적인 사용방법을 익히고 싶으신 분을 대상으로 합니다.
- 나는 이정도 한다! 하시면 편안하게 보셔도 좋습니다.
- 피그마 좌측 우측 탭을 자유롭게 사용 가능하다.
- 기본적인 단축키를 사용할 수 있다.
- Layer 를 잘 안다.
- Auto layout 잘 안다.
- Component + asset 을 잘 이해하고 쓸 수 있다.
- 페이지 제작 가능하다.
🔽 머릿글
이번 디자인 파트 1회차에서 진행한 내용은 아래와 같습니다.
- FYT 프로젝트 소개 : 나만의 포트폴리오 웹 만들기
- 기본이 되는 포트폴리오 웹 페이지 와이어프레임 설명
- figma 멘토링 진행
- 글꼴 설치 프로그램
- 좌우측 탭 확인
- layer
- local styles 활용해서 본인의 design system 구축
- 프로필 이미지 만들기
- auto layout
- component 생성 후 assets 에서 확인해보기
🔽 강의자료
디자인 파트 1주차에서 진행한 멘토링 pdf 내용입니다.
https://drive.google.com/drive/folders/1E5L62pdmLagMgZRTYEJ0kDF-nVipT5LG?usp=drive_link
🔽 FYT 프로젝트 소개
저희는 FYT의 프로젝트로 각자의 포트폴리오 웹을 만들어볼 겁니다.
아래는 우리가 만들 포트폴리오 웹의 기본 기획안의 데모 영상입니다!
이번 디자인 파트 멘토링은 위의 기본 양식을 활용해서 아래와 같이 본인의 스타일대로 나의 포트폴리오 웹을 꾸미는 것이 이번 멘토링의 목표입니다!
🔽 0. 시작하기 전에 (글꼴 설치 프로그램 다운로드)
피그마에서 기본적으로 제공하는 글꼴 외에 추가적으로 다운로드한 글꼴을 사용하기 위해서는 아래의 작업이 필요합니다! ( 이전에 Figma 글꼴 설치 프로그램을 다운하셨다면 해당 내용은 넘어가셔도 됩니다.)
아래의 링크로 접속해서 Figma 글꼴 설치 프로그램을 다운로드하고 피크마 창을 껐다가 켜주세요 !
Figma Design에 글꼴 추가
이 기능을 사용할 수 있는 사용자 모든 요금제에서 사용 가능 누구나 Figma Design에 글꼴을 추가할 수 있습니다. 기본적으로 Figma는 Figma Design 파일에 Google Fonts를 포함합니다. 다른 글꼴을 사용하려
help.figma.com
저희 프로젝트에서는 기본적으로 아래의 Pretendard Variable을 사용할 계획입니다.
아래의 url로 접속후 글꼴을 다운로드해주세요. zip 파일을 열어서 해당 파일의 글꼴을 설치해주시면 됩니다.
https://cactus.tistory.com/306
전 이미 글꼴이 설치되어있어서 ‘대치’라고 뜨지만, 없으신 분들은 설치해주시면됩니다.
윈도우의 경우 서체에 해당 ttf 파일들을 넣어주시면 됩니다.
🔽 1. 피그마 페이지 확인
아래의 피그마로 들어가보시면, 이번에 진행할 포트폴리오 웹의 디자인 기획안을 보실 수 있습니다.
https://www.figma.com/community/file/1551941117901532472/fyt-study
본인 계정에 copy 하셔서 사용하시면 됩니다!
🔽 2. 피그마 둘러보기
피그마에 들어오면 ! 가장 먼저 아래의 사진과 같이 보입니다.
좌측에 탭을 보면 ‘Pages’ 아래에 “[FYT] 공통 페이지” 와 “각자의 페이지”가 있습니다.
“[FYT] 시작하기 (공통)” 에서 저희가 만들 웹 포트폴리오 기획안을 확인할 수 있습니다.
디자인 파트 멘토링은 좌측의 기본 예시를 보며, 각자의 포트폴리오를 만드는 실습을 진행할 계획입니다. 여러분은 좌측의 기본 기획안을 보고 자유롭게 자신의 포트폴리오 웹을 만드시면 됩니다 !
🔽 3. 피그마 좌우측 탭
피그마에서는 좌측과 우측 탭을 잘 봐야하는데요 ! 좌측과 우측탭은 각각 아래의 사진과 같습니다.
좌측은 File 탭과 Asset탭이 있습니다.
- File :Pages : 피그마 내부의 각 페이지들입니다. 저희는 각자 포트폴리오 웹을 만들거기에 각자의 페이지를 만들어줬어요.
- Layer : 해당 페이지 내부의 요소들이 전부 Layer에 나타납니다. layer는 뒤에서 자세히!
- Asset :
- Asset 탭은 뒤에서 만들 component의 모음집 이라고 보면됩니다! 각 페이지별로 asset 들이 생성되기에 각자의 페이지를 확인해주시면 됩니다 ! 이것도 뒤에서 자세히 ! (지금 잘 몰라도 됨.)
🔽 4. 기본적인 단축키
이동에 관한 단축키 입니다. 한번씩 써보면서 익숙해지세요 !
페이지의 요소를 선택시 사용하는 단축키입니다.
🔽 5. Layer
figma 에서 Layer 는 여러분들이 ppt, 미리캔버스를 써보셨다면 익숙할겁니다.
아래와 같이 Layer에서 red, blue, yello 요소가 3개 있다면, Layer에서 가장 위에 있는 red가 가장 위에 보이게 됩니다.
🔽 6. Local Style 을 사용해서 Design System을 설정해보기
간단한 프로젝트라면 사실 필요없지만, 프로젝트 사이즈가 커지다 보면 프로젝트에서 주로 사용하는 색상, 폰트, 효과 등을 local style로 적용하여서 사용합니다.
오늘 멘토링에서는 local styles에서 color styles(색상), effect styles(그림자 효과) 까지만 적용해보겠습니다!
우선 local styles에서 color styles(색상)로 brand color와, gray color를 지정하는 과정은 아래와 같습니다.
다음으로 local styles에서 effect styles(그림자 효과)에서 down-effect 도 적용해볼게요.
🔽 7. main 페이지에서 프로필 이미지 만들기
이제 기본적인 설명은 마쳤으니, 좌측의 예시 페이지를 보며 우측에 각자의 포트폴리오 웹을 만들어봅시다!
우선 프로필 이미지를 만들어볼게요.
이미지를 넣을때는 요 버튼을 클릭해서 넣을 사진을 선택하여, 내가 넣고자하는 요소를 클릭해주면 됩니다.
🔽 8. Auto Layout 을 사용해서 자기소개 문구 만들기
다음으로 프로필 좌측에 나를 소개하는 문구를 포함한 텍스트 박스를 3개 만들어줄게요.
이제 이 텍스트박스를 auto layout을 사용하여 묶어줄겁니다.
이 auto layout은 어려우니까 !! 잘 보세요 !!!
🔽 9. Auto Layout을 사용하면 버튼 만들기도 가능
이번에는 auto layout을 활용해서 버튼을 만들어볼게요.
참쉽죠?
🔽 10. component 설정 및 asset에서 사용하기
위에서 만들었던 버튼을 component로 만들고 asset에서 해당 component를 가져와 사용해볼게요.
우선 버튼을 컴포넌트로 만들어볼게요.
컴포넌트가 된 버튼은 부모가 되고 해당 부모 컴포넌트를 복사하게 되면 자식들은 부모의 변경사항을 따라가게 됩니다.
layer에서 만들어진 컴포넌트의 아이콘을 잘 보면 다르게 생겼죠?
만들어진 컴포넌트는 에셋에서 확인할 수 있어요.
각자 페이지마다 만들어진 컴포넌트들이 관리되는데요, 각자 본인 페이지의 asset 페이지에서 확인하시면 만들어진 컴포넌트를 확인하면 됩니다.
🔽 마무리
이렇게 figma 를 사용하는 기본적인 단축키와 기능들을 알아봤습니다!
다음 2주차는 응용해서 사용하는 방법에 대해 공유할게요.
수고많으셨습니다!