Figma

How to use the Figma

클라이언트와의 소통(이거 매우 중요)

로

디자인을 하면서 가장 어렵다고 느꼈던 순간 중 하나.
바로 클라이언트와의 소통입니다.

분명 나는 깔끔하게 만들었는데, 내 기준에서 왜 이런 피드백을 주는거지? 본인이 정확히 원하는게 뭔지도 모르는

클라이언트도 많고, 윗사람들도 많아요.
이런 일이 반복되면 솔직히 디자이너 입장에선 조금 지칩니다. 😅

예전에는 PDF나 JPG로 파일을 보내고, 따로 이메일이나 메신저로 피드백을 받는 게 일반적이었죠.
근데 문제는 이 과정이 굉장히 비효율적이라는 거예요.
수정 사항이 누락되거나, 서로 이해가 안 맞아서 시간을 낭비하는 일이 많았습니다.

피그마로 바뀐 소통의 방식

피그마를 사용하기 시작하면서 이런 문제가 거의 사라졌습니다.

실시간 공유의 힘

가장 큰 변화는 링크 하나로 파일을 바로 보여줄 수 있다는 것이었습니다.
굳이 무거운 파일을 주고받을 필요도 없고, 클라이언트도 별다른 프로그램 없이 브라우저만 있으면 바로 열어볼 수 있죠.
“여기서 조금만 더 키워주세요” 같은 요청도 바로 피드백 받고 즉석에서 수정할 수 있어요. ✨

코멘트 기능, 이건 정말 혁명

특히 코멘트(Comment) 기능은 거의 필수입니다.
클라이언트가 직접 원하는 요소 위에 메모를 남기면, 어떤 부분을 말하는지 헷갈릴 일이 없어요.
저도 덕분에 “어디 부분 말씀하시는 거죠?” 같은 질문을 거의 하지 않게 됐습니다.
작업의 흐름이 훨씬 매끄러워졌어요. 📌

버전 관리도 깔끔하게

작업하다 보면 수정과 변경은 늘 있기 마련입니다.
피그마는 자동으로 모든 버전을 저장해두기 때문에, 혹시 클라이언트가 “예전 걸로 돌려주세요”라고 해도 바로 복원할 수 있습니다.
이 기능 덕분에 저도 몇 번 큰 위기를 넘겼어요. 😮‍💨

클라이언트도 좋아하고, 나도 편해진 구조

예전에는 디자인 전달과 수정 요청 과정이 복잡하다 보니, 클라이언트 입장에서도 조금 불편했을 겁니다.
하지만 피그마로 바뀐 뒤로는 대부분이 긍정적이에요.
“보기 편해요”, “바로바로 수정되니까 좋네요” 같은 반응을 많이 받았습니다.

사실 이런 부분은 디자이너 입장에서도 정말 중요합니다.
프로젝트의 흐름이 매끄러워지면 불필요한 스트레스가 줄어들고, 작업에 더 집중할 수 있으니까요. 😊

정리하며

디자인 툴이 점점 발전하는 건 알고 있었지만, 피그마처럼 소통 방식 자체를 바꿔준 툴은 흔치 않습니다.
지금도 클라이언트와 작업할 땐 거의 무조건 피그마를 사용합니다.
효율성, 편리함, 그리고 무엇보다 서로 오해 없이 일할 수 있는 구조.

이제는 더 이상 “이 파일이 최신인가요?”, “어떤 부분 말씀하시는 건가요?” 같은 말은 거의 하지 않습니다.
피그마가 만들어준 새로운 협업 방식 덕분에, 디자이너와 클라이언트 모두가 조금 더 행복해진 것 같아요.

플러그인, 진짜 쓰는 것만 추천합니다 (현업 디자이너 필수템)

로

직히 말해서 피그마만 가지고는 뭔가 부족한 느낌이 들 때가 있거든요.

그런데 플러그인을 적절히 활용하면 마치 내가 디자이너 한 명 더 둔 것처럼 작업 속도와 퀄리티가 확 올라가요. 하지만 종류가 워낙 많다 보니 뭘 써야 할지 모르겠는 경우가 많죠.

그래서 오늘은 제가 실제로 자주 쓰고 있는, 현업에서 진짜 도움 되는 플러그인만 골라서 소개해보려고 해요. 🙂

처음 플러그인을 써본 건 이미지 사이즈 리사이징 때문에였어요… 개발자한테 넘기기 전에 이미지 용량 줄여야 하잖아욤.

매번 포토샵 열기 귀찮아서 찾다 보니 “TinyImage Compressor”라는 플러그인을 알게 되버렸드랫죠!

이건 정말 간단하게 이미지 압축을 할 수 있어서 지금도 계속 쓰고 있어요.

그다음으로 자주 쓰는 건 “Iconify“예요.

피그마 안에서 바로 수천 개의 아이콘을 검색하고 넣을 수 있어서 너무 편해요. 특히 디자인 시안 만들 때 여기서 아이콘 뽑아서 바로 쓰면 시간 절약이 엄청 돼요. 예전엔 아이콘 파인더 사이트에서 찾고, svg로 다운받고, 다시 피그마에 올리는 과정을 반복했는데, 이 플러그인 덕분에 그 고생 안 해도 되더라고요.

또 하나는 “FigJam to Figma”인데요, 회의나 아이디어 스케치할 때 FigJam에서 했던 작업을 그대로 Figma로 옮기고 싶을 때 쓰면 좋아요. 브레인스토밍 끝나고 실질적인 화면 구성을 옮길 때 정말 유용해요. 저는 특히 클라이언트 미팅하면서 이 플러그인을 많이 써요. 그 자리에서 정리한 걸 바로 시안으로 넘기니까 작업이 끊기지 않고 이어져요.

그리고 협업할 때 빠질 수 없는 게 “Stark”예요. 접근성 검사 도구인데요,

텍스트 대비가 기준에 맞는지 확인해줘요. 저희 팀에서는 디자인 리뷰할 때 Stark를 돌려서 최소한 WCAG AA 이상은 맞추고 있어요. 색 조합이나 대비 문제가 있는지 빠르게 체크할 수 있어서, 좋드라구요!

마지막으로 하나 더 꼽자면 “Content Reel”이에요. 이건 텍스트 더미, 이름, 이메일, 숫자 같은 걸 랜덤으로 넣을 수 있는 플러그인인데요, 그냥 Lorem Ipsum 텍스트보다 훨씬 현실적인 느낌을 줄 수 있어서 시안 만들 때 좋아요.

예를 들어 리스트 디자인할 때 전부 ‘텍스트’라고 써두는 것보다, 실제 이름이나 숫자가 들어가면 더 그럴듯하잖아요.

플러그인은 많지만, 진짜 자주 쓰는 건 몇 개 없어요. 중요한 건 플러그인을 많이 설치하는 게 아니라,

내 작업 방식에 맞는 걸 고르고 익숙해지도록 루틴화하는 거라고 생각해요. 여기 소개한 플러그인들은 제가 실무에서 꾸준히 쓰고 있는 것들이고, 그 덕분에 시간도 절약되고 퀄리티도 올라갔어요.

다음엔 플러그인만 잘 써도 프로처럼 보일 수 있는 ‘디자인 디테일 자동화’ 방법도 정리해보려고 해요. 혹시 위에서 소개한 플러그인 중 궁금한 게 있거나, 내가 몰랐던 꿀템 있으면 댓글로 알려주세요. 저도 새로운 플러그인 탐색하는 걸 좋아하거든요!

팀원이랑 피그마로 실시간 협업(실제후기)

로

피그마는 협업에 정말 최적화된 도구라는거 다들 알죠? 그런데 막상 여러 명이 동시에 같은 파일에서 작업을 시작하면 의외로 정신없고 복잡해지기 쉬워집니다. 저는 실무에서 2~4명의 팀원과 함께 피그마로 실시간 협업을 자주 하는데요, 그 과정에서 경험한 불편함과 해결책을 정리해봤어요. 이건 이론이 아니라, 제가 정말 프로젝트를 하면서 느꼈던 실제 팁들이에요.

1. 실시간 커서 공유 기능은 꼭 필요할 때만 켜기

처음에 팀원 모두가 실시간 커서를 켜놓고 작업하면 어떤 일이 벌어지냐면요,

화면 위에서 마우스 커서들이 춤을 춰요. 어디에 집중해야 할지 모를 정도로 시선이 분산되죠. 그래서 저는 중요한 리뷰나 설명이 있을 때만 커서를 공유하고.. 그 외에는 꺼두는 걸 추천해요.

피그마 좌측 하단의 커서 표시 옵션에서 조절할 수 있어요.

2. 실수로 컴포넌트 건드리는 걸 막으려면 ‘Lock’ 기능 활용하기

실시간 협업 중에 팀원이 실수로 컴포넌트를 누르고 위치를 바꾸거나 텍스트를 수정해버리는 경우가 있었어요. –;;

작업하다 보면 무심코 클릭해서 움직여버리는 경우, 의외로 자주 발생해요. 그래서 제가 쓰는 방법은 주요 요소들을 Lock 시켜두는 거예요. 특히 공통 내비게이션이나 푸터 같은 건 미리 Lock 해두면 불필요한 수정 실수를 줄일 수 있어요.

3. 이름 없는 Frame은 협업의 적이에요

팀원끼리 어떤 작업을 나눠서 할 때 “그 오른쪽 위에 있는 회색 박스 있잖아”처럼 말하는 경우가 있어요. 하지만 대략적인 시안에는 괜찮아요.

그런데 실제로 그 프레임 이름이 “Frame 3″이면 혼란이 생겨요. 저는 작업할 때 각 섹션마다 꼭 의미 있는 이름을 붙여요. 예를 들면 “Main Hero Area”, “Footer Nav” 이런 식으로요. 검색도 편하고, 나중에 라이브러리화할 때도 효율적이에요.

4. 코멘트 기능은 최대한 구체적으로

피그마 코멘트 기능 정말 자주 써요. 그런데 피드백을 줄 때 “여기 수정해주세요” 이렇게만 적으면 누가 봐도 헷갈리죠. 그래서 저는 항상 이렇게 씁니다: “이 버튼 텍스트를 ‘시작하기’로 바꿔주세요. 이유는 사용자 액션 유도 때문입니다.” 이런 식으로요. 문장 하나만 더 써도 의도 전달이 훨씬 명확해지더라고요.

5. 버전 관리 기능은 정말 꼭 써야 해요

처음엔 몰랐는데, 피그마는 자동 저장되니까 굳이 저장할 필요 없다고 생각했거든요? 그런데 팀원이 실수로 전체 레이아웃을 날려버린 일이 있었어요. 그땐 진짜 당황했죠. 그 이후로 저는 큰 변경 전에는 꼭 “버전 저장(Create New Version)” 기능을 써요. 이건 피그마 오른쪽 상단의 파일 이름 클릭 > Show version history에서 관리할 수 있어요. 협업 중 실수로 망가졌을 때 원상복구할 수 있어서 필수 기능이에요.

실제 작업 중 적용 사례

최근에 저희 팀은 웹사이트 리디자인 프로젝트를 했는데요, 헤더와 푸터는 공통 컴포넌트로 만들고, 각각의 섹션을 담당 디자이너가 나눠서 작업했어요. 처음엔 각자 수정하다 보니 누가 뭘 바꿨는지 모르고 겹치는 일이 많았는데, 위에서 말한 팁들을 적용한 이후부터는 업무 효율이 눈에 띄게 좋아졌어요. 특히 Frame 이름 정리와 코멘트 명확화는 피드백 속도를 크게 줄여줬고요.

마무리하며

피그마는 진짜 좋은 툴이에요. 하지만 그만큼 협업의 룰과 매너도 중요하다는 걸 실무에서 많이 느꼈어요. 이 글은 어디서 복사해온 정보가 아니라, 제가 직접 겪은 상황과 경험을 바탕으로 정리한 거예요. 여러분이 팀원들과 협업하면서 피그마를 더 잘 활용하는 데 도움이 되길 바라요. 저도 앞으로 더 다양한 협업 팁을 정리해서 공유해보려고 해요.

혹시 더 궁금한 게 있으면 댓글로 남겨주세요. 실제 상황에서 써먹을 수 있는 꿀팁만 계속 업데이트해볼게요.

앞으로 피그마는 어떻게 AI랑 더 붙을까? (미래 예측)

로

요즘 피그마(Figma)만 열어도 AI 기능이 점점 자연스럽게 녹아들고 있는 게 느껴지죠. 저도 디자인하면서 “이거 진짜 몇 년 안에 완전히 달라지겠다” 싶었어요. 그래서 오늘은 지금까지 경험하고, 리서치하고, 실제 써보면서 느낀 걸 바탕으로 앞으로 피그마가 AI랑 어떻게 더 강력하게 연결될지 예측해보려고 해요.

1. 디자인 초안 자동 생성 기능 강화

지금도 Magician이나 Galileo AI 같은 플러그인 덕분에 초안 스케치는 빠르게 가능해졌잖아요. 앞으로는 아예 피그마 기본 기능 안에서, 텍스트 프롬프트만 입력하면 전체 레이아웃과 컴포넌트를 기본 세팅해주는 게 기본이 될 것 같아요.

예상 흐름:

  • “이커머스 앱 메인 페이지 만들어줘” ➡ 전체 프레임, 버튼, 카드 다 자동 배치
  • 스타일 가이드까지 같이 세팅해주는 흐름

관련 참고: Magician 플러그인 보기

2. 디자인 시스템 자동 추천 기능 탑재

지금은 우리가 직접 디자인 시스템을 세팅하지만, 앞으로는 피그마가 프로젝트 스타일에 맞는 컴포넌트 세트나 컬러 팔레트를 추천해줄 가능성이 높아요.

예상 흐름:

  • 프로젝트 시작할 때 “톤&무드”만 입력
  • 피그마가 맞춤형 디자인 시스템 기본 틀 제안

관련 참고: Ando 플러그인 둘러보기

3. 실시간 피드백 기반 자동 수정

현재도 플러그인으로 피드백 기능은 있지만, 앞으로는 AI가 실시간으로 레이아웃 문제, 정렬 오류, 접근성 문제를 자동으로 감지하고 제안할 수 있을 것 같아요.

예상 흐름:

  • “버튼 간격이 너무 좁아요. 8px 이상 벌리세요.” 같은 실시간 팝업 알림
  • 컬러 대비 문제도 즉시 체크

관련 참고: Figma 접근성 가이드

4. 프로토타입 자동 연결 기능 발전

지금은 우리가 하나하나 링크 걸어야 하지만, 앞으로는 AI가 플로우를 분석해서, 페이지 간 이동을 자동으로 연결해줄 가능성도 커요.

예상 흐름:

  • “회원가입 ➡ 완료 페이지 ➡ 메인 페이지” 흐름을 AI가 자동 연결
  • 사용자 시나리오 기반 추천 플로우 제공

관련 참고: FigJam 공식 페이지

5. 텍스트, 이미지 최적화까지 AI가 담당

UX Writing은 물론이고, 버튼 크기, 폰트 사이즈, 아이콘 크기 같은 것도 AI가 자동 최적화 제안을 해줄 거예요. “이 화면에는 작은 버튼보다 중간 사이즈가 더 좋아요” 같은 식으로요.

예상 흐름:

  • 레이아웃 최적화 제안
  • 버튼, 카드, 폰트 최적 스펙 자동 추천

6. 외부 툴과의 통합 강화

피그마는 지금도 다양한 플러그인이 있지만, 앞으로는 ChatGPT, Notion, Webflow, Framer 같은 툴들이 더 촘촘하게 붙을 것 같아요. 디자이너가 툴 여러 개 왔다갔다 할 필요 없이 피그마 안에서 거의 다 처리하게 될 겁니다.

예상 흐름:

  • Figma 안에서 바로 Notion 문서 작성
  • Figma에서 만든 디자인을 Webflow로 원클릭 배포

관련 참고: Webflow 공식 사이트

7. 디자인 분석 리포트 기능 추가될 가능성

디자인이 끝나면 피그마 AI가 자동으로 “이 디자인은 접근성 점수 몇 점, 일관성 점수 몇 점” 이런 식으로 리포트를 만들어줄 가능성도 커요. 그러면 수정 방향도 더 명확해지겠죠.

예상 흐름:

  • 프로젝트별 디자인 평가 리포트 자동 생성
  • 개선 포인트 자동 분석

8. AI가 추천하는 A/B 테스트용 디자인 생성

나중에는 피그마가 A/B 테스트를 위한 대체 디자인도 제안해줄 수 있을 것 같아요. 예를 들어 버튼 스타일이나 문구를 두 가지 버전으로 만들어주고, 사용자가 선택해서 실험할 수 있게요.

예상 흐름:

  • “이 버튼 스타일 vs 저 버튼 스타일” 추천하고 클릭률 실험
  • 자동화된 A/B 테스트용 시안 제공

최종 정리

  • 피그마는 앞으로 AI와의 결합이 점점 깊어질 것이다.
  • 반복 작업, 시스템 구축, 피드백, 플로우 연결 등 대부분의 작업 흐름에 AI가 관여할 것이다.
  • 디자이너는 손으로 작업하기보다는, AI가 제안하는 것을 “큐레이션”하는 역할이 점점 더 커질 것이다.

저도 솔직히 AI가 이렇게 빠르게 발전할 줄 몰랐어요. 하지만 분명한 건, 이 흐름을 무시할 수는 없다는 거예요. 피그마 안에서 AI를 내 편으로 삼는 사람이 앞으로 훨씬 빠르고 강해질 거라는 건 확실합니다.

지금부터라도 AI 플러그인들을 하나하나 써보면서, 변화에 자연스럽게 적응해보는 걸 진짜 추천합니다.

피그마 + ChatGPT: 디자이너가 바로 적용할 수 있는 콜라보 활용법

로

요즘 디자인 작업할 때 단순히 손으로만 하는 게 아니라, AI랑 같이 콜라보하는 게 점점 당연해지고 있죠. 저도 요즘 프로젝트마다 ChatGPT를 활용해서 피그마(Figma) 작업 속도를 엄청 끌어올리고 있어요. 그냥 아이디어만 받는 수준이 아니라, 진짜 실무에 바로 적용할 수 있게 쓴 경험을 오늘 제대로 정리해보려고 해요.

1. ChatGPT로 UX Writing 초안 뽑기

디자인할 때 가장 시간이 오래 걸리는 게 바로 버튼 문구, 안내문 같은 UX Writing 작업이었어요. 근데 이제는 ChatGPT한테 상황을 설명해주고 바로 문구 초안을 받아요.

사용 방법:

  • 예: “회원가입 페이지의 버튼 텍스트를 3개 추천해줘. 친근하고 짧게.”
  • 바로 “시작하기”, “가입 완료”, “새로운 여정 시작” 같은 식으로 결과가 나와요.

링크: ChatGPT 사용하러 가기

2. FigJam에서 브레인스토밍할 때 ChatGPT 아이디어 활용

FigJam으로 브레인스토밍할 때 아이디어가 막힐 때가 많았는데, 이때 ChatGPT에 키워드를 던지면 연관 아이디어를 쫙 뽑아줍니다.

활용 예시:

  • “여행 예약 앱 기획 아이디어 5개 추천해줘”
  • ChatGPT가 추천해주는 아이디어를 FigJam에 바로 정리해서, 초반 흐름을 빠르게 잡을 수 있어요.

링크: FigJam 공식 페이지

3. 컴포넌트 이름 짓거나 정리할 때 ChatGPT 활용

디자인 시스템 만들 때 컴포넌트 이름 정하는 것도 은근 스트레스잖아요. 버튼, 카드, 입력창 같은 것들 이름을 통일성 있게 짓고 싶을 때 ChatGPT한테 요청해요.

활용 방법:

  • “모바일 앱용 버튼 컴포넌트 네이밍 규칙 추천해줘”
  • 명확하고 일관성 있는 이름 리스트를 바로 받을 수 있어요.

4. 사용자 시나리오 작성에 활용

피그마에서 플로우차트 만들 때, 실제 사용자 시나리오를 짜는 게 필요해요. 이때 ChatGPT를 활용하면 훨씬 빠르게 만들 수 있습니다.

활용 예시:

  • “식당 예약 앱에서 사용자가 예약하는 플로우 시나리오를 단계별로 써줘”
  • ChatGPT가 흐름을 단계별로 정리해주니까, 그걸 바로 FigJam이나 Figma에 옮기면 돼요.

5. 색상 팔레트 추천받기

가끔 디자인할 때 컬러 조합 고민하는 경우도 많죠. 이때도 ChatGPT를 사용해요.

활용 방법:

  • “여름 느낌 나는 색상 팔레트 5개 추천해줘”
  • 색 조합을 텍스트로 받아서, Figma 안에서 직접 샘플링해 적용해보면 됩니다.

6. 피그마 플러그인 추천받기

작업하다가 필요한 기능이 있을 때, 어떤 플러그인을 써야 할지 모를 때 ChatGPT한테 바로 물어봅니다.

활용 예시:

  • “피그마에서 아이콘 라이브러리 쓸만한 플러그인 추천해줘”
  • 플러그인 이름, 특징, 설치 링크까지 받을 수 있어서 바로 적용 가능해요.

7. 실전 플로우: Figma + ChatGPT 콜라보 방법

제 기준으로 가장 많이 쓰는 실전 플로우는 이래요.

  1. 아이디어 브레인스토밍 ➡ ChatGPT로 키워드별 아이디어 정리 ➡ FigJam 정리
  2. UX Writing 초안 작업 ➡ ChatGPT로 문구 생성 ➡ 피그마에 바로 적용
  3. 컴포넌트 네이밍/정리 ➡ ChatGPT로 통일성 있는 네이밍 세팅
  4. 사용자 플로우 작성 ➡ ChatGPT로 시나리오 초안 받고 FigJam에 시각화
  5. 컬러 팔레트 추천 ➡ ChatGPT로 색 조합 받아서 테스트 적용

이 플로우만 제대로 써도 초반 디자인 작업 시간이 진짜 절반으로 줄어들어요.

8. 주의할 점: ChatGPT 답변은 검증이 필요하다

아무리 편하다고 해도, ChatGPT가 제안하는 답변을 무조건 믿으면 안 됩니다. 특히 실제 서비스에 들어가는 문구나 사용자 흐름은 반드시 검증하고, 직접 수정하거나 다듬어야 해요.

결국 최종 퀄리티는 디자이너 본인이 책임져야 한다는 거, 꼭 기억하세요.

최종 정리

  • ChatGPT는 피그마 작업에서 아이디어 발굴, 텍스트 작업, 플로우 설계에 아주 강력한 도구다.
  • 실무에 바로 적용하려면, 뽑아낸 결과를 검토하고 다듬는 단계를 거쳐야 한다.
  • 디자인 초기 단계에서 속도와 퀄리티를 동시에 끌어올리고 싶다면, Figma + ChatGPT 조합을 적극 추천한다.

저도 이 조합을 쓰면서 디자인이 훨씬 재밌어졌고, 무겁게 혼자 끙끙대는 시간이 확 줄었어요. 고민보다 일단 써보는 게 답입니다.

피그마에서 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 감성 살릴 수 있으니까 꼭 도전해보세요.

AI로 피그마에서 디자인 아이디어 브레인스토밍하는 꿀팁

로

디자인할 때 아이디어가 막혀서 진짜 멍하게 화면만 바라볼 때 많지 않나요? 저도 그런 순간이 많았어요. 특히 빠르게 무드보드나 와이어프레임 초안을 잡아야 할 때는 시간이 촉박해서 더 막막하죠. 그런데 요즘은 피그마(Figma)에서 AI 플러그인을 활용해서 브레인스토밍을 훨씬 수월하게 하고 있어요. 직접 써보고 정리한 실전 꿀팁들을 오늘 공유해볼게요.

1. Magician으로 빠르게 아이디어 스케치하기

Magician 플러그인은 디자인 아이디어 초안을 정말 빠르게 그려낼 수 있어요. 원하는 화면이나 기능을 설명하는 짧은 문장을 입력하면, 기본적인 레이아웃이나 버튼 구성 같은 걸 바로 제안해줘요.

예를 들면 “스터디 그룹 앱 메인 화면”이라고 치면, 버튼, 카드, 리스트 구성까지 자동으로 생성해줘서 아이디어를 구체화하는 데 큰 도움이 됩니다.

주요 특징:

  • 기본 레이아웃 생성
  • 텍스트, 버튼 등 구성 요소 제안
  • 초안 단계에 최적화

링크: Magician 설치하러 가기

2. Galileo AI로 다양한 화면 구조 제안받기

Galileo AI는 Magician보다 조금 더 본격적으로 “전체 페이지” 느낌을 만들어줘요. 원하는 앱 종류나 웹사이트 유형을 입력하면, 홈화면, 로그인 화면, 대시보드 등 다양한 화면을 설계해줍니다.

특히 처음 기획할 때 페이지 구성에 대한 아이디어가 부족할 때 정말 강력합니다. 여러 버전을 비교하면서, 어떤 흐름이 좋은지 결정할 수 있었어요.

주요 특징:

  • 다양한 페이지 유형 생성
  • 대시보드, 마이페이지 같은 복잡한 구조도 제안 가능
  • 빠른 초기 스케치에 최적

링크: Galileo AI 둘러보기

3. FigJam AI로 무드보드/아이디어 맵 만들기

피그마 안에 있는 FigJam에도 AI 기능이 들어왔다는 거 알고 있었나요? FigJam AI를 활용하면 브레인스토밍 맵, 무드보드, 사용자 흐름도 같은 걸 AI가 제안해줍니다.

특히 혼자서 브레인스토밍할 때 막연한 생각을 구체적인 흐름으로 정리할 수 있어서 큰 도움이 됐어요. “어떤 사용자 플로우를 잡을까” 고민할 때 추천합니다.

주요 특징:

  • 무드보드 자동 생성
  • 사용자 흐름(UX 플로우) 맵핑 지원
  • 팀 브레인스토밍 세션에도 유용

링크: FigJam AI 알아보기

4. Ando로 컴포넌트 베이스 아이디어 확장하기

브레인스토밍은 큰 그림만 잡는 게 아니라, 실제 UI 구성 요소(버튼, 카드 등) 아이디어도 필요하잖아요. 그럴 때 Ando 플러그인을 쓰면 스타일을 선택해서 컴포넌트를 자동 생성할 수 있어요.

특히 디자인 시스템 기반 작업할 때, 다양한 스타일을 미리 비교해보고 결정할 수 있어서 아주 유용했습니다.

주요 특징:

  • 다양한 스타일 옵션 지원
  • 실무용 컴포넌트 빠른 생성
  • 초기 아이디어 확장에 적합

링크: Ando 공식 페이지

5. 실전 브레인스토밍 플로우 추천

제가 요즘 실제로 사용하는 브레인스토밍 플로우를 정리하면 이렇게 됩니다.

  1. FigJam AI로 전체 흐름, 무드보드 뼈대 잡기
  2. Galileo AI로 각 화면(홈, 로그인 등) 초안 뽑기
  3. Magician으로 디테일한 버튼, 문구, 레이아웃 추가
  4. Ando로 스타일링 가능한 컴포넌트 테스트

이렇게 AI를 단계별로 활용하면, 아이디어가 막힐 틈이 없습니다. 속도도 빨라지고, 다양한 시도를 해볼 수 있어서 결과물 퀄리티도 높아지더라고요.

6. 주의할 점: AI는 초안일 뿐, 최종은 내 손으로

AI가 제안해주는 아이디어는 정말 다양하고 신선하지만, 그대로 쓰기엔 부족한 부분도 있어요. 결국 최종 디자인은 사람이 직접 다듬어야 완성도가 높아집니다.

AI는 어디까지나 “브레인스토밍 보조도구”라고 생각하고, 직접 터치해서 디테일을 살리는 걸 잊지 말아야 해요.

최종 정리

  • 아이디어가 막혔을 때, 혼자 고민하지 말고 AI 플러그인 도움 받아보세요.
  • 다양한 플러그인을 조합하면 더 풍성한 결과를 얻을 수 있어요.
  • 최종 완성도는 여전히 디자이너의 손끝에서 결정됩니다.

저도 처음에는 AI가 진짜 쓸모 있을까 의심했지만, 직접 해보니까 오히려 창의력을 더 키워주는 느낌이었어요. 디자인 초반 브레인스토밍이 고민인 분들께 꼭 추천합니다.

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 때문에 작업 속도가 막히고 있다면, 꼭 한번 이 플로우로 적용해보세요. 진짜 세상이 달라집니다.

피그마 AI 플러그인 TOP 5 비교 분석

로

디자인할 때 AI를 쓰는 게 진짜 당연해진 요즘, 특히 피그마(Figma)에서는 AI 플러그인들이 빠르게 발전하고 있어요. 저도 처음에는 “설마 AI가 디자인을 대신해줄까?” 반신반의했는데, 직접 써보니까 속도도 확 오르고, 결과물 퀄리티까지 꽤 괜찮더라고요. 그래서 오늘은 제가 실제로 써본 피그마 AI 플러그인 중에서 제일 유용했던 것들을 골라서 비교 분석해볼게요.

1. Magician – 디자인 마법사를 꿈꾼다면

Magician은 피그마에서 가장 유명한 AI 플러그인 중 하나예요. 버튼 문구 짓기, 아이콘 생성, 심지어 짧은 설명문까지 빠르게 만들어줘요. 특히 디자인 초안 만들 때, 아이디어를 빠르게 시각화할 수 있어서 엄청 유용했습니다.

주요 특징:

  • 버튼, 문구, 아이콘 자동 생성
  • 자연스러운 UX Writing 지원
  • 초기 아이디어 빠른 시각화

링크: Magician 설치하러 가기

2. Galileo AI – 프롬프트만 치면 와이어프레임 완성

Galileo AI는 텍스트로 명령만 주면 와이어프레임을 뚝딱 만들어주는 플러그인이에요. 예를 들면, “쇼핑몰 로그인 페이지”라고 입력하면 기본적인 레이아웃을 바로 만들어줘요. 아이디어 스케치 단계에서 진짜 속도가 다릅니다.

주요 특징:

  • 텍스트 입력만으로 레이아웃 생성
  • 다양한 페이지 유형 지원
  • 스케치 단계에 최적화

링크: Galileo AI 둘러보기

3. Ando – 컴포넌트를 알아서 척척

Ando는 실무용 컴포넌트를 빠르게 만들어주는 AI 플러그인이에요. 버튼, 카드, 리스트 등 기본 UI 요소를 스타일 맞춰 자동으로 만들어줘서 디자인 시스템 만들 때 시간 절약이 엄청 됩니다.

주요 특징:

  • 다양한 스타일 설정 가능
  • 실무 적용 가능한 컴포넌트 생성
  • 대규모 디자인 시스템 초안 작업에 최적화

링크: Ando 공식 페이지

4. Genius – 디자인 영감이 필요할 때

Genius는 조금 다르게 접근해요. 주어진 키워드에 맞춰서 다양한 스타일의 디자인 컨셉을 제안해줘요. 뻔한 스타일이 아니라 가끔은 예상 못한 레이아웃이나 색 조합을 제안해줘서, 영감 받을 때 정말 좋아요.

주요 특징:

  • 다양한 디자인 스타일 추천
  • 영감 확장에 최적화
  • 새로운 접근이 필요할 때 강력함

링크: Genius 사용해보기

5. Automator – 반복 작업 자동화의 끝판왕

Automator는 수십 개 텍스트 변경, 프레임 복사, 컴포넌트 업데이트 같은 지루한 반복 작업을 AI처럼 처리해줘요. 처음 플로우만 세팅해두면 이후에는 진짜 손 안 대고 자동으로 작업할 수 있어서, 특히 페이지 수정 작업할 때 체감이 큽니다.

주요 특징:

  • 반복 작업 완전 자동화
  • 쉬운 플로우 설정
  • 대규모 수정/업데이트에 최적

링크: Automator 다운로드

최종 추천 정리

빠르게 한눈에 정리하면 이래요.

  • 아이디어 초안 ➡ Magician
  • 와이어프레임 뚝딱 ➡ Galileo AI
  • 디자인 시스템 구축 ➡ Ando
  • 영감이 필요할 때 ➡ Genius
  • 지루한 반복작업 끝내기 ➡ Automator

결론은, AI가 디자인을 “완성”해주는 건 아니고, 시간을 줄여주고 방향을 잡아주는 데 정말 강력하다는 겁니다. 저도 초반엔 “AI가 다 해주겠지?” 싶었지만, 결국은 사람 손이 들어가야 퀄리티가 올라가더라고요. 대신 AI 덕분에 더 빠르게 시작하고, 더 창의적인 작업에 에너지를 쏟을 수 있어요.

요즘 제 세팅은 보통 Magician으로 키워드 정리, Galileo로 기본 골격 뽑고, Ando로 컴포넌트 세팅하고, Automator로 반복 작업 정리하는 방식이에요. 이 루틴만 제대로 잡아도 체력 세이브 확실합니다.

앞으로 피그마랑 AI는 더 가까워질 거고, 이 흐름을 타는 게 진짜 중요한 것 같아요. 무조건 직접 써보고 자기 스타일에 맞게 다듬어보세요.