콘텐츠마케터 스터디노트08 - 피그마(1)

1. Figma 소개 및 인터페이스

[Figma소개]
https://www.figma.com
- UI/UX디자인 프로그램으로 협업툴로 사용
- 컴포넌트, 텍스트 스타일, 컬러 스타일 등을 제공하고 유료 결제 시 지원되는 팀 라이브러리 기능을 통해 작업물 팀원과 공유가능
- 스케치와 다른 점은 이펙트(그림자, 내부 그림자, 레이어 흐림, 배경 흐림), 레이아웃(행, 열, 그리드)을 스타일로 지정할 수 있음

[인터페이스]
- 브라우저 버전과 데스크탑 버전이 거의 동일 -> 홈버튼 차이
- edit화면의 ? 부분에서 단축기 정보 볼 수 있음
- 단축기: 사각형(R), 원형(O), 검색(ctrl+/) 등
- 둥글기 값 각도 조절 가능, 원에 점으로 회전
- 이동툴로 자동 설정(preferences-keep tool selected after use~)
 

2. 형태만들기

[선의 형태]

[펜툴]
- alt누르고 앤커 클릭하면 사라짐
- 면이 없는 경우에는 이동툴로 도형 이동불가
- 곡선각도 큰영역(드래그), 처음부터 그리던 중이거나 직선/모서리 영역(클릭)
- 편집모드에서 ctrl누르면 직선<->곡선 바뀌는 블렌드툴 생성(점 클릭하면 곡선->직선 변경가능)
- 핸들툴에서 alt누르면 꺽쇠로 바뀜(각도조절 가능)
 

3. 그래픽스타일의 활용

[컬러와 그레이디언트]
*컬러
- 도형에 색상을 추가하여 혼합가능
- 스포이드로 색상 추출
- color style에서 색상 등록
* 그레이디언트
- fill에서 4가지 linear, radial, angular, diamond
- 점을 이동하여 범위/크기/길이 조절 가능
- color style에서 그레이디언트 등록

[도형과 이펙트]
- effect: inner shadow, drop shadow 설정으로 그림자 크기/범위조절
- blur: layer blur(레이어 자체가 흐릿해짐), background blur(형태 뒤 배경이 흐릿해짐)
- 속성복사: ①ctrl+alt+c / ctrl+alt_v ②스타일등록

[이미지와 플러그인]
*이미지불러오기
- ctrl+shift+k, 이미지 여러개 불러오기 가능
- fill 영역에 이미지 끌어오기
- 도형에 이미지 크기 맞추기 위해서 fit/crop 사용하여 조절
*플러그인
- 도형생성 후 우클릭하여 plugin-UI faces-apply avatars
- 도형생성 후 우클릭하여 plugin-unplash-search로 이미지 검색
※원본용량이 매우 크기 때문에 꼭 도형에 이미지 삽입하기

 

4. 정렬과 레이아웃

[프레임과 레이어]
- 프레임 안에 오브젝트 그릴 수 있음
- 배열: ctrl+[] , ctrl+shift+ []
- 레이어 제목변경: 한글파일 바꾸기 기능과 유사 ->shift로 전체 선택 후 ctrl+R
- 레이어 순서변경: crtl+R 누르고 \(역슬래쉬)d+ 입력 후 숫자 오름차순/내림차순 지정 가능

[정렬과 스마트셀렉션]
- Tidy up: 같은간격으로 배치
- 같은 수평라인 도형 이동가능
- shift누르고 도형 안 점 클릭하면 도형크기 변경가능

[컨스트레인트]
- 프레임에서 clipcontent해제 ->크기 줄여도 콘텐츠 보임
- 로고는 중앙, 프레임/콘텐츠/텍스트 좌우설정

[오토레이아웃]
- shift+a: 오토레이아웃 적용 / shift+alt+a: 오토레이아웃 해제
- 도형/문자 지정 후 add atuo layout-> 단어 늘어나도 레이아웃 함께 늘어남
- 오토레이아웃 적용된 레이어에 큰 아이콘 넣는 방법: 아이콘 드래그 후 ctrl누르면 커서 생성
- 도형 레이아웃(프레임)의 가로세로 넓이를 hug contents로 설정하면 글자크기나 길이에 맞게 변형됨

[레이아웃그리드]
- 8dp디자인 많이 사용됌
- columns, gutters, margins

이미지출처: MATERIAL DESIGN

- responsive layout grid

이미지출처: MATERIAL DESIGN

---

포토샵, 일러스트는 많이 들어보았지만
피그마는 이번 강의를 하면서 처음 알게 되었다.
아직 UI/UX가 무엇인지도 모르는 상태이기 때문에
조금 더 피그마에 대해 많은 공부를 해야한다고 느꼈다.
 
레이아웃 그리드를 배우면서부터 헷갈리는 부분이 생기기 시작했다..ㅠㅠㅠ
생소한 용어들이 많아서 그런 것 같으니
자주 써보고 익숙해지는 것 만이 답일 것 같다.
내일은 피그마를 끝낼 수 있길 바라며..! 화이팅👨🏻‍🏫✨