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

· 6개월 전 · 479

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

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

 

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

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

 

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

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

 

* 플러그인 활용하기

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

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

디자이너팁

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

+
제목 글쓴이 날짜 조회
1개월 전 조회 147
1개월 전 조회 180
2개월 전 조회 294
2개월 전 조회 250
4개월 전 조회 418
6개월 전 조회 433
6개월 전 조회 480
6개월 전 조회 547
6개월 전 조회 535
7개월 전 조회 571
7개월 전 조회 613
7개월 전 조회 473
8개월 전 조회 568
8개월 전 조회 557
1년 전 조회 1,290
1년 전 조회 942
1년 전 조회 1,427
3년 전 조회 5,603
3년 전 조회 3,781
3년 전 조회 2,773
3년 전 조회 2,985
3년 전 조회 2,541
3년 전 조회 2,774
3년 전 조회 2,487
4년 전 조회 4,202
4년 전 조회 4,822
4년 전 조회 4,478
4년 전 조회 2만
4년 전 조회 5,045
4년 전 조회 4,312