[ 피그마 ] 초간단! 아이콘(ICON) 만들기

[ 피그마 ] 초간단! 아이콘(ICON) 만들기

 

디자인 시스템에서 빠질 수 없는 것이 바로 ‘아이콘’입니다. 오늘은 피그마(Figma)를 사용해 누구나 따라 할 수 있는 초간단 아이콘 제작 과정을 단계별로 알아보도록 하겠습니다. 실무에 바로 적용할 수 있도록 기초 설정부터 내보내기까지 꼼꼼히 다뤄보겠습니다.

 

# 1.작업 파일 세팅

1) 프레임(Frame) 설정

F 키를 눌러 24×24 px 또는 32×32 px 프레임을 만듭니다. 아이콘 세트는 보통 동일한 캔버스 크기를 유지해야 일관성을 지킬 수 있습니다. 그리드(Grid)를 4 px 간격으로 설정하면 정렬이 더욱 수월해집니다.

 

프레임 생성

 

이번 포스팅에선 관리자 화면에서 쓰일 아이콘을 만들어 보겠습니다.

 

 

# 2.아이콘 기본 도형 그리기

1) 도형 툴 활용

O (Ellipse), R (Rectangle) 키로 원·사각형 등을 그리고, Shift를 눌러 완벽한 비율을 유지합니다. 예: ‘플러스(+)’ 아이콘이라면 선(Line) 두 개를 교차시켜 만듭니다.

플러스 아이콘

사각형 아이콘

2) Stroke & Fill 값 지정

아이콘 선 두께는 1.5 px 또는 2 px를 많이 사용합니다. Stroke Align을 ‘Center’로 두면 선이 반듯하게 표현됩니다. 필요 시 Corner radius로 부드럽게 라운딩 처리하세요.

 

플러스 아이콘 적용

 

사각형 아이콘 적용

 

# 3.Boolean 연산으로 형태 다듬기

1) Union / Subtract

여러 도형을 선택 후 Union으로 합치거나, 필요 없는 부분은 Subtract를 사용해 깔끔히 잘라냅니다. 단축키 Ctrl/Cmd + E로 Flatten하면 최종 Path 한 개로 정리됩니다.

Ctrl + E 적용

2) Smart Alignment

Shift + A를 눌러 Auto Layout을 적용하면 요소 간 간격을 쉽게 조정할 수 있습니다. 균형 잡힌 아이콘이 완성됩니다.

오토레이아웃 적용

 

# 4.컬러 & 상태별 변형

1) 단색 vs 투톤

UI 아이콘은 일반적으로 단색을 권장하지만, 강조가 필요할 땐 투톤(Primary + Accent)을 활용할 수 있습니다. 색상 대비는 WCAG 기준 3:1 이상을 확인하세요.

 

1. 사각형 아이콘

• 외곽선: Primary 컬러 (#3366FF)

• 배경: Accent 컬러 (#6699FF) 10% 투명도

1. 플러스 아이콘

• 수직선: Primary 컬러 (#3366FF)

• 수평선: Accent 컬러 (#6699FF)

을 기준으로 만들어보았습니다.

 

색상 적용

투톤 적용

2) Hover / Disabled 상태

Variants 기능으로 Hover, Active, Disabled 상태를 한 곳에 묶습니다. 컴포넌트 이름에 property=state 식으로 설정하면 개발자와 협업할 때 매우 편리합니다.

사각형 상태

 

플러스 상태

 

 

# 5.아이콘 내보내기 & 최종 점검

1) Export 설정

아이콘을 선택하고 Export → SVG / PNG를 지정합니다. SVG는 벡터라 해상도 손실이 없고, PNG는 @2x, @3x 등 배수 출력이 필요할 때 유용합니다.

 

 

이번 포스팅에서 초간단 아이콘 만들기를 해봤습니다. 원하는 아이콘을 손쉽고 빠르게 만들어보시고 디자인 시스템의 완성도를

높여보세요.

 

응용

 

무료 아이콘 플러그인도 많으니 적용하셔서 쉽게 사용할수도 있습니다.

 

✅ 도움될만한 포스팅

---

 

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 표 (테이블 table) 만들기

[ 피그마 ] 초간단! 표 (테이블 table) 만들기

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 이미지 누끼 따기

[ 피그마 ] 초간단! 이미지 누끼 따기

[개발 같이해요/DESIGN] - [피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

[피그마] 초간단! 도형안에 이미지 넣기 ( 클리핑 마스크(Clipping Mask) 활용)

 

[정보공유 같이해요/SHORTCUT] - [ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

[ 피그마 ] 피그마 자주쓰는 단축키 종류별 모아보기

 

[개발 같이해요/DESIGN] - [ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

[ 피그마 ] 초간단! 공유받은 작업 로컬로 옮기기

 

[정보공유 같이해요/TECH] - [ AI 툴 ] Figma 대체 툴 Creatie 알아보기

[ AI 툴 ] Figma 대체 툴 Creatie 알아보기

 

썸네일