일러스트레이터 데이터 파일을 adobe XD로 HTML 만들기, (판넬을 포트폴리오 웹사이트로) illustrator to adobe XD WEB Export

James Design School

일러스트레이터로 이미 확보된 판넬, 브로셔, 카탈로그 등의 데이터를 웹사이트로 만드는 과정에서 figma 등의 프로토타입 툴로 넘기면 일러스트레이터와 호환성 문제가 발생했는데 XD가 adobe 계열이라 그런가 호환성이 매우 좋은 편이라는 걸 이번에 알게 되어 공유 합니다.
블럭글씨, 그룹, 기타 등이 살아서 잘 넘어갑니다.

1. 일러스트레이터 ai 파일을 xd에서 바로 임포트 할 경우
a. ai데이터를 바로 받아 올 수 있는데 폰트 이름에서 문제가 될 경우 폰트 이름만 다시 찾아주던가 하면 정리 됩니다 (xd 영문 국문 버전 똑같은 문제 발생)
b. 쉐잎의 라운드 코너 등이 안넘어 간다거나 하면 익스펜드 등으로 해결 합니다
c. 아트보드 이름대로 xd에서 아트보드가 자동 생성 됩니다

2. svg로 xd에서 임포트 할 경우
a. 중앙, 우측정렬 지원 안하고 그룹으로 만들어져 나가기 때문에 좌측정렬로 쓴 후 xd에서 중앙, 우측정렬 해주면 처리 됩니다
b. 폰트 이름 문제 해결 됨

3. 일러스트레이터에서 단순복사 후 XD에서 붙여 넣을 때
ai 2020과 같은 낮은 버전에서는 그대로 잘 넘어가지만 최신버전의 ai에서는 이상한 방식으로 넘어가기 때문에 그룹해제를 해줘야 하는데 불편합니다
이 부분은 찾으려고 노력 했으나 아직 못찾았습니다

넷리파이 사용방법은 전 영상을 참조 하시고,

이번에 알게 되었는데 프로그램마다 폰트 이름을 처리하는 방식이 다르다는 점을 알았습니다, 폰트 이름이 있고 그 속에 postScriptName이라는게 있고 또 기타 여러가지가 포함되어 있는데 일러스트레이터는 폰트이름으로 처리하고 xd는 포스트스크립트 이름으로 처리하고 뭐 그런다네요.

포트폴리오 사이트로 취업 잘 하시고,

--------------------------------------------------------------------------------

When converting existing panel, brochure, and catalog data created in Illustrator into a website, we previously experienced continuous compatibility issues when transferring the files to prototype tools such as Figma. However, I recently discovered that Adobe XD, being part of the same Adobe ecosystem, has very good compatibility with Illustrator, so I’m sharing this information.

Block text, groups, and other elements are transferred well and remain intact.

1. When importing AI data directly into XD

a. AI files can be imported directly. If there is an issue with font names, you just need to locate or reorganize the font names again.
b. If certain shape properties, such as rounded corners, do not transfer correctly, they can be resolved by using Expand or similar adjustments.

2. When importing SVG files into XD

a. Center and right alignment are not supported, and the content is exported as groups. Therefore, it is better to use left alignment in Illustrator and then apply center or right alignment again in XD.

3. When copying from Illustrator and pasting directly into XD

In older versions such as Illustrator 2020, the content transfers correctly as-is. However, in newer versions of Illustrator, it is transferred in a strange way, so you need to ungroup it after pasting, which is inconvenient. I tried to find a solution to this issue but haven’t been able to yet.

Another thing I learned this time is that different programs handle font names differently. A font has a general font name, a PostScript Name, and several other identifiers. It seems that Illustrator processes fonts using the font name, while XD processes them using the PostScript name, or something along those lines.