서론
4주차의 첫 시작인 오늘은 이때까지 배웠던 Figma 도구들을 복습하며 기초를 다지는 시간을 가졌고 배운 도구들을 활용해 나의 Portfolio 프로필 작업과 이전 시간에 진행한 분석 자료들을 정리해보는 시간을 가졌다.
Interface
'Figma'의 기초 Interface는 크게 4가지로 구분
복잡해보이지만 아래 7가지를 주요내용으로 기억하면 된다.
- 캔버스 확대, 축소는 Ctrl(Cmd)+(+)또는(-)
- 다른 화면 이동할 때는 Spacebar를 누르며 넘어가기
- 디자인 속성 설정은 객체 선택 후 오른쪽 Panel에서 +, -
- 객체를 복사할 땐 Alt(Option)+Drag
- 가장 안쪽의 객체를 선택할 땐 Ctrl(Cmd)를 누른채로 선택
- 객체를 가장 앞으로 가져올 땐 ] 가장 뒤로 보낼때는 [ (한칸씩은 Ctrl(Cmd)+[,])
- Frame을 선택할 땐 Frame Name을 선택하기
도형
Figma의 도형은 다양하게 변형해서 사용이 가능
> Eliipse (O)
> Star
> Rectangle (R)
Pathfinder
패스파인더를 활용해 합치기, 빼기, 교차, 제외 등 도형 변형이 가능
패스파인더는 일러스트나 포토샵, 라이노로 많이 활용하던 도구라 언제봐도 반갑다!
내보내기
이미지를 내 파일로 저장하고 싶을 때 사용
내보낼 이미지의 크기를 선택하고 'Export' 선택을 통해 내보내기 가능
Group, Frame, Section
Section이 가장 상위개념, Frame이 자식개념, 그 아래 Grop이 포함된다.
다른 디자인 프로그램에서는 Group를 많이 사용했어서 'Auto Layer'에 적응하는 것이 가장 어려운 것 같다.
Auto Layout
Auto(자동)+Layout(나열)로 Auto Layout(자동으로 나열)을 의미
> Auto Layout의 장점
- 수정 효율을 올릴 수 있음
- 구조적으로 잘 짜여진 화면이 완성됨
> Alignment
'Auto Layout'을 적용시키기 전 'Alignment'를 활용해 객체 정렬 가능
> Auto Layout 설정
생성하기(Shift+A)
1. 개체 우클릭 → 'Add Auto Layout'
2. 우측 Panel에서 Auto Layout + 버튼 선택
해제하기(Ctrl+Shift+G, Ctrl+Back Space)
1. Frame 선택, Ungroup
2. 우측 Panel에서 Auto Layout - 버튼 선택
만들어보기
위에서 배운 'Figma' 기초 도구들을 활용하여 실습해보고 Portfolio의 내 Profile과 이전에 작성했던 Design Thinking을 통한 문제해결 분석 내용을 Portfolio 제출형식으로 제작해보는 시간을 가졌다.
내가 제작해본 Naver Map System 문제해결 방안이다.
▼ 아래에서 'Figma'를 통해 작성된 실습내용과 Portfolio, 분석 Page를 확인할 수 있다.
<Portfolio Profile, Naver Map>
오늘은 기초도구들을 이용해 無에서 有를 만드는 만큼 시간이 오래걸린 것 같기도 하다. 나를 표현하고 어필할 수 있는 Profile이 중요하다고 생각했고 분석했던 자료들은 얼마나 시각적으로 독자에게 잘 표현해낼 수 있느냐에 따라 나의 역량이 그대로 보여지는 것 같다. 아직 많이 부족하지만 후에 진행될 Project들을 통해 나를 잘 보여주고 Merit가 있는 Portfolio를 작성하고 싶다.
