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

· 7개월 전 · 587

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

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

 

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

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

 

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

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

 

* 플러그인 활용하기

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

|
댓글을 작성하시려면 로그인이 필요합니다.

디자이너팁

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
2개월 전 조회 278
3개월 전 조회 283
3개월 전 조회 382
3개월 전 조회 366
5개월 전 조회 535
7개월 전 조회 540
7개월 전 조회 588
7개월 전 조회 644
8개월 전 조회 647
8개월 전 조회 663
8개월 전 조회 739
8개월 전 조회 589
9개월 전 조회 678
9개월 전 조회 665
1년 전 조회 1,403
1년 전 조회 1,056
1년 전 조회 1,532
3년 전 조회 5,837
3년 전 조회 3,928
3년 전 조회 2,888
3년 전 조회 3,110
3년 전 조회 2,671
3년 전 조회 2,902
3년 전 조회 2,623
4년 전 조회 4,423
4년 전 조회 4,972
4년 전 조회 4,612
4년 전 조회 2만
4년 전 조회 5,186
4년 전 조회 4,451