✨왜 피그마를?
현재 소속되어있는 멋쟁이사자처럼이라는 it동아리에서 '4호선톤'이라는 타 대학분들과 함께하는 대회에 참여하게 되었다.
내가 속한팀은 기획/디자이너가 없는 팀이어서 어쩌다보니 디자인도 참여하게 되었다...
이왕 하는거 ppt로 만든거 같은 수준으로 하기는 싫고 피그마를 어느정도라도 쓸줄 알면 추후에 전공 팀플이나 개인플젝할때도 도움이 될것 같아서 이참에 공부해 보려고한다. (공부하면서 알게되는건 점점 추가할예정)
참고로 현재 내 디자인 실력은.. 피그마는 보기만하고 도형하나 생성도 잘못하는 정도이다ㅋㅋㅋ 댓글달고 데브모드로 css 참고하는 정도.. 아무튼 https://www.youtube.com/watch?v=c6yCZecrMpQ&ab_channel=MadiaDesigner
이 영상으로 기본툴을 공부하고 같은 채널에 무작정 따라하기 시리즈를 하나 잡아서 그걸토대로 우리 플젝 디자인을 하려고한다.
이 글에 공부하면서 기본 세팅이나 단축키, 툴사용법을 기록해보겠다. 목차를 생성해서 나중에 두고두고 참고하려고 적는다!!
피그마 기본 사용법
초기화면
프로젝트 생성
사이드바의 all projects에 들어가서 +project를 누르면 추가가능. 무료플랜사용자는 1개만 가능하고
대학생인증을 받으면 대학생인증한 사람끼리만? 편집가능한 조건으로 추가생성이 가능한것 같다.
만든 프로젝트로 들어가서 디자인 파일을 만들고 작업을 시작하면 된당
파일 저장/버전관리
save local copy는 이름 그대로 현재까지 작업한걸 로컬폴더에 .fig로 저장할 수 있다.
아래에 version historu..는 깃허브 커밋이라고 생각하면 편하다
이렇게 이름과 설명을 커밋처럼 써서 날려주면 내가 저장해둔 버전으로 나중에 돌아갈 수있다. 원하는 커밋으로 돌아가는 방법은 show version history를 클릭하면
오른쪽 바가 이렇게 바뀌고 만약 버전을 저장해놨다면 저기에 표시되어서 클릭으로 갈 수 있다. (이렇게 따로 저장안해놔도 날짜별 시간별로 피그마에서 자체적으로 조금씩 자동으로 추가해주긴한다)
공유/팀원초대
당연한거지만 오른쪽위 share버튼을 클릭해서 나오는 창에 이메일을 넣으면 사람들 초대가능하다. 각종권한 설정확인하기! (앞으로 바로 보면 알수있을것 같은건 생략함)
페이지 썸네일 지정하기
처음에 썸네일을 지정하지 않으면 이렇게 작업하는 화면이 그냥 보이게 된다.
썸네일 지정은 간단한데 COVER라는 페이지를 만들고 원하는 이미지나 그런것을 Frame으로 만들어서 그 프레임을 선택하고 지정하면된다. (이미지에 바로하면안됨 프레임 아래로 넣어야됨)
이렇게 내가만든 프레임이 썸네일로 지정된다.
기본툴
배경화면 색 설정
아무것도 없는 화면에서 저 오른쪽 색상을 변경하면 된다!(초간단)
프레임
피그마에서는 프레임이라는단위로 디자인을 그리게된다
요거 클릭해서 슥 드래그하면 생김 누르면 나오는 오른쪽 사이드바에서 기기별 크기로 생성할수도있다.
도형그리기
하단중앙에 툴중 3번째선택해서 그릴수있고 shift를 누른채로 드래그하면 비율을 유지해서 도형을 생성할 수 있다.
아까 보였던 도형안쪽에 점들로 라운드 설정가능하고 오른쪽에서 수치로도 가능하다.
이렇게 각 모서리에 전부 다르게도 가능하다.
삼각형을그리고 appearance에서 저기 3이라고 써진 점이 모서리 개수를 나타내는거라 수정하면 내가 입력한 각형이 된다. 5로바꾸면 오각형
이미지 추가하기
저기서 맨아래 이미지 추가로 폴더열어서 추가도 되겠지만 저거보다는 한번에 내가 원하는 사이즈로 추가하기 위해서 도형을 원하는 크기대로 생성하고
| | |
|---|
fill에서 이미지 눌러서 추가하면? 이렇게 원하는 크기만큼 이미지가 추가된다.
단축키 모음! 이동/확대..etc
이동:스페이스바
확대:Z+드래그
축소:Z+Alt+드래그
화면 크게보기: Ctrl+\(역 슬래시인데 원표시있는곳 누르면됨)
그룹화하기: Ctrl+G
그룹풀기 오토레이아웃풀기:Crtl+Shift+G
요소사이 거리보기: alt하고 커서
복사하기:alt+shift+드래그
매칭레이어(Matching Layer)
여러 개의 프레임에서 사각형을 한번에 선택해서 동시에 색을바꾸고싶다면 
저기서 Select matching laters를 선택한다.
마스크 사용(Use To Mask)
마스크기능은 원하는 도형에 이미지를 맞춰서 넣는것 같다.
원하는 도형을 만들어 이미지의 가운데쯤 위치시키고 뒤로 보낸다.
하단바에서 mask를 검색해서 use as mask를 누르면! 마스크 기능을 사용할수있다.
(오른쪽 사이드바에서도 액션이 뜬다!! 굳이 아래에서할필요 없음!!!)
만약 전체를 움직이고 싶은데 가운데 사진만 움직인다면 프레임을 선택해서 움직여도 되고 shift로 저 두개를 선택한 다음 ctrl+G로 그룹으로 묶으면 된다! (오른쪽버튼으로 한번더 프레임화 시켜도된다. 프레임과 그룹차이는나중에 알아보기)
Union Selection
Union Selection 계층이해
유니온셀렉션은 계층을 잘이해해야 잘사용할 수 있다. 아주 재밌음!!
정렬 Align
이렇게 중구난방으로 있는 도형을 오른쪽의 position을 통해 정렬할 수 있다.
가장잘쓸것 같은것은 저기 ...에서 가로 세로 간격 정렬하기! 버튼 이나 이런것들 간격맞출때 좋을듯
도형 다루기
position과 layout을 통해 도형을 조정할 수 있다. x와y는 도형을 이동시키는거고 layout의 w,h는 가로세로 크기를 수정시킨다.
오른쪽의 체인모양을 누른채로 가로혹은 세로를 수정하면 현재 비율에 맞게 크기를 수정할 수 있다.
레이아웃 Layout
Auto Layout
이제부터 실제로 UI디자인할때 신경써야되는 부분인듯
디자인을 할때 ui상에 아이콘을 전부 오른쪽으로 이동하거나할때
오토레이아웃의 장점
이렇게 아이콘과 글씨를 오토 레이아웃으로 묶고, 안에 내용과 밖에 회색박스를 그룹으로 묶은 다음 전체를 선택해서 오토레이아웃을 바꾸면
각항목의 위치변화도 자유롭게 가능하고 ,
삭제를 해도 디자인의 변화 없이 가능하다
오토레이아웃은 Crtl+Shift+G로 그룹을 풀듯이 풀면된다.
Auto Layout건채로 항목 만들기!
꿀팁임
이렇게 각각 만들어놓고 일일이 오토레이아웃을 거는게 아니라 오른쪽 처럼 shift fn드래그로 복사해와서 auto layout설정에 있는 가로세로 패딩을 준다.
더자세한 오토레이아웃 거는법은 https://www.youtube.com/watch?v=c6yCZecrMpQ&t=3288s&ab_channel=MadiaDesigner 이 영상의 54:50부터 직접 보는게 더 빠르다.
슬라이드 디자인 clip content
 |  |
|---|
슬라이드 디자인을 할때 clip content를 선택하면 저렇게 좌우를 움직일수 있게되는데 그걸 통해 가로를 맞출 수 있다.
Horizontal Resizing (반응형디자인)
Hug & Fix
 |  |
|---|
채팅같은걸 디자인할때 저렇게 채팅이 늘어나도 말풍선이 고정되어있으면 안된다. 말풍선도 같이 늘어나야 될텐데 이럴때 사용할수있는것이 hug이다. 피그마의 frame설정중 fixed,hug,fill까지 추가로 3개를 제공하는데 하나씩 알아보겠다.
fixed는 말그대로 내가 생성한 도형이나 텍스트의 크기를 고정하는거고 hug는 내가입력한 텍스트(혹은 다른거)의 크기에따라 자연스럽게 늘어나게 한다.
만약 텍스트 박스 를 입력한 텍스트의 크기에 따라 늘어나게 디자인하고 싶다면 텍스트에도 허그를 걸고 텍스트를 감싸는 채팅 디자인에도 허그를 걸면된다. 가로는 고정하고 세로만 늘리고싶으면 세로에만 허그를 주면됨.
hug: 콘텐츠에 맞춰서 요소의 크기를 자동 조정함
ex) 텍스트가 많아지면 그에 맞춰서 채팅창을 늘림
fill: 부모 컨테이너의 크기에 맞춰 요소의 크기를 자동으로 조정함. 요소가 "Fill"로 설정되어 있으면, 부모 요소의 가로 또는 세로 공간을 채우기 위해 그 크기가 조정됨.
스타일
컴포넌트
