UI 디자이너라면 꼭 알아야 할 피그마 꿀팁

 

 

1. '인스턴스 교체(Swap Instance)'와 컴포넌트 마스터하기

 

 

우선 아이콘 하나를 만들 때 아웃라인(Outlined), 필(Filled), 비활성화(Disabled) 상태별로 '배리언트(Variants)'를 설정해 보세요.

 

이렇게 세팅해두면 디자인 도중 아이콘을 바꿔야 할 때, 일일이 에셋 패널을 뒤질 필요가 없습니다. 마우스 우클릭 후 '인스턴스 교체(Swap Instance)'만 누르면 끝이죠. 2019년도 방식처럼 에셋 창에서 아이콘을 찾아 헤매던 시간은 이제 안녕입니다.

 

여기서 프로만의 한 끗 차이: 자주 쓰는 컴포넌트는 단축키를 설정해 두세요. 마감 직전, 새벽 2시에 눈을 부릅뜨고 화면을 쳐내고 있을 미래의 자신이 여러분에게 무한한 감사를 표할 겁니다.

 

 

 

2. '속성 복사(Copy-Paste Properties)', 나만 알고 싶은 비밀 병기

이 기능은 정말 많은 디자이너가 간과하고 있지만, 한 번 익히면 작업 효율이 완전히 달라지는 '게임 체인저'입니다. 어떤 요소든 선택한 뒤 Ctrl+Alt+C (맥은 Cmd+Opt+C)를 눌러 속성을 복사해 보세요. 그다음 다른 요소를 선택해 Ctrl+Alt+V를 누르면? 스타일만 쏙 골라서 입힐 수 있습니다.

파워포인트의 '서식 복사(형식 페인터)' 기능과 비슷하지만, 디자인 작업에서는 훨씬 강력한 힘을 발휘하죠. 텍스트 스타일, 컬러, 이펙트 등을 하나하나 처음부터 다시 설정할 필요 없이, 다른 요소에 똑같이 맞추고 싶을 때 이 기능을 자주 사용할 것입니다.

 

 

 

 

3. 불리언 연산(Boolean Operations)과 절친이 되세요

 

 

복잡한 모양을 만든답시고 펜 툴로 하나하나 노가다하고 계셨나요? 이제 멈추세요. 합치기(Union), 빼기(Subtract), 교차(Intersect), 제외(Exclude) 같은 불리언 연산만 있으면 어떤 도형이든 뚝딱입니다.

예를 들어 알림 배지(Notification Badge)를 만든다고 해볼까요? 큰 도형 위에 작은 원을 얹고 'Subtract'를 누르기만 하면 아주 깔끔하게 파여진 노치(Notch)가 완성됩니다. 복잡한 아이콘도 마찬가지예요. 'Union'과 'Intersect'로 기본 도형들을 조합하기만 하면 되죠.

불리언 연산의 진짜 묘미는 이 모든 과정이 '편집 가능한 상태'로 유지된다는 점에 있습니다. 나중에 마음이 바뀌어도 그룹 안의 개별 도형들을 언제든 다시 수정할 수 있으니까요.

 

 

 

4. 레이어 지옥에서 탈출하는 '스마트 셀렉션'의 마법

여러분의 작업 시간을 몇 시간이나 아껴줄 기능입니다. 다른 레이어 밑에 꽁꽁 숨어있는 요소를 선택하고 싶을 때, Alt 키를 누른 상태로 클릭해 보세요. 뒤에 숨은 텍스트 하나 잡으려고 레이어 패널을 일일이 펼치거나, 위에 덮인 사각형을 옆으로 치워야 했던 그 번거로운 작업은 이제 끝입니다.

더 대단한 건 뭔지 아세요? Ctrl+클릭(Cmd+클릭)을 활용하면 그룹화되지 않은 여러 요소를 한 번에 선택할 수 있습니다. 마우스로 드래그해서 영역을 잡는 '올가미(Lasso)' 방식보다 훨씬 빠르고 정확하죠.

 

 

 

5. 그리드(Grid) 시스템의 비밀

 

 

일일이 그리드를 만드느라 고생하는 건 이제 그만하세요. 'View → Layout Grids'에서 그리드 시스템을 한 번만 제대로 잡아두면, 어떤 프레임에도 바로 적용할 수 있습니다. 하지만 진짜 핵심은 따로 있어요. 바로 커스텀 그리드 스타일을 만들어서 저장해두는 거죠.

모바일(4컬럼), 태블릿(8컬럼), 데스크톱(12컬럼)용 그리드 프리셋을 각각 만들어놓으면 편합니다. 클릭 한 번이면 프레임이 바로 반응형 디자인 모드로 세팅되죠. 마치 그리드만을 위한 별도의 디자인 시스템을 갖춘 것 같은 기분이 들 거예요.

 

 

 

6. 스마트 애니메이트(Smart Animate)로 만드는 고퀄리티 프로토타입

 

 

스마트 애니메이트는 단순히 화려한 화면 전환을 위한 도구가 아닙니다. 사실 UX 테스트의 노다지나 다름없죠. 하지만 많은 분이 실수하는 게 하나 있어요. 바로 전략 없이 '모든 것'에 애니메이션을 걸려고 한다는 점입니다.

핵심은 상태 변화 사이의 관계를 유저가 직관적으로 이해할 수 있도록 돕는 요소에만 집중하는 것입니다. 마우스를 올렸을 때 살짝 커지는 버튼? 아주 좋습니다. 

 

 

 

7. 제대로 알면 '신세계'인 컴포넌트 속성(Component Properties)

 

 

아직도 변형(Variation)마다 일일이 별개의 컴포넌트를 만들고 계신가요? 그렇다면 필요 이상으로 고생하고 계신 겁니다. 컴포넌트 속성(Component Properties) 을 활용하면 단 하나의 컴포넌트만으로도 수많은 상태를 자유자재로 다룰 수 있거든요.

 

예를 들어 크기(S, M, L), 타입(Primary, Secondary, Ghost), 그리고 상태(Default, Hover, Disabled)를 속성으로 정의합니다. 컴포넌트는 단 하나지만, 구현할 수 있는 조합은 무궁무진하죠.

 

규모가 작은 프로젝트에서는 이렇게까지 하는 게 과해 보일 수 있습니다. 하지만 디자인 시스템을 구축하거나 대규모 프로젝트를 진행하게 된다면? 이 방식이 여러분의 작업 시간을 단언컨대 몇 주나 단축해 줄 겁니다.

 

 

 

8. 레이어 정리가 쉬워지는 삶의 질 상승템: '선택 항목 위에 붙여넣기'

사용법은 아주 간단합니다. 요소를 복사(Ctrl+C)한 뒤, 교체하고 싶은 다른 요소를 선택하고 붙여넣기(Ctrl+V)를 해보세요. 그러면 피그마가 선택한 요소를 복사한 내용으로 쓱 갈아끼워 줍니다. 이때 위치와 레이어 순서까지 그대로 유지해 준다는 게 핵심이죠.

 

이 기능은 여러 시안을 수정해야 할 때 그 진가를 발휘합니다. 만약 20군데나 흩어져 있는 아이콘을 다른 모양으로 바꿔야 한다면? 새 아이콘을 한 번만 복사한 다음, 기존 아이콘들을 선택해서 붙여넣기만 하세요. 드래그할 필요도, 위치를 다시 잡을 필요도 없습니다. 한마디로 '군더더기 없는 완벽한 교체'가 가능해지죠.

 

 

 

9. 입력창에서 바로 계산하기

피그마의 모든 수치 입력창에서는 산술 연산이 가능합니다. 어떤 요소를 1.5배 키우고 싶으신가요? 현재 수치 뒤에 *1.5만 입력하세요. 패딩 값을 20px 더하고 싶다면요? 패딩 창에 +20만 치면 끝입니다.

나누기, 곱하기, 더하기, 빼기까지 전부 다 작동합니다. 휴대폰 계산기를 꺼내거나 암산하느라 머리 아플 필요도 없고, '이쯤이면 맞겠지' 하고 눈대중으로 맞추는 것보다 훨씬 빠르고 정확합니다.

 

 

 

출처:

https://medium.com/design-bootcamp/10-useful-figma-tips-every-ui-designer-should-know-that-will-actually-change-your-workflow-c6533b486491