Figma Site 출시! 웹사이트 제작의 게임 체인저 될까?

2025년 피그마 업데이트에서 가장 눈에 띄는 기능은 바로 Figma Site예요.
뚜둥~

기존엔 피그마가 UI/UX 디자인 툴이라는 이미지가 강했죠.
그런데 이제는 아예 웹사이트까지 만들 수 있도록 확장됐어요.
디자인만 하는 게 아니라, 실제 퍼블리싱까지 가능해진 거예요.


디자인만 하던 피그마, 이제는 사이트까지!

피그마로 만든 디자인을
그대로 웹사이트로 만들 수 있다는 건 꽤 큰 변화예요.

원래는 피그마에서 디자인하고,
개발자에게 넘겨서 코딩으로 구현했죠.

하지만 이제는 ‘Create Site’ 버튼 하나로
디자이너가 직접 웹사이트를 만들 수 있게 되었어요.

정말 간단해요.
섹션 단위로 구성된 페이지에
텍스트, 이미지, 버튼 같은 요소만 배치하면 되거든요.


오토 레이아웃도 그대로

Figma Site의 장점은
우리가 기존에 쓰던 기능이 그대로 적용된다는 점이에요.

오토 레이아웃, 변수 시스템, 컴포넌트 기능.
모두 그대로 활용할 수 있어요.

반응형 웹도 자연스럽게 만들어져요.
모바일용, 데스크탑용 따로 고민할 필요 없어요.
디자인만 신경 쓰면 돼요.


퍼블리싱도 한 방에

사이트를 만들었으면,
이제는 ‘퍼블리시’ 버튼만 누르면 끝!

site.figma.com/내사이트 형태로
바로 웹사이트가 열려요.

유료 플랜을 쓰면 커스텀 도메인도 연결할 수 있어요.
물론 아직 베타 단계라 약간의 제한은 있어요.


어디에 써볼까?

저는 우선
간단한 제품 소개 페이지를 만들어봤어요.

이벤트 소개, 포트폴리오, 제품 랜딩페이지처럼
짧고 핵심적인 정보만 담는 용도에 딱이에요.

피그마 안에서 디자인부터 웹사이트 배포까지,
진짜 하나로 다 해결되니까 너무 편했어요.


아쉬운 점도 있어요

SEO 설정은 아직 부족하고,
CMS나 블로그처럼 구조적인 콘텐츠는 힘들어요.

고급 기능은 추후 업데이트를 기다려야 할 것 같아요.
하지만 지금도 충분히 쓸 만해요.


저는 이렇게 쓰기로 했어요

앞으로 제안서나
간단한 이벤트 페이지는 피그마로 만들기로 했어요.

디자인 전달할 필요 없이,
링크 하나로 끝나는 거 너무 좋거든요.

고객도 바로 피드백을 줄 수 있어서
작업 속도도 빨라졌어요.


정리해볼게요

Figma Site는 아직 완벽하진 않지만,
디자이너가 직접 웹사이트를 만들 수 있다는 점에서
충분히 ‘게임 체인저’가 될 수 있는 기능이에요.

가볍게 시작해보세요.
저는 다음엔 포트폴리오 사이트도 만들어보려 해요.
사용할수록 더 많이 쓰고 싶어지는 기능이에요.

진짜 피그마가 점점 무서워지네요. 😎

피그마로 프로답게 일하는 방법도 있다구! (실제 나의 경험)

처음 피그마(Figma)를 접했을 때 솔직히 말해서 “이게 뭔데 다들 좋다고 하는 거지?” 싶었습니다.
웹 기반이라 속도도 느릴 것 같았고, 어도비 툴만 쓰던 제게는 뭔가 불편해 보였거든요. 하지만 회사에서 실무로 본격 쓰게 되면서 그 생각은 완전히 바뀌었습니다. 그리고 지금은 말할 수 있어요.

“피그마 없으면 진짜 불편하다”라고요. 😄

피그마, 처음엔 낯설었지만

사실 초반에는 모든 게 버벅거렸어요.
레이어 정리도 엉망이고, 컴포넌트 개념도 헷갈리고, 오토 레이아웃은 더더욱 어려웠죠.
게다가 실시간 협업이라니… 누가 내 작업을 건드릴까봐 괜히 불안했던 것도 사실이에요.

그런데 몇 번 프로젝트를 해보면서 점점 깨닫게 됐습니다.
“어? 이거 제대로 쓰면 진짜 효율 미쳤다.”

실무에서 느낀 피그마의 진짜 장점

  • 링크 하나로 공유 끝
    메일 첨부, 압축파일? 그런 거 이제 안 해도 돼요.
    링크만 보내면 상대방이 바로 열어볼 수 있고, 권한만 잘 설정하면 안전하게 관리할 수 있죠.

  • 실시간 코멘트로 피드백 속도 업
    예전처럼 수정 요청 오면 메일 보고 고치고… 이게 아니라 그냥 파일 안에서 코멘트 달고 끝.
    정말 빠르고 직관적입니다. 📌

  • 컴포넌트로 반복 작업 최소화
    처음엔 그냥 복붙했는데, 나중에 수정 지옥을 경험하고 나서 컴포넌트의 힘을 알게 됐죠.
    “아, 이걸 써야 나중에 안 고생하겠구나” 라고요.

  • 오토 레이아웃으로 깔끔하게 정리
    정렬할 때마다 일일이 수동으로 움직이던 시절은 이제 안녕입니다.
    오토 레이아웃으로 하면 버튼 사이 간격 맞추는 것도, 정렬도 깔끔하게 끝나요. 🙌

프로답게 쓰려면? 작은 습관이 답이다

피그마를 오래 쓰면서 느낀 건 결국 정리와 습관이 모든 걸 좌우한다는 거였습니다.
레이어 이름 잘 정리하기, 페이지 나누기, 불필요한 요소 지우기 같은 게 처음엔 귀찮아도 나중엔 엄청난 차이를 만듭니다.

또 하나, 팀원과 소통할 때 너무 자유롭게만 하면 나중에 헷갈릴 수 있어서 가이드라인도 필요했어요.
“이 페이지는 누구용”, “이 컴포넌트는 어디서 쓰는 것” 이런 걸 잘 정리해두면 누구나 파일을 열었을 때 바로 이해할 수 있습니다.

이제는 피그마 없이는 못 사는 사람 됨

지금은 그냥 디자인 작업뿐 아니라 클라이언트 미팅, 개발자와의 협업, 심지어 사내 자료 정리까지 피그마로 하고 있어요.
이젠 오히려 다른 툴로 하면 답답할 정도랄까요. 😅

처음엔 저도 어려웠고, 시행착오도 많았지만 결국 많이 써보고 부딪히면서 배운 게 가장 큰 공부였습니다.
지금 피그마를 막 시작한 분들도 너무 겁먹지 말고 이것저것 직접 해보세요.
조금만 익숙해지면, 아마 저처럼 “왜 이제야 알았지?” 하고 있을 겁니다. 😉

디자인하다 멘붕 올 뻔… 피그마 실무 사용 꿀팁 정리

아 정말 최근에 멘붕이 온 사건이 있었어요.

디자인을 하다 보면 늘 예기치 않은 순간들이 찾아옵니다. 그 중에서도 특히 피그마(Figma)를 처음 실무에서 사용할 때는 정말 멘붕이 올 뻔했던 적이 많았는데요…

아무리 쉽다고 해도 익숙하지 않은 인터페이스와 팀 프로젝트라는 특수한 상황이 만나면 당황할 수밖에 없었죠. 오늘은 제가 직접 겪은 시행착오를 바탕으로 피그마 실무 사용 팁을 준비 했어여.

처음엔 뭐가 뭔지 몰랐다

피그마를 쓰기 시작한 초기에는 익숙한 툴과는 너무 달라서 혼란스러웠습니다. 특히 레이어 정리, 컴포넌트 사용, 오토 레이아웃 같은 기능들은 초보자 입장에서 낯설기만 했어요.

그래서 저는 일부러 시간을 내서 기본 사용법부터 차근차근 다시 익혔습니다. 유튜브 튜토리얼이나 공식 가이드를 보면서 조금씩 감을 잡아갔습니다. 가장 중요한 건 기초를 확실히 하는 것이라는 걸 깨달았죠.

실무에서 정말 유용했던 것들에 대해서 순서대로 나열해볼게요

1. 컴포넌트 적극 활용하기

처음엔 그냥 복붙으로 디자인을 만들었는데, 나중에 수정할 때 정말 후회했습니다. 컴포넌트로 관리하면 나중에 수정 사항이 생겼을 때 한 번에 전부 반영되니 작업 효율이 엄청나게 올라갑니다.

2. 오토 레이아웃으로 정리정돈

디자인이 복잡해질수록 오토 레이아웃 기능이 빛을 발합니다. 버튼 사이 간격이나 정렬을 수동으로 하지 않고, 오토 레이아웃으로 깔끔하게 설정하면 작업이 훨씬 빨라집니다.

3. 페이지와 레이어 정리 습관

실무에서는 내가 아닌 다른 팀원이 파일을 볼 일도 많습니다. 그래서 페이지를 잘 나누고 레이어 이름을 정리하는 건 필수입니다. 이것만 잘해도 “정말 일 잘한다”는 말을 들을 수 있어요.

4. 커멘트 기능으로 소통하기

회의나 메신저 대신 피그마 내 커멘트로 바로 피드백을 주고받는 게 정말 편했습니다. 파일 안에서 바로 논의가 가능하니 피드백이 누락될 일이 거의 없습니다.

멘붕을 극복한 후, 피그마는 필수가 됐다

처음에는 당황스러웠던 피그마. 하지만 위에 말한 팁들을 적용하면서 점점 익숙해졌고,

지금은 없으면 불편할 정도로 자주 사용하고 있습니다. 디자인만 하는 도구가 아니라, 팀과 함께 작업을 만들어가는 플랫폼이라는 생각이 더 맞는 것 같습니다.

특히 원격 근무나 외부 클라이언트와 협업할 때는 피그마만큼 편한 툴이 없습니다.

링크 하나만 공유하면 상대방도 바로 확인하고 코멘트를 달 수 있으니까요. 지금 돌이켜보면, 실무에서 겪은 멘붕 덕분에 더 똑똑하게 피그마를 사용할 수 있게 된 것 같습니다.

앞으로 피그마를 시작하는 분들에게 제가 드리고 싶은 말은 딱 하나입니다.

조금 어렵더라도 천천히 익혀보세요. 분명히 실무에서 강력한 무기가 되어줄 겁니다.

처음엔 막막했지만… 피그마로 팀 협업하며 깨달은 것들

디자인 툴은 늘 새로운 걸 배우는 과정이 쉽지 않습니다. 특히 저는 피그마(Figma)를 처음 사용할 때 그랬습니다. 이미 익숙한 툴들이 있었고, 굳이 브라우저 기반의 디자인 툴로 넘어가야 하나 싶었던 게 사실이었습니다. 하지만 팀 프로젝트가 늘어나면서 선택이 아니라 필수가 되었죠. 그렇게 어쩔 수 없이 시작한 피그마는 예상보다 더 많은 걸 깨닫게 해준 도구가 되었습니다. 지금은 오히려 “왜 진작 안 썼을까?” 싶을 정도입니다.

피그마를 처음 접했을 때 들었던 생각들

초반엔 많이 막막했습니다. 설치형 프로그램에 익숙했던 저는 브라우저에서 디자인을 한다는 게 낯설었습니다. 특히 단축키나 인터페이스가 다르다 보니 적응하는 데 시간이 걸렸죠. 하지만 조금씩 사용하면서 바로 느낀 건 피그마는 협업에 최적화된 툴이라는 점이었습니다.

혼자가 아니라 함께 하는 디자인

회사에서는 디자이너뿐 아니라 기획자, 개발자, 심지어 마케팅 팀까지 디자인 결과물에 관여하곤 하잖아요.

이전에는 파일을 따로 보내주고 피드백을 받아 수정하는 번거로운 과정을 거쳐야 했습니다. 하지만 피그마를 쓰면서 모든 과정이 바뀌었습니다. 실시간으로 작업 중인 화면을 보여주고, 그 위에 코멘트를 남기며 바로 수정할 수 있었습니다.

특히 마음에 들었던 건 링크 하나로 누구나 파일에 접근 가능하다는 점이었습니다.

복잡한 전달 과정 없이 클라이언트에게도 바로 보여주고 피드백을 받을 수 있었습니다. 이건 정말 시간을 크게 절약해주는 부분이었어요.

팀원들과 더 가까워진 느낌

협업 도구가 좋아지면 자연스럽게 팀워크도 좋아집니다. 피그마 안에서 커서가 움직이며 서로 작업하는 모습을 보거나,

코멘트로 의견을 주고받는 과정 자체가 하나의 소통이 됩니다.

저는 이전보다 훨씬 더 가볍게 의견을 공유하고 피드백을 주고받을 수 있었어요.

예전 같으면 따로 메일이나 메신저로 물어봐야 했던 것들이 피그마 안에서 거의 다 해결됐습니다.

물론 완벽하진 않습니다

모든 툴이 그렇듯 피그마도 단점은 있습니다. 브라우저 기반이다 보니 인터넷 연결이 불안정할 때 작업이 끊기거나 저장이 안 될까 걱정되는 경우가 있었어요.

또, 팀원이 많아질수록 파일 관리가 복잡해지는 문제도 있었습니다. 그래서 파일을 작업 주제별로 깔끔하게 정리하고, 팀원별 권한 설정을 활용해 필요 이상으로 혼란스러워지지 않도록 관리하는 방법을 배웠습니다.

지금은 필수가 된 피그마

돌이켜보면, 처음엔 단순히 회사에서 쓰라고 해서 억지로 시작했지만, 지금은 제가 가장 많이 열어두는 프로그램 중 하나가 되었습니다. 특히 협업이라는 측면에서 피그마는 정말 강력합니다. 디자인은 더 이상 혼자 하는 작업이 아니기 때문에, 이런 협업 툴은 앞으로도 더 중요해질 거라고 생각합니다.

피그마 덕분에 저는 작업 속도가 빨라졌고, 팀원들과의 커뮤니케이션도 훨씬 부드러워졌습니다. 만약 아직 피그마를 망설이고 있다면, 저처럼 일단 시작해보세요. 쓰다 보면 어느새 가장 친숙한 툴이 되어 있을 겁니다.

피그마로 실무에서 겪은 진짜 이야기: 협업부터 오류까지 솔직 후기

디자인을 오래 해오면서 여러 툴을 써봤습니다. 처음 피그마(Figma)를 접했을 땐 솔직히 조금 낯설었습니다. 어도비 같은 툴에 익숙했던 터라 “브라우저에서 디자인을 한다고?” 라는 생각부터 들었죠. 그래도 회사에서 팀 프로젝트가 늘어나면서 자연스럽게 피그마를 써야 하는 상황이 오게 됐습니다. 처음엔 단순히 디자인만 하면 될 줄 알았는데, 막상 실무에 들어가니 생각보다 훨씬 많은 걸 배우게 됐습니다.

실무에서 피그마, 이렇게 썼습니다

프로젝트 초반, 가장 큰 장점은 동시에 여러 사람이 작업할 수 있다는 점이었어요. 예전엔 파일을 돌려가며 수정하고, “최신 버전이 뭐야?” 같은 질문이 끊이지 않았습니다. 하지만 피그마는 다릅니다. 디자이너, 기획자, 개발자까지 모두가 하나의 파일에 접속해서 실시간으로 피드백을 주고받을 수 있었습니다. 그 덕에 커뮤니케이션 속도가 눈에 띄게 빨라졌어요. 특히 개발자에게 디자인 스펙을 넘겨줄 때 정말 편했습니다. “Inspect” 기능을 통해 코드 값, 사이즈, 색상 등을 바로 확인할 수 있었거든요.

그런데 문제도 없진 않았어요

물론 좋은 점만 있는 건 아니었습니다. 가장 흔한 문제는 브라우저 렉과 오류였습니다. 파일 용량이 커지면 로딩이 느려지고, 가끔 튕기는 일도 생겼죠. 특히 이미지나 컴포넌트를 많이 사용한 페이지에서 이런 현상이 두드러졌습니다. 그래서 작업을 나눠서 관리하거나 불필요한 이미지 용량을 줄이는 방법으로 해결하려 했습니다. 또 하나는 버전 관리였습니다. 실시간으로 모두가 작업하다 보니, 잘못하면 누군가의 작업이 덮어씌워질 위험도 있었습니다. 이를 방지하려고 버전 히스토리(Version History) 기능을 자주 사용하며 작은 변경도 기록해두는 습관이 필요했죠.

결국, 실무에서는 이게 정답이더라

피그마는 잘만 쓰면 정말 강력한 도구입니다. 특히 원격 근무나 외부 클라이언트와 협업할 때 그 진가를 발휘합니다. 저도 지금은 피그마 없이는 일하기 힘들 정도로 익숙해졌습니다. 다만, 몇 가지 팁은 꼭 알려드리고 싶어요.

  • 프로젝트별로 파일을 분리해서 관리하세요: 용량 문제를 막을 수 있습니다.
  • 컴포넌트와 스타일을 적극 활용하세요: 반복 작업 시간을 크게 줄여줍니다.
  • 버전 히스토리를 자주 저장하세요: 실수로 인한 데이터 유실을 막을 수 있습니다.
  • 협업할 때는 커멘트(Comment) 기능을 적극 활용하세요: 따로 메신저를 사용하지 않아도 피드백을 남기기 좋습니다.

정리하며

처음엔 낯설었던 피그마. 하지만 지금은 제 디자인 작업의 중심이 되었습니다. 단순히 디자인만 하는 툴이 아니라, 기획자, 개발자와 함께 아이디어를 시각화하고 바로 피드백하며 결과물로 연결하는 브릿지 역할을 하고 있습니다. 실무에서는 이런 유연함이 정말 큰 경쟁력입니다. 물론 여전히 가끔 오류나 불편함이 있지만, 충분히 감수할 만큼의 장점을 갖고 있죠.

처음 피그마를 써보려는 분들이라면 저처럼 시행착오를 겪을 수 있습니다. 하지만 금방 적응하게 될 거예요. 저도 그렇게 피그마와 친해졌으니까요.

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

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

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

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

예전에는 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 조합을 적극 추천한다.

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