안녕하세요!
요즘 IT 실무자들 사이에서 너무나도 핫한 프로그램
F i g m a !!
저도 너무 애정하는 프로그램인데요 !!
피그마를 사용하다보면 일러스트 파일이나 벡터기반 파일을 불러와야 될 경우가 아주 빈번하게 발생합니다!!
바로 이럴때 퀵하게 피그마로 파일을 가지고 올 수 있는 방법을 알려드릴테니
모두 어텐션 해주시고
( 현직 실무 디자이너인 지극히 제 개인적인 방법입니다. 도움이 되셨으면 좋겠어요 ! )
그럼 시작합니다!
준비물
1. Figma
2. Adobe XD or Illustrator
3. 올바르게 따라할 수 있는 자세
1. eps 파일 위치 확인
불러오려고 하는 eps파일이 있는 폴더를 열어줍니다.
2. eps 파일 확장자 바꾸기
eps파일을 확인한 뒤, f2 또는 마우스 우클릭 한 뒤 이름 바꾸기를 해줍니다.
확장자를 eps > ai로 변경해주세요.
3. 벡터 기반 프로그램 열기
XD 또는 일러스트레이터 프로그램을 열어주세요.
저는 XD로 진행해볼게요.
XD는 기본적으로 무료이기 때문에 Adobe 공식홈에서 쉽게 다운받을 수 있습니다.
이렇게 XD를 연 뒤, 왼쪽 상단 New File을 클릭합니다.
New File을 클릭하면 이렇게 새로운 도큐멘트가 형성이 되는데 이 곳에 아까 변환한 ai파일을 불러올거에요.
File > Import 또는 단축키 Shift+Ctrl+I 를 누르게되면 파일을 불러오는 창이 열립니다.
그럼 이렇게 아까 확장자를 변경한 ai파일이 나오는것을 볼 수 있는데!
이해를 돕기 위해 eps파일일때의 창을 보여드리면..?
이렇게 실제론 eps파일이 존재하지만 XD는 EPS를 인식하지 못하여 불러오지 못하게 되는것이죠 !
( 파일 확장자를 변경할 때 경고창이 나오지만 가볍게 무시해주고 ai로 변경해주시면 됩니다! )
그렇게 ai파일을 선택한 뒤 Import를 누르면
짜잔!! 이렇게 파일이 불러와집니다!! (네 맞아요 제 블로그 로고에 사용된 이미지 입니다 하하)
그럼 이제 이 파일을 피그마로 옮겨야겠죠 ?
필요한 영역만 남기고 나머지는 지워줍니다.
다 필요하면 전체를 선택하면 돼요.
저는 여기서 돋보기를 든 여자만 옮겨볼께요.
자 이렇게 필요한 부분만 남긴 후
ctrl + e 를 눌러줍니다.
그 다음 Format에서 PNG > SVG로 변경해주면
이렇게 옵션변경창이 나오는데 다른거 건드릴 필요없이 Export to: 에 저장할 경로만 지정해준 뒤,
Export 버튼을 눌러줍니다.
자 이제 거의다 됬어요.
지금까지 한 작업은 eps > ai > svg로 변환하는 작업을 한겁니다.
확장자를 eps > svg로 바꾸면 되는거 아니냐 할 수 있는데
네 안돼요. ^^ 세상 쉽게 살려고 하시ㄴ 조금 번거롭더라도 이 과정을 거치셔야합니다.
4. 피그마 프로그램 열기
피그마 프로그램을 실행하고 저장된 폴더에서 아까 만든 svg파일을 선택한 뒤 피그마 도큐멘트에 드래그해주세요.
짜잔! (👏👏👏👏)
그럼 이렇게 벡터파일이 불러와지는 것을 확인할 수 있습니다!
이해를 돕기 위해 불러온 파일을 줄여봤어요.
이렇게 줄여도 저렇게 늘려도 깨지지 않는걸 보실 수 있습니다.
자 그럼 여기까지 eps,ai파일을 피그마로 불러오는 방법에 대해서 알려드려봤습니다.도움이 되셨다면 저는 오늘도 기부니가 좋아요 !
