XLSX 또는 CSV 파일에서 텍스트 편집
내보낸 .xlsx 또는 .csv 파일은 Apple Numbers, Microsoft Excel, Google Sheets 같은 스프레드시트 앱이나 Visual Studio Code, Sublime Text 같은 텍스트/코드 편집기로 열어 편집할 수 있어요.
Microsoft Excel에서 유니코드 문자가 들어간 CSV 파일 열기. 텍스트에 유니코드 문자가 들어 있다면(예: 콘텐츠가 폴란드어나 러시아어인 경우) Microsoft Excel에서는 기본 제공 가져오기 마법사로 CSV를 가져와야 해요. Apple Keynote나 Google Sheets 같은 다른 스프레드시트 소프트웨어에서는 이 과정이 필요 없고, CSV 파일을 평소처럼 열면 돼요.
Google Sheets에서 CSV 파일 열기. CSV 파일을 Google Sheets로 가져올 때는 Convert text to numbers, dates and formulas 체크박스를 반드시 선택 해제하세요. 그렇지 않으면 Figma ID가 바뀌고 망가져서 Figma로 제대로 다시 가져올 수 없어요.
.csv 파일의 각 행은 Figma 파일의 텍스트 문자열 하나를 나타내요. “frame” 열 값을 보면 각 텍스트 레이어의 상위 프레임을 쉽게 확인할 수 있고, “figma_text” 열 값을 수정해 각 행의 콘텐츠를 편집할 수 있어요.
XLSX 또는 CSV 파일에 포함된 열 이해하기
id
id 열에는 원본 Figma 파일의 텍스트 레이어를 가리키는 고유 참조가 들어 있어요. 이 값 덕분에 나중에 텍스트 변경 사항을 CopyDoc 플러그인으로 다시 가져올 수 있어요.
“id” 열은 수정하지 마세요. 텍스트 변경 사항을 Figma 파일로 다시 가져오려면 “id” 열의 내용을 수정하지 마세요. 그렇지 않으면 Figma 텍스트와 다시 연결할 수 없어요(또는 다른 레이어가 잘못 업데이트될 수도 있어요).
frame
frame 열에는 현재 행의 텍스트 레이어가 들어 있는 상위 프레임의 이름이 들어 있어요. 텍스트 레이어가 디자인의 어디에 있는지 참고할 때 유용해요.
layer_name
layer_name 열은 원본 Figma 파일의 텍스트 레이어 이름을 가리켜요. 대부분 텍스트 콘텐츠와 같지만, Figma 텍스트 레이어 이름을 직접 바꿨다면 달라요.
참고: layer_name을 편집하거나 업데이트하면 XLSX 또는 CSV 파일을 Figma로 다시 가져올 때 Figma 텍스트 레이어 이름이 자동으로 바뀌어요. 텍스트 레이어의 콘텐츠 자체에는 영향을 주지 않으니, 텍스트 콘텐츠는 figma_text 열이나 직접 추가한 사용자 지정 텍스트 버전 열에서 편집하세요.
figma_text
figma_text_ 열에는 원본 Figma 파일의 텍스트 레이어에 있는 텍스트 콘텐츠가 들어 있어요. 이 콘텐츠를 편집하면 업데이트된 콘텐츠를 Figma로 다시 가져올 수 있어요.
XLSX 또는 CSV의 사용자 지정 텍스트 버전
사용자 지정 열을 추가해 XLSX 또는 CSV 파일을 내보냈다면, 이 열은 내보낸 .xlsx 또는 .csv 파일에서 다른 기본 열 뒤에 자동으로 포함돼요. 비어 있는 이 열에 다른 버전이나 다른 언어를 채워 넣으면, CSV를 Figma로 다시 가져올 때 원하는 버전을 선택할 수 있어요.
XLSX/CSV 파일을 반드시 .xlsx/.csv로 다시 저장하세요. 스프레드시트 앱으로 .csv 파일을 편집했다면 편집 후 .csv로 다시 저장하세요. 이런 앱은 가끔 다른 형식으로 저장하려고 하는데, 그러면 CopyDoc 플러그인으로 파일을 다시 가져올 때 호환되지 않아요.
JSON 파일에서 텍스트 편집
내보낸 .json 파일은 Visual Studio Code나 Sublime Text 같은 텍스트/코드 편집기로 열어 편집할 수 있어요.
.json 파일 배열의 각 객체는 Figma 파일의 텍스트 문자열 하나를 나타내요. “frame” 속성 값을 보면 각 텍스트 레이어의 상위 프레임을 쉽게 확인할 수 있고, “figma_text” 속성 값을 수정해 각 객체의 콘텐츠를 편집할 수 있어요.
JSON 파일에 포함된 열 이해하기
id
id 속성에는 원본 Figma 파일의 텍스트 레이어를 가리키는 고유 참조가 들어 있어요. 이 값 덕분에 나중에 텍스트 변경 사항을 CopyDoc 플러그인으로 다시 가져올 수 있어요.
“id” 속성은 수정하지 마세요. 텍스트 변경 사항을 Figma 파일로 다시 가져오려면 “id” 속성의 내용을 수정하지 마세요. 그렇지 않으면 Figma 텍스트와 다시 연결할 수 없어요(또는 다른 레이어가 잘못 업데이트될 수도 있어요).
frame
frame 속성에는 현재 객체의 텍스트 레이어가 들어 있는 상위 프레임의 이름이 들어 있어요. 텍스트 레이어가 디자인의 어디에 있는지 참고할 때 유용해요.
layer_name
layer_name 속성은 원본 Figma 파일의 텍스트 레이어 이름을 가리켜요. 대부분 텍스트 콘텐츠와 같지만, Figma 텍스트 레이어 이름을 직접 바꿨다면 달라요.
참고: layer_name을 편집하거나 업데이트하면 JSON을 Figma로 다시 가져올 때 Figma 텍스트 레이어 이름이 자동으로 바뀌어요. 텍스트 레이어의 콘텐츠 자체에는 영향을 주지 않으니, 텍스트 콘텐츠는 figma_text 속성이나 직접 추가한 사용자 지정 텍스트 버전에서 편집하세요.
figma_text
figma_text_ 속성에는 원본 Figma 파일의 텍스트 레이어에 있는 텍스트 콘텐츠가 들어 있어요. 이 콘텐츠를 편집하면 업데이트된 콘텐츠를 Figma로 다시 가져올 수 있어요.
JSON의 사용자 지정 텍스트 버전
사용자 지정 속성을 추가해 JSON 파일을 내보냈다면, 이 속성은 내보낸 .json 파일에서 다른 기본 속성 뒤에 자동으로 포함돼요. 비어 있는 이 속성에 다른 버전이나 다른 언어를 채워 넣으면, JSON을 Figma로 다시 가져올 때 원하는 버전을 선택할 수 있어요.
JSON 사용은 개발자 동료나 팀에게 도움을 요청하세요. JSON 형식을 잘 모른다면 웹 개발을 아는 사람에게 물어보세요. 이 형식을 사용하면 데이터를 서드파티 API나 앱에 연동하거나, 직접 Node.js 스크립트를 작성해 텍스트 데이터를 다양한 방식으로 가공하는 등 멋진 일을 할 수 있어요.
Markdown 파일에서 텍스트 편집
내보낸 .md 파일은 Visual Studio Code 같은 텍스트/코드 편집기나 Markably 같은 Markdown 전용 편집기로 열어 편집할 수 있어요.
.md 파일의 각 텍스트 블록은 Figma 파일의 콘텐츠를 나타내요. 각 블록 앞에는 해당 figma_text_id가 들어 있는 줄이 있어요.
“figma_text_id” 속성 줄은 수정하거나 삭제하지 마세요. 텍스트 변경 사항을 Figma 파일로 다시 가져오려면 “figma_text_id” 줄의 내용을 수정하지 마세요. 그렇지 않으면 Figma 텍스트와 다시 연결할 수 없어요(또는 다른 레이어가 잘못 업데이트될 수도 있어요).
지원되는 Markdown 서식
Markdown 파일에서 Figma 콘텐츠를 업데이트할 수 있고, 기본 Markdown 서식(굵게, 기울임꼴)과 링크를 수정하거나 추가해 Figma 파일로 다시 가져올 수도 있어요.
- 텍스트를 별표 두 개로 감싸 굵은 텍스트를 지정할 수 있어요. 예:
**Text to bold** - 텍스트를 밑줄 하나로 감싸 기울임꼴 텍스트를 지정할 수 있어요. 예:
_Italic Text_ - 텍스트를 별표 두 개와 밑줄 하나로 감싸 굵은 기울임꼴 텍스트를 지정할 수 있어요. 예:
**_Italic Text_** This is [my link here](https://example.com) in a text paragraph같은 Markdown 문법으로 하이퍼링크를 지정할 수 있어요(링크의[]텍스트 영역 안에 굵게/기울임꼴 문법을 추가해 링크 텍스트에 서식을 적용할 수도 있어요).
DOCX 파일에서 텍스트 편집
내보낸 .docx 파일은 Microsoft Word나 Google Docs 같은 앱으로 열어 편집할 수 있어요.
.docx 파일의 각 텍스트 블록은 Figma 파일의 콘텐츠를 나타내요. 각 블록 앞에는 해당 figma_text_id가 들어 있는 줄이 있어요.
“figma_text_id” 속성 줄은 수정하거나 삭제하지 마세요. 텍스트 변경 사항을 Figma 파일로 다시 가져오려면 “figma_text_id” 줄의 내용을 수정하지 마세요. 그렇지 않으면 Figma 텍스트와 다시 연결할 수 없어요(또는 다른 레이어가 잘못 업데이트될 수도 있어요).
지원되는 DOCX 서식
DOCX 파일에서 Figma 콘텐츠를 업데이트할 수 있고, 기본 서식(굵게, 기울임꼴)과 링크를 수정하거나 추가해 Figma 파일로 다시 가져올 수도 있어요.
XLIFF 파일 편집
내보낸 .xliff 파일은 Visual Studio Code나 Sublime Text 같은 텍스트/코드 편집기로 열어 편집할 수 있어요.
.xliff 파일의 각 <unit>은 Figma 파일의 텍스트 문자열 하나를 나타내요. “frame” 속성 값을 보면 각 텍스트 레이어의 상위 프레임을 쉽게 확인할 수 있고, <target> 값을 수정해 각 <unit>의 대상 번역 로캘을 편집할 수 있어요.
XLIFF 편집 소프트웨어를 사용하면 더 쉬워요 일반 텍스트 편집기로 .xliff 파일을 수정하고 싶지 않다면, OSX용 Counterparts나 XLIFFTool, Windows용 Virtaal처럼 .xliff 파일 편집 전용 소프트웨어를 사용할 수 있어요.
“id” 속성은 수정하지 마세요. 텍스트 변경 사항을 Figma 파일로 다시 가져오려면 각 “id” 속성의 내용을 수정하지 마세요. 그렇지 않으면 Figma 텍스트와 다시 연결할 수 없어요(또는 다른 레이어가 잘못 업데이트될 수도 있어요).
디자인 참조 보기
내보낸 파일에서 텍스트를 편집할 때, 원본 Figma 디자인에서 텍스트가 어디에 표시되는지 눈으로 확인하고 싶을 수 있어요. Design References 옵션을 켰다면 내보낸 .zip 파일에 _frames 폴더가 포함되고, 내보내기로 선택한 각 프레임의 .png 이미지가 들어 있어요. 이 이미지를 내보낸 텍스트 파일과 함께 디자인 참조로 활용하세요.
내보낸 텍스트 레이어는 화면상 위치 순으로 정렬돼요. 내보낸 파일의 텍스트 레이어는 디자인에서의 시각적 위치(왼쪽 위에서 오른쪽 아래 순)에 따라 정렬돼요. 그래서 디자인 이미지를 훑어보며 텍스트가 쓰인 곳을 찾기가 더 쉬워요.
영상 튜토리얼
영상 튜토리얼: CSV 파일로 Figma 텍스트 레이어 가져오기/내보내기
이 영상에서는 CopyDoc 플러그인으로 CSV 파일을 사용해 Figma 텍스트 레이어를 가져오고 내보내는 방법을 보여 줘요.
영상 튜토리얼: Airtable 동기화로 Figma 텍스트 콘텐츠 내보내기 및 다시 가져오기
이 영상에서는 CopyDoc 플러그인으로 Airtable 동기화를 사용해 Figma 텍스트 콘텐츠를 내보내고 다시 가져오는 방법을 보여 줘요.
영상 튜토리얼: JSON 파일로 Figma 텍스트 레이어 가져오기/내보내기
이 영상에서는 CopyDoc 플러그인으로 JSON 파일을 사용해 Figma 텍스트 레이어를 가져오고 내보내는 방법을 보여 줘요.
영상 튜토리얼: Figma에서 선택한 텍스트 레이어 내보내기 및 다시 가져오기
이 영상에서는 CopyDoc 플러그인으로 Figma에서 선택한 텍스트 레이어를 내보내고 다시 가져오는 방법을 보여 줘요.
영상 튜토리얼: Markdown 파일로 Figma 텍스트 레이어 콘텐츠 업데이트
이 영상에서는 CopyDoc 플러그인으로 Markdown 파일을 사용해 Figma 텍스트 레이어 콘텐츠를 업데이트하는 방법을 보여 줘요.
영상 튜토리얼: DOCX 파일로 Microsoft Word에서 Figma 텍스트 업데이트
이 영상에서는 CopyDoc 플러그인으로 DOCX 파일을 사용해 Microsoft Word에서 Figma 텍스트를 업데이트하는 방법을 보여 줘요.
영상 튜토리얼: DOCX 파일로 Google Docs에서 Figma 텍스트 업데이트
이 영상에서는 CopyDoc 플러그인으로 DOCX 파일을 사용해 Google Docs에서 Figma 텍스트를 업데이트하는 방법을 보여 줘요.
영상 튜토리얼: DOCX 파일로 Office 365에서 Figma 텍스트 업데이트
이 영상에서는 CopyDoc 플러그인으로 DOCX 파일을 사용해 Office 365에서 Figma 텍스트를 업데이트하는 방법을 보여 줘요.