피그마의 유용한 기능 익히기

요새는 프리스쿨 UI 기초 강의를 벗어나서, 피그마에 대해서 강의를 빠르게 수강하고 있다.

평소에 부족하다고 생각했던 레이아웃 개념과 컴포넌트, 인스턴스의 개념에 대해서 공부하고 있다.

작업하면서 아리까리했던 개념들이나 기능들 위주로 간략하게 적어보았다.

 

01. 컴포넌트 기능

컴포넌트 > 이를 복제한 것이 인스턴스 (컴포넌트에 종속됨)

컬러 변경해도 변화가 없는 이유 : 프레임이 바닥에 깔려있기 때문에

컴포넌트 내부에 있는 것을 선택 후 컬러 변경

변경하면 인스턴스도 함께 변화됨

인스턴스의 컬러 변경 : 컴포넌트나 다른 인스턴스에는 영향 X

컴포넌트라는 원본의 요소는 함께 남겨놓아야 함 -> 그래서 컴포넌트 페이지를 생성해 따로 저장해두는 것이다.

컴포넌트를 수정해야할 일이 생기면 컴포넌트 원본으로 퀵아이콘을 눌러 바로 돌아간다.

인스턴스에 적용한 스타일을 메인 컴포넌트에 적용도 가능함

디테치 인스턴스 -> 인스턴스 상태를 해제할 수 있다.

컴포넌트 페이지 이동하기 : 컨트롤 X (잘라내기) -> 컨트롤 V

컴포넌트 설정 : 도큐멘테이션에 '버튼' 이라고 텍스트 설정해주면 좋음 (나중에 컴포넌트를 찾을 때 금방 찾을 수 있음)

아이콘 복사 시, 디테치 한번 하고 컴포넌트로 새로 제작해서 귀속시키기

 

02. 베리언트 기능

피그마 홈페이지 -> Help Center -> Icon Font -> 아이콘을 텍스트 형태로 쉽게 가져올 수 있는 곳

ex. 버튼을 제작하는 경우, 버튼 디자인 후 오토레이아웃, 버튼 모두 선택, 크리에이트 컴포넌트 세트

베리언트에서 리네임으로 복수 이름 변경도 가능하다.

 

마침 그렇지 않아도, 개발 중인 서비스의 디자인 시스템과 화면들을 다시 갈아엎어야하는 상황이 되었다😭

그 이유는 내가 처음 작업을 시작했을 때, 이러한 시스템적인 개념이 부족한 상태에서 진행하게 되어서, 개발에 차질이 있는 듯 했다😢

(그래도 앞으로 실무 경험이 있기 전에 이런 경험을 한 번 해보아서 다행이다)

 

이러한 상황을 보니 갑자기 전전 직장에서 했었던 경험들이 생각났다. 당시에는 피그마라는 것을 내가 처음 배웠을 때였는데, 제대로 배우기도 전에 서비스를 만들게 되어 윗사람에게 아주아주 깨지고 부끄러웠었던 경험이 있다. 나와 함께 디자인을 했었던 친구도 피그마가 난생 처음이라, 우리는 피그마 개념과 시스템을 따라가느라 혈안이 되어있었고 컨펌 끝은 항상 부끄러움만 남았었다. 경험이 부족하고 나이가 어려서 그런지 이에 대한 대처나 습득을 빨리하지 못했어서 아쉽다는 생각이 지금도 든다. 그래도 지금은 이미 많이 지나간 경험이 되었고 이 경험들이 지금의 내가 있게 해준 단단한 밑거름이 된 것 같다🫠 (좋은걸까..?) 그치만, 이 당시의 경험이 '나 제대로 UIUX 디자이너 해보고 싶다!' 라는 생각을 하게 된 계기이기도 하다.

그러다 마침 제로베이스를 수강하게 되어서 확실히 기초부터 잡고 배우니까, 내가 몰랐던 것들도 많고 더 공부해서 내 것으로 습득해야겠다는 생각이 아주 많이 들었다. (난 아직 넘넘 부족한 뇨자..)

 

실무에 가까운 부분들을 앞으로도 더 많이 경험하고 알 수 있으면 좋겠다!

여기까지 게으름 부리지 않고 잘해온 나 자신 칭찬해!🔥