Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술
Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술
디자이너가 공들여 만든 버튼, 입력창, 아이콘들… 기획서에 넣고 싶은데 방법을 몰라서 사각형부터 그리고 계셨나요?
그 사각형, 마음은 따뜻하지만 결과물은 “임시” 티가 납니다. 😇
Figma의 에셋(Assets) 기능을 쓰면 클릭 몇 번으로 실제 서비스와 동일한 컴포넌트를 기획서에 배치할 수 있어요. 복잡한 매뉴얼 대신, 이 글 순서대로만 따라오면 됩니다.
1) 에셋(Assets) 패널 위치 확인하기
왼쪽 사이드바에는 보통 Layers와 Assets 탭이 있습니다.
- Layers(레이어): 지금 페이지에 있는 요소 목록(현재 캔버스의 “재료 목록”).
- Assets(에셋): 디자이너가 만들어 둔 컴포넌트(부품) 목록(우리에게 필요한 “정품 부품 창고”).
빠른 이동 단축키
- Assets 열기: Windows Alt + 2 / Mac Option(⌥) + 2
- Layers 열기: Windows Ctrl + 1 / Mac Option(⌥) + 1
포인트: “기획서는 Layers가 아니라 Assets에서 ‘부품을 꺼내 쓰는’ 문서”라고 생각하면 손이 빨라집니다.
2) 원하는 컴포넌트 광속으로 찾는 법
에셋 패널에 컴포넌트가 많아질수록, 스크롤은 체력 테스트가 됩니다. 아래 2가지만 기억하세요.
2-1. 검색창(돋보기)로 바로 찾기
에셋 패널 상단 검색창에 키워드를 입력합니다.
- 예: Button, Input, Icon, Search, Toast
- 팀이 한글로 네이밍했다면: 버튼, 입력, 아이콘도 함께 시도
2-2. 라이브러리 필터(필요한 것만 켜기)
에셋은 “파일 안 컴포넌트”뿐 아니라, “팀/조직 라이브러리”도 섞여 보일 수 있어요.
- 필요한 라이브러리만 선택해서 에셋 목록을 정리합니다.
- 찾는 라이브러리가 없다면, 라이브러리 관리 화면에서 파일에 추가가 필요할 수 있습니다.
팁: 컴포넌트 이름이 UI/Button/Primary처럼 슬래시로 계층화돼 있으면, 관련 컴포넌트끼리 묶여 탐색이 훨씬 쉬워집니다.
3) 기획서로 에셋 가져오기 (드래그 앤 드롭)
방법은 단순합니다. “찾고, 끌고, 놓기.” 여기서 끝입니다.
- Assets 목록에서 원하는 컴포넌트를 찾습니다.
- 컴포넌트를 클릭한 채 캔버스로 드래그합니다.
- 원하는 위치에 놓으면 배치 완료입니다.
이때 캔버스에 놓인 것은 원본이 아니라 인스턴스(복사본)입니다. 즉, “정품 부품을 가져다 쓰되 원본 창고는 건드리지 않는” 구조예요.
4) 초보 기획자가 자주 하는 ‘실수’ 방지 가이드
에셋을 잘 쓰는 기획자는 “예쁜 기획서”가 아니라 “깨지지 않는 기획서”를 만듭니다. 아래 3가지만 지키면 됩니다.
4-1. 원본(Main) 수정은 ‘합의 후’
컴포넌트에는 메인 컴포넌트(Main component)와 인스턴스(Instance)가 있습니다.
- 메인: 디자인 시스템의 기준(여기 바꾸면 전파됨)
- 인스턴스: 기획서/화면에 배치해 쓰는 복사본(기획자는 보통 이것만 쓰면 됨)
기획 단계에서 “원본 구조를 바꿔야 한다”는 생각이 들면, 그건 기획 문제가 아니라 디자인 시스템 의사결정일 확률이 높습니다. 댓글로 제안하고 합의해서 움직이는 편이 안전합니다.
4-2. 텍스트는 바꾸되, 형태는 함부로 휘지 않기
- 버튼 라벨 변경: 버튼을 더블 클릭해서 텍스트 레이어만 수정
- 색/모서리/패딩을 억지로 바꾸기 시작하면: “디자인 시스템”이 아니라 “즉석요리”가 됩니다
4-3. 에셋 탭 이동 단축키로 시간 벌기
- Assets: Windows Alt + 2 / Mac Option + 2
- Layers: Windows Ctrl + 1 / Mac Option + 1
이 단축키는 체감상 “마우스 이동 거리”를 확 줄여줘서, 기획서 작성 속도가 빨라집니다.
5) 아이콘/버튼 교체하기: 스왑(Instance Swap) 요령
이미 배치한 컴포넌트를 다른 종류로 바꾸고 싶을 때, 지우고 다시 놓기만 하면 손이 바쁩니다. 아래 2가지 방법이 실전에서 많이 씁니다.
5-1. 오른쪽 패널의 Instance 메뉴로 교체
- 교체할 인스턴스를 선택합니다.
- 오른쪽 사이드바에서 컴포넌트 이름(Instance)을 클릭해 메뉴를 엽니다.
- 검색하거나(이름으로), 라이브러리를 바꿔가며 원하는 컴포넌트로 교체합니다.
5-2. Alt/Option 누른 채로 드래그해서 “교체 드롭”
Assets에서 다른 컴포넌트를 끌어오면서, 아래 키를 함께 누르면 기존 인스턴스를 교체할 수 있습니다.
- 일반 교체: Mac Option(⌥) / Windows Alt
- 중첩(컴포넌트 안의 컴포넌트) 교체: Mac Option + Command / Windows Alt + Control
주의: 키를 먼저 풀면 교체가 아니라 “추가 배치”가 될 수 있어요. 놓고 나서 키를 푸는 순서가 안전합니다.
작은 꿀팁: 교체 시 텍스트 오버라이드는 유지되는 편이지만, 구조가 달라지면 유지가 제한될 수 있어요. 텍스트 레이어 이름이 일관되게 관리돼 있으면 훨씬 안정적입니다.
6) 기획 퀄리티 2배 올리는 에셋 활용 꿀팁
6-1. “어떤 컴포넌트를 썼는지”를 기획서에 남기기
기획서 안에 버튼을 배치했다면, 바로 아래 한 줄만 추가해도 협업 비용이 줄어듭니다.
- 예: 사용 컴포넌트: UI/Button/Primary
- 예: 상태: Default / Disabled / Loading
6-2. 상태(State)는 텍스트로 확정하고, 시각은 에셋으로 보여주기
기획자는 “규칙”을 쓰고, 에셋은 “증거”를 보여줍니다.
- 규칙: “로그인 중에는 버튼 Loading, 클릭 불가”
- 증거: Loading 버튼 컴포넌트를 배치
6-3. View 권한이어도 에셋은 ‘사용’ 가능한 경우가 많다
편집 권한이 없어도 라이브러리 컴포넌트를 사용하는 흐름은 가능할 수 있습니다. 다만 “어디까지 가능한지”는 파일 권한 정책에 따라 달라질 수 있으니, 막히면 라이브러리 연결 여부부터 확인하는 게 빠릅니다.
7) 마지막 체크리스트
- Assets 탭에서 필요한 라이브러리가 켜져 있는가?
- 컴포넌트는 검색으로 찾고, 드래그 앤 드롭으로 배치했는가?
- 인스턴스에서 텍스트만 수정했는가(형태 강제 변경은 최소화)?
- 교체는 Instance 메뉴 또는 Alt/Option 드래그로 처리했는가?
- 기획서에 “사용 컴포넌트명/상태”가 기록돼 있는가?
결론
Figma 에셋 활용은 기획서의 전문성을 보여주는 지름길입니다.
직접 그린 사각형은 “의도”만 전달하지만, 에셋 컴포넌트는 “의도 + 구현 기준”까지 같이 전달합니다. 그 결과, 디자이너와 개발자의 질문이 줄고, 여러분의 기획은 더 빨리 확정됩니다.
오늘부터는 버튼을 그리지 말고, 가져다 쓰세요. 손은 덜 바쁘고, 문서는 더 똑똑해집니다. 🧠
FAQ
QAssets 탭이 안 보이는데요?
A왼쪽 사이드바 상단에서 Assets 탭을 확인해 보세요. 단축키로는 Windows Alt + 2, Mac Option + 2가 보통 사용됩니다.
Q 찾는 컴포넌트가 에셋에 없어요.
A라이브러리가 파일에 연결되지 않았을 수 있습니다. Assets에서 라이브러리 선택/관리로 필요한 라이브러리를 파일에 추가한 뒤 다시 검색해 보세요.
Q 버튼 글자만 바꾸고 싶은데 어디를 눌러야 하죠?
A버튼 인스턴스를 더블 클릭해 텍스트 레이어만 선택한 뒤 수정하는 흐름이 안전합니다. 형태(패딩/색/모서리)를 건드리기 시작하면 디자인 시스템 일관성이 깨질 수 있습니다.
Q 아이콘을 다른 아이콘으로 바꾸고 싶어요.
A인스턴스를 선택하고 오른쪽 사이드바의 Instance 메뉴에서 검색해 교체하거나, Assets에서 다른 아이콘을 Alt/Option 누른 채 기존 아이콘 위에 드래그해 교체할 수 있습니다.
Q “원본(Main)”을 건드린 것 같아요. 큰일인가요?
A원본 변경은 영향 범위가 커질 수 있으니, 변경 이력이 남았는지 확인하고 팀 합의 후 진행하는 편이 안전합니다. 기획 단계에서는 원칙적으로 인스턴스 중심으로 사용하는 흐름이 가장 무난합니다.
Q 컴포넌트 교체했더니 내가 수정한 설정이 사라졌어요.
A컴포넌트 구조가 달라지면 일부 오버라이드(텍스트 외 속성)가 유지되지 않을 수 있습니다. 교체는 “최소 오버라이드” 상태에서 하는 편이 안정적이고, 텍스트 유지가 중요하면 레이어 네이밍/구조 일관성이 도움이 됩니다.