피그마팁

피그마에서 3D 아이콘 만드는 방법

로

요즘 웹이나 앱 디자인을 보면 살짝 입체감 있는 3D 아이콘들이 눈에 띄잖아요. 저도 그런 스타일을 만들고 싶어서 피그마(Figma)로 3D 느낌의 아이콘을 직접 만들어봤어요. 막상 해보니까 생각보다 어렵지 않았고, 몇 가지 플러그인과 팁을 활용하면 누구나 쉽게 만들 수 있더라고요. 오늘은 제가 직접 해본 방법을 꿀팁까지 다 정리해서 공유할게요.

1. 기본 셰이프(Shape)로 구조 만들기

일단 3D 아이콘도 기본은 2D 도형에서 출발합니다. 피그마 안에서 기본 도형(원, 사각형, 다각형 등)을 활용해서 베이스 형태를 잡아주세요.

팁:

  • 가능한 단순한 형태로 시작하세요. 복잡할수록 나중에 3D 느낌 살리기가 어려워요.
  • 테두리(Stroke)를 두껍게 하고, 둥근 모서리(Radius)를 넣으면 더 부드럽고 귀여운 느낌이 납니다.

2. Layer Blur를 활용한 입체감 주기

피그마에서는 3D처럼 보이게 할 때 ‘Layer Blur’ 효과를 활용할 수 있어요. 그림자나 하이라이트를 직접 그리는 대신, 흐림 효과를 주면 훨씬 자연스럽게 입체감이 살아나요.

주요 설정:

  • 그림자는 아래쪽으로 Layer를 복제하고, 어둡게 칠한 다음 Layer Blur 적용
  • 하이라이트는 위쪽에 밝은 색으로 작은 Layer Blur 적용

링크: Layer Blur 공식 설명 보기

3. 플러그인 활용: Vectary 3D Elements

조금 더 본격적으로 3D 느낌을 내고 싶으면, Vectary 3D Elements라는 플러그인을 써보세요. 피그마 안에서 바로 간단한 3D 오브젝트를 불러오고, 수정할 수 있습니다.

주요 특징:

  • 3D 텍스트, 버튼, 아이콘 생성 가능
  • 색상, 빛 방향 설정 가능
  • 피그마 캔버스 안에 바로 삽입 가능

링크: Vectary 3D Elements 설치하기

4. 플러그인 활용: Spline Integration

Spline은 원래 독립된 3D 디자인 툴인데, 피그마랑 연동할 수 있어요. 복잡한 3D 오브젝트를 Spline에서 만들고, Figma에 바로 가져올 수 있습니다.

주요 특징:

  • 복잡한 3D 오브젝트 제작 가능
  • 인터랙티브 효과까지 지원
  • Figma 플러그인으로 연동 가능

링크: Spline 플러그인 설치하기

5. 색감과 조명 느낌 살리기

3D 아이콘은 색감과 조명 느낌이 엄청 중요해요. 기본적인 팁을 정리하면:

  • 밝은 톤과 어두운 톤을 대비시켜 입체감을 표현하기
  • 광원(빛의 방향)을 하나 정해서, 그림자와 하이라이트 방향을 일관성 있게 맞추기
  • 과도하게 그라데이션을 쓰기보다는, 단순하지만 톤 차이를 명확하게 주기

이렇게 하면 손맛나는 3D 느낌을 훨씬 자연스럽게 낼 수 있어요.

6. 실전 예시: 간단한 3D 버튼 만들기

실제로 제가 최근에 작업했던 간단한 예시를 공유할게요.

  1. 원형 버튼 기본 도형 만들기
  2. 동일한 크기로 하나 복제해서 약간 아래로 이동, 색상 어둡게, Layer Blur 적용
  3. 원본 위에 텍스트 얹고, 텍스트에도 약간의 Drop Shadow 추가
  4. 버튼 위쪽에 살짝 밝은 원을 덧대서 하이라이트 느낌 만들기

이렇게 하니까 5분 만에 나름 괜찮은 3D 버튼이 완성됐어요. 이런 식으로 차근차근 쌓아가면 됩니다.

7. 주의할 점: 너무 과하지 않게

요즘 트렌드는 “살짝” 입체감을 주는 정도지, 옛날 플래시 스타일처럼 무겁고 번쩍이는 3D를 원하는 건 아니에요. 적당히 부드럽고, 깔끔한 입체감만 주는 게 훨씬 세련되어 보여요.

그래서 만들 때 항상 한 발짝 물러나서, “너무 과하지 않나?” 점검하는 게 중요합니다.

최종 정리

  • 피그마 기본 도형으로 시작하되, Blur와 그림자 활용으로 입체감을 살리자.
  • 필요한 경우 Vectary나 Spline 같은 플러그인으로 한 단계 더 3D 느낌을 강화할 수 있다.
  • 색감과 조명 방향을 일관되게 잡는 게 완성도를 좌우한다.

처음에는 조심스럽게 따라 하다가, 점점 익숙해지면 자기 스타일로 변형해서 더 멋진 결과물도 만들 수 있어요. 저도 처음엔 시행착오 많았는데, 계속 해보니까 손에 익더라고요. 피그마에서도 충분히 3D 감성 살릴 수 있으니까 꼭 도전해보세요.

Figma Automator로 반복 작업을 AI처럼 자동화하는 방법

로

디자인하다 보면 진짜 별거 아닌 반복 작업에 시간이 어마어마하게 쏟아질 때가 있어요. 버튼 하나 수정하는 것도 한두 개가 아니고, 텍스트 하나 바꾸려 해도 프레임 수십 개를 뒤져야 하죠. 그래서 저는 아예 이런 스트레스를 줄이려고 Figma Automator 플러그인을 본격적으로 써보기로 했어요. 오늘은 제가 직접 사용하면서 얻은 노하우를 정리해서 공유할게요.

1. Figma Automator란 무엇인가?

Figma Automator는 피그마(Figma) 안에서 반복적인 수작업을 자동화해주는 플러그인이에요. 디자이너가 직접 플로우를 세팅하면, 그다음부터는 버튼 한 번 클릭으로 프레임 복사, 텍스트 변경, 스타일 적용 같은 작업을 쭉 이어서 해줍니다.

주요 특징:

  • 반복 작업을 플로우로 구성 가능
  • 다양한 액션(텍스트 변경, 레이어 복사 등) 지원
  • 복잡한 작업도 조건문(if/else)으로 설정 가능

링크: Figma Automator 설치하기

2. Automator 기본 사용법: 플로우 만들기

처음 Automator를 열면 플로우를 새로 만들 수 있어요. 플로우는 쉽게 말하면, “어떤 작업을 어떤 순서로 진행할지”를 정하는 거예요. 예를 들어, 버튼의 텍스트를 모두 바꾸고 싶다면:

  1. ‘Find and Replace Text’ 액션 추가
  2. 바꾸고 싶은 텍스트 입력
  3. 변경할 새로운 텍스트 입력

이런 식으로 단계별로 세팅하면 됩니다.

팁:

  • 플로우 이름을 명확하게 적어야 나중에 헷갈리지 않아요
  • 자주 쓰는 플로우는 템플릿처럼 저장해두면 진짜 편합니다

3. 자주 쓰는 Automator 액션 모음

제가 개인적으로 많이 쓰는 액션들을 소개할게요.

  • Find and Replace Text: 텍스트 일괄 변경할 때 필수
  • Duplicate Node: 프레임이나 레이어 복사해서 새로운 작업 시작할 때
  • Rename Node: 레이어 네이밍 규칙 통일할 때 사용
  • Set Fill Color: 버튼이나 카드 색깔 일괄 변경할 때 아주 유용
  • Change Font: 전체 폰트 스타일 통일할 때 한 번에 처리 가능

4. Automator 고급 사용법: 조건문 활용하기

반복 작업에서도 조건이 필요한 경우가 많아요. 예를 들어, 텍스트가 ‘Submit’인 버튼만 색상을 변경하고 싶을 때. 이럴 때 조건문을 쓰면 됩니다.

  1. ‘If Text Equals’ 조건 추가
  2. 조건에 맞으면 ‘Set Fill Color’ 실행

이렇게 플로우를 짜면, 필요한 부분만 정확하게 작업할 수 있어요. 복잡한 페이지 작업할 때 이 기능 덕분에 시간을 엄청 아꼈습니다.

5. Automator 실제 사용 예시

최근에 진행한 모바일 앱 디자인에서, 버튼 100개 이상을 전부 새로운 브랜드 컬러로 변경해야 했어요.

예전 같으면 하나하나 들어가서 색 바꾸고, 텍스트 수정하고 난리였겠죠. 그런데 Automator로 플로우 한 번 설정해두고 클릭 한 번 하니까, 진짜 10초 만에 끝났어요. 이런 거 한두 번 경험하면 다시 수작업으로 돌아가기 힘들어집니다.

간단한 예시 플로우:

  • ‘Find and Replace Text’로 버튼 문구 변경
  • ‘Set Fill Color’로 버튼 배경색 일괄 변경
  • ‘Change Font’로 버튼 텍스트 폰트 통일

6. Automator 사용 시 주의할 점

  • 플로우 실행 전에 꼭 파일 백업하세요. 한 번에 여러 작업을 하다 보면 실수했을 때 되돌리기 힘들 수 있어요.
  • 플로우 복잡하게 짜기 전에, 먼저 간단한 테스트 플로우로 검증하는 게 좋아요.
  • 아주 세밀한 제어가 필요한 작업(특정 프레임 내 특정 텍스트만 변경 등)은 아직 수작업이 더 빠를 수도 있어요.

7. 최종 정리: Figma Automator는 이런 사람에게 강력 추천

  • 대규모 디자인 시스템 다루는 디자이너
  • 화면 수십~수백 개를 한꺼번에 수정해야 하는 상황
  • 텍스트, 컬러, 폰트 등 반복되는 수정을 줄이고 싶은 사람

처음에는 플로우 짜는 게 귀찮게 느껴질 수도 있는데, 한두 번 성공 경험을 하면 그다음부터는 손이 먼저 Automator를 켜게 될 거예요. 제 경우도, 지금은 무조건 기본 플로우를 만들어두고 시작합니다.

자동화는 귀찮음을 없애주는 게 아니라, 진짜 필요한 곳에 에너지를 몰아주기 위한 거라는 걸 직접 느꼈어요. Figma Automator 덕분에 디자인 작업이 훨씬 전략적이고 효율적으로 변했습니다.

AI로 UX Writing까지 끝내는 피그마 플로우 만들기

로

요즘 디자인하면서 제일 시간을 많이 잡아먹는 게 뭘까 생각해보면, 저는 늘 텍스트 작업이었어요. 특히 UX Writing은 간단해 보여도 진짜 고민되는 부분이 많잖아요. 그런데 최근에 피그마(Figma) 플러그인 몇 개를 활용하면서, 거의 AI로 처음부터 끝까지 UX Writing 플로우를 다 세팅해버리는 방법을 찾았어요. 오늘은 제가 직접 해본 과정을 그대로 공유할게요.

1. Magician으로 기본 텍스트 자동 생성하기

처음 UX Writing을 시작할 때는 화면마다 버튼, 문구 같은 기본 텍스트부터 잡아야 하잖아요. 이때 Magician 플러그인이 진짜 유용했어요. 프롬프트 창에 “쇼핑몰 회원가입 화면”이라고 입력하면, 버튼 문구, 설명문까지 한꺼번에 생성해줍니다.

주요 특징:

  • 버튼 텍스트 자동 제안
  • 짧은 설명문, 안내 문구까지 지원
  • 생각보다 자연스러운 영어 결과물

링크: Magician 설치하러 가기

2. Content Reel로 더미 데이터 채우기

기본 문구가 준비됐으면, 화면에 더미 텍스트나 사용자 이름 같은 걸 채워야 하잖아요. 그럴 때 Content Reel 플러그인을 같이 썼어요. 이름, 이메일, 주소 같은 걸 원하는 만큼 랜덤으로 채워줘서 프로토타입이 훨씬 실제 같아져요.

주요 특징:

  • 이름, 이메일, 주소 데이터 자동 입력
  • 다국어 데이터 지원
  • 커스텀 데이터 업로드 가능

링크: Content Reel 설치하러 가기

3. CopyDoc으로 텍스트 버전 관리하기

버튼이나 설명문 같은 걸 한번 뽑아놨다고 끝나는 게 아니죠. 수정하고, 버전 바꾸고, 최종 확정까지 관리하는 게 은근 복잡합니다. 이때 CopyDoc 플러그인을 쓰면 버전 관리가 엄청 편해져요. 화면별로 어떤 문구를 썼는지, 수정 내역까지 정리할 수 있습니다.

주요 특징:

  • 텍스트 버전 관리 기능
  • 페이지별 텍스트 내보내기/불러오기 가능
  • 수정 히스토리 확인 가능

링크: CopyDoc 사용해보기

4. Wized와 연결해서 진짜 데이터 반영하기

프로토타입을 진짜 제품처럼 만들고 싶을 때는 Wized를 사용했습니다. Figma 디자인과 실제 데이터베이스를 연결할 수 있어서, 가상의 사용자 데이터를 연결해서 테스트할 수 있어요. 이걸 쓰니까 프로토타입이 거의 완제품 수준으로 리얼하게 보이더라고요.

주요 특징:

  • 피그마와 데이터베이스 연동
  • 실시간 데이터 반영 가능
  • 노코드 기반이라 개발 없이 연결 가능

링크: Wized 공식 페이지

5. 최종 정리: AI 플로우로 UX Writing 완성하는 방법

전체 플로우를 정리하면 이렇게 됩니다.

  • Magician으로 화면별 기본 텍스트 초안 생성
  • Content Reel로 더미 데이터 채워서 실감나게 구성
  • CopyDoc으로 텍스트 버전 관리하고 히스토리 남기기
  • Wized로 진짜 데이터 연결해서 리얼한 프로토타입 만들기

처음에는 “진짜 이렇게까지 자동화가 될까?” 반신반의했는데, 몇 번 반복하다 보니까 정말 손에 익더라고요. 물론 모든 문구를 AI가 완벽하게 써주진 않아요. 대신 초안을 뽑고 다듬는 데 드는 시간을 엄청나게 줄여줍니다.

덕분에 요즘은 디자인보다 UX Writing 준비하는 시간이 훨씬 짧아졌고, 그만큼 더 많은 테스트와 수정을 여유 있게 할 수 있게 됐어요. AI는 결국 시간을 벌어주는 도구라는 걸 다시 느꼈습니다.

UX Writing 때문에 작업 속도가 막히고 있다면, 꼭 한번 이 플로우로 적용해보세요. 진짜 세상이 달라집니다.