본문으로 건너뛰기

6. Figma 디자인 가져오기

Figma & Figma Plugin 다운로드 및 설치 (Figma Download & Install)​

1. Figma 다운로드​

Figma 디자인에서 텍스트 스타일이나 화면을 가져오려면, 먼저 Figma 앱(또는 웹 버전)이 필요합니다.

  • Figma 공식 다운로드 페이지: https://www.figma.com/downloads/
  • 지원 환경: Windows / macOS 데스크톱 앱, 또는 웹 브라우저(Chrome 등)에서 바로 사용 가능

2. 설치 방법​

  1. 위 다운로드 링크에서 사용 중인 운영체제에 맞는 설치 파일을 받습니다.
  2. 다운로드한 설치 파일을 실행하고, 안내에 따라 설치를 완료합니다.
  3. 설치가 끝나면 Figma를 실행하고, 계정으로 로그인합니다. (계정이 없다면 먼저 회원가입이 필요합니다.)
팁

이미 Figma가 설치되어 있다면 이 단계는 건너뛰고 바로 아래 3번(플러그인 설치)부터 진행하세요.

3. Figma to LucyStudio 플러그인 설치​

루시스튜디오로 텍스트 스타일을 가져오려면, Figma에서 텍스트 스타일을 JSON 형식으로 내보내주는 플러그인이 필요합니다.

  1. 위 링크에서 플러그인을 다운로드합니다.
  2. Figma 하단 메뉴 바에서 Action 버튼을 클릭합니다.
  3. Plugins and widgets를 선택합니다.
  4. Figma to Lucy Studio를 검색합니다.
  5. Figma to Lucy Studio를 선택하고 Run을 클릭합니다.

Figma Action 바에서 플러그인 실행

Figma 에서 화면 가져오기​

Figma에서 디자인한 화면을 프레임 단위로 통째로 가져와 루시스튜디오의 새 페이지로 만들 수 있습니다.

STEP 1. Figma에서 화면 복사하기​

  1. "Figma to Lucy Studio" 플러그인을 실행합니다.

    플러그인 실행

  2. 플러그인 창이 떠 있다면, 가져올 화면(프레임)을 클릭해서 선택한 후, [</> Copy Code]를 클릭해, 선택한 화면을 JSON 형식으로 복사합니다.

    Copy Code 버튼

STEP 2. Figma에서 복사한 화면 붙여 넣기​

  1. Lucy Studio에서 새 페이지를 엽니다(또는 새로 만듭니다).

  2. 캔버스를 클릭한 뒤 붙여넣기(Paste, macOS: Cmd+V / Windows: Ctrl+V)를 하면, 앞서 복사해둔 화면이 그대로 위젯으로 추가됩니다.

    캔버스에 붙여넣기

STEP 3. 가져온 뒤 확인할 것들​

색상(Color)

가져온 화면에 사용된 색상은 프로젝트에 등록된 컬러 테마와 자동으로 연결됩니다.

경고

단, 해당 색상이 프로젝트 컬러 테마에 미리 등록되어 있어야만 자동으로 연결됩니다. 아직 등록되지 않은 색상은 고정된 색상 값으로만 채워지고 테마에는 연결되지 않으니, 화면을 가져오기 전에 컬러 테마를 먼저 가져와두는 것을 권장합니다.

텍스트 스타일(Text Style)

텍스트 스타일은 화면 가져오기에 포함되지 않습니다. Text Style 편집기의 [Import Figma Text Styles] 기능으로 별도로 가져와야 적용됩니다.

레이아웃(Layout)

Figma의 Auto Layout 방향(가로/세로)에 따라 Row/Column으로 변환되고, 자동 줄바꿈(Wrap)이 켜져 있으면 Wrap으로 변환됩니다. 프레임 안에 절대 위치(Ignore Auto Layout)로 배치된 요소가 있으면, 나머지 요소는 원래의 Row/Column 흐름을 그대로 유지한 채 절대 위치 요소만 그 위에 따로 겹쳐지는 방식으로 배치됩니다. 가져온 뒤 원본과 여백·정렬이 다르게 보이는 부분이 있다면 레이아웃 속성을 다시 확인해서 맞춰주세요.

정보

여러 겹으로 감싸인 투명한 배경/그룹 프레임은 가져오는 과정에서 자동으로 정리되기 때문에, Figma의 레이어 구조와 Lucy Studio에서 만들어진 위젯 트리 구조가 완전히 같지 않을 수 있습니다.

문제 해결​

  • 붙여넣기 후 아무 반응이 없다면 → Figma에서 형식에 맞게 복사한 값인지 확인한 뒤 STEP 1부터 다시 시도해주세요.
  • 가져온 화면의 여백·정렬이 원본과 다르다면 → Auto Layout/절대 위치 설정을 다시 확인해주세요.
  • 색상이 고정값으로 들어왔다면 → 컬러 테마에 해당 색상이 먼저 등록되어 있는지 확인해주세요.