디자인 툴(Figma)을 100% 활용하는 팁

* 디자인 툴(Figma)을 100% 활용하는 팁
오토 레이아웃(Auto Layout)은 필수!

이 기능은 Figma의 꽃이라고 할 수 있어요. 버튼의 텍스트가 길어져도 패딩(여백)이 자동으로 조절되고, 여러 요소를 추가하거나 삭제해도 전체적인 배치가 흐트러지지 않아요. CSS의 Flexbox를 디자인 툴에 옮겨놓은 것이라고 생각하시면 돼요. 복잡한 레이아웃을 만들 때 시간을 획기적으로 줄여줍니다.

* 컴포넌트 베리언츠(Variants)로 상태 관리하기

버튼의 Default, Hover, Pressed, Disabled 상태처럼 여러 상태를 한 컴포넌트로 관리할 수 있어요. 덕분에 디자이너는 물론, 개발자도 '이 버튼은 이런 상태들이 있구나' 하고 한눈에 파악할 수 있어서 정말 편리해요.

* 스타일(Styles)로 일관성 유지하기

색상(Color), 글꼴(Text), 효과(Effect) 등 반복적으로 사용되는 요소들을 스타일로 저장해두세요. 나중에 한 번에 수정해야 할 때 스타일 하나만 바꾸면 모든 디자인에 적용돼서 통일성을 유지하고 시간을 아낄 수 있어요.

* 플러그인 활용하기

Figma 커뮤니티에는 수많은 플러그인이 있어요. 'Unsplash'로 저작권 걱정 없는 이미지를 바로 가져오고, 'Stark'로 색상 명암비를 체크해 접근성을 높이는 등, 생산성을 높여주는 유용한 도구들이 많으니 적극 활용해 보세요.