피그마 중수와 고수를 구별하는 꿀팁 10개
hoxy 나만 모르는 기능 있어?
피그마 좀 할 줄 안다고 생각하시는 분들!!
실제로는 피그마를 어디까지 활용하고 있을까요?
남들은 또 어떻게 쓰고 있을까요?
나만 안 쓰고 있는 기능들이 있는 것은 아닐까 의심된다면
피그마 꿀팁들을 잘 활용하고 있는지 체크해 보세요!
1. 텍스트와 컬러 스타일 세팅
중수: 스타일 세팅을 위계별로 할 줄 안다
고수 : 스타일 적용이 안된 (연결이 유실된) 컴포넌트가 없다.
2. 오토레이아웃 활용 정도
중수 : 정렬을 맞출 때만 가끔 사용한다.
고수 : 개체에 바로 shift+a를 눌러 프레임으로 전환시킨다.
3. 컴포넌트 간 spacing 처리
중수 : 가끔 스페이스 키를 사용해서 떨어뜨린다.
고수 : 프레임 패딩 상/하/좌/우에 값을 넣어 조절한다. 공통된 간격 규칙을 적용하기 위해 컴포넌트에 넣을 때도 있다.
공통 간격 설정에 불리함
컴포넌트에 공통 간격을 적용함4. stroke 그리기
중수 : 가끔 별도의 선 오브젝트를 그려 넣곤 한다.
고수 : 라인으로 그리냐 스퀘어로 그리냐 논쟁을 종료하고 프레임에서 설정한다.
프레임 상/하단 스트로크에서 그립니다5. hug와 fill로 사이즈 수정
중수 : 스페이스나 마우스를 활용한다.
고수 : 클릭 한 번으로 수정한다.
6. 네이밍 기술
중수 : 어떻게 체계적으로 정리할 수 있는지 감이 잘 안 온다.
고수 : 프레임 이름과 슬러시를 활용해 컴포넌트 하이어라키를 만든다.
7. 인스턴스 활용도
중수 : 인스턴스와 컴포넌트를 잘 구분하지 못하고, 라이브러리 소스 사용에도 어려움이 있다.
고수 : 가장 효율적으로 인스턴스를 활용할 수 있게 컴포넌트를 디자인한다.
8. nested component와 boolean
중수 : 이런 게 있는지 잘 모른다.
고수 : 컴포넌트 안에 컴포넌트를 만들어서 더 효율적으로 디자인한다. 아토믹 컴포넌트 배우기 팁은 여기.
9. 라이브러리 퍼블리싱
중수 : 라이브러리 퍼블리싱을 위해 피그마를 꼭 유료로 사용해야 한다고 생각한다.
고수 : mvp를 만들 때는 라이브러리 퍼블리싱을 하지 않고 하나의 파일에서 해결한다. (너무 잦은 라이브러리 내보내기, 동기화 과정을 없앤다) 무료 플랜으로 돈 아낀다.
10. 반응형 구현
중수 : 어떻게 하는지 모른다.
고수 : constraints와 min/max width를 활용해 실제 반응형처럼 구현한다.
여러분들은 피그마를 얼마나 잘 활용하고 있을까요?
사실 이렇게 말하는 저도 100%는 활용하고 있지 못해요. 헤헤헤헤.
variables 자동 dark mode 설정이나 최근 나온 ai도 테스트 못 해봤고요.
중요한 것은 툴 활용도보다는 역시 디자인 원칙! design principle!
여러분만 알고 있고, 잘 사용하고 있는 꿀팁도 알려주세요.
반응 좋으면 모아서 2탄 써볼게요~
피그마 아토믹 컴포넌트로 mvp 만들기 유데미 강의 20% 할인 적용된 링크
�더 자세히 보기�
인프런에서도 들을 수 있어요!
