프로젝트를 하는데 피그마를 추천받아서 어도비 XD에서 피그마로 갈아탔습니다. 어도비 툴을 익숙하게 사용해서 그런지 피그마로 넘어왔을 때, alt와 ctrl이 헷갈리는 것 말곤 그렇게 큰 불편을 못 느꼈고, 오히려 직관적인 사용성 덕에 하루만에 적응했습니다. 이틀째는 깃헙과 연동하였고, 일주일이 지난 지금은 깃 액션을 사용해서 자동 토큰 변환부터 PR 생성까지 적용해보았습니다. 그래서 그간의 일들을 정리해서 기록해보려고 합니다.
먼저 피그마를 웹에서 시작했습니다.
- 기본적인 이동은 마우스 휠을 누른채로 화면을 이동할 수 있습니다.
- 화면의 확대 추소는
ctrl키를 누른 상태로 마우스 휠을 돌리면 됩니다. - 로컬 폰트가 적용이 안됩니다.
-> 따라서 앱을 설치해줍니다. 앱이 좀 무거운지 한 3번은 설치하고 제거를 반복했습니다.
그래서 피그마 앱을 통해서 무료 버전으로 여러가지 시도를 해봅니다.
-
에디터 추가를 해줍니다.
유료버전은 멤버별로 요금제를 받는다고 하여 바로 포기했습니다. 초대된 에디터들 중 텍스트 수정이 안되는 오류가 있지만 아직 해결을 못했습니다. -
프레임을 만듭니다.
f
프레임에서 1920이 없길래 당황했는데, 오른쪽 디자인 패널에 Figma Community > Plugin/file cover를 선택해줍니다. -
섹션을 만듭니다.
ctrl+s
사실 아직까지 프레임과 섹션의 차이를 잘 모르겠습니다. 섹션으로 일부 만들어서 복사했더니 프레임보다 상위 개념인지 프레임에 포함이 되질 않습니다. 그래서 저는 모두 프레임으로만 작업을 했습니다 :( -
여러 도형을 만듭니다.
가장 많이 쓰는 사각형r원o라인l펜p를 써보았습니다. 다각형도 있고 별 모양도 있네요. -
여러가지를 추가하다보니 왼쪽 패널에 레이어가 눈에 들어옵니다. 레이어는 종류에 따라서 T, 마름모 등등으로 표현이 됩니다. 프레임은 #으로 되어있습니다. 이 부분은 레이어를 만들면서 좀 더 관찰을 해봅니다.
피그마에서 가장 좋은게 컴포넌트를 쉽게 만들고 고칠 수 있다는 것이라고 생각합니다. 어도비에서도 비슷한 기능이 있을진 몰라도 피그마에서 이 기능을 처음 알아서 디자인 시스템만 갖춰져 있다면 매우 편하고 빠르게 페이지 작업을 할 수 있는 기능입니다. 컴포넌트는 예시를 가지고 설명하는 게 좋을 듯 하여 일단 위와 같이 여러 가지 기능들을 써보면서 익숙해 지는 게 가장 빠르게 툴에 적응하며 시작을 해봅시다!
