본문 바로가기

나 원래 디자이넌데/디자인 프로그램 튜토리얼

피그마에서 포토샵으로 옮기고 싶다고요? 이 방법이면 바로 됩니다!

반응형

요즘 디자인할 때 피그마만큼 편한 도구도 드물죠. 그런데 한 번쯤은 이런 생각 해보셨을 거예요.
"피그마에서 만든 요소, 포토샵으로도 쓰고 싶은데... 그냥 가져다 쓸 수는 없나?"
정답은 ‘있습니다!’ 피그마에서 포토샵으로 디자인 요소를 손쉽게 옮기는 방법, 지금 바로 알려드릴게요.

 

🖼️ 피그마 → 포토샵, 이렇게 하면 돼요!

1. PNG 내보내기 방식 (가장 간단!)

 

  1. 피그마에서 원하는 오브젝트 선택
  2. 우측 ‘Export’ 메뉴에서 형식은 PNG 선택
  3. 1x 해상도 이상으로 설정 → [Export PNG] 클릭
  4. 포토샵에서 열면 끝!

단점:

이미지로 열어진다는 단점이 있습니다.


 

    2. SVG로 내보내기 (벡터 그대로!)

  • 단순한 벡터 작업이라면 SVG가 더 좋아요
  • 포토샵에서 열면 레이어 유지된 채로 열리진 않지만, 크기 확대해도 깨지지 않아요

 

 


 

SVG로 저장 후 Ai 파일로 불러올 수 있고, Ai파일에서 내보내기 → PSD 저장도 가능해요.

 


 

3. PDF로 저장하기 (여러 개 한 번에)

  • 프레임 단위로 PDF 저장하면, 전체 화면 단위로 옮길 수 있어요
  • 포토샵에서도 PDF 불러오기가 가능합니다

 

 

단점 : 

Figma에서 File → Export → PDF를 하면,
보여지는 그대로의 디자인을 ‘이미지처럼’ PDF로 저장합니다.

  • 🔹 이건 인쇄용, 클라이언트 프리뷰용, 공유용으로 딱이에요.
  • 🔹 하지만 포토샵, 일러스트레이터, 인디자인 등에서 편집하려고 할 때는 최악이에요.
    왜냐면…

이 PDF는 벡터로 보일 수 있지만, Figma 내부 요소(레이어/텍스트/벡터 경로 등)가 전부 병합된 상태로 저장되기 때문입니다.

👉 그래서 어떤 현상이 생기냐면?

  • 포토샵이나 일러에서 열면 그냥 하나의 이미지 레이어처럼 뜸
  • 텍스트는 더 이상 편집 불가능
  • 벡터 도형도 경로 정보가 아님

 

💡 해결방법: 레이어 유지하면서 옮기고 싶다면?

Figma → Adobe 툴로 레이어 구조 그대로 옮기고 싶다면 아래 방법을 써보세요:

1. SVG로 내보내기 (추천!)

  • 각 컴포넌트나 프레임을 SVG로 Export
  • 일러스트레이터(AI)에서 열면 벡터/텍스트/레이어 그대로 살아 있어요
  • 단, 텍스트는 Convert to outlines 되어 있을 수 있으니 주의!

2. PDF 대신 SVG로 저장해서 포토샵에서 열기

  • 포토샵에서도 SVG 파일을 열 수 있는데, 레이어는 제한적으로 들어와요
  • 완벽한 편집은 어렵지만, 해상도 손실 없는 오브젝트로 유지 가능해요

3. 플러그인 사용

  • Convertify, Figma to Adobe XD, Figma to Sketch 등 변환을 돕는 플러그인 활용 가능
  • 단, 정교한 레이어 보존은 일부 한계가 있음

 

🧩 단축키 요약 인포카드

피그마에서 자주 쓰는 내보내기 단축키!

작업 단축키
PNG 내보내기 Shift + Command + E (Mac) / Shift + Ctrl + E (Win)
전체 선택 Command + A / Ctrl + A
레이어 그룹화 Command + G / Ctrl + G

 

 

 

#피그마팁 #피그마사용법#피그마pdf #피그마에서pdf로저장#피그마디자인팁 #UI디자인 #UX디자인#웹디자인팁#포토샵연동#일러스트레이터 #디자이너정보

반응형