기획자의 작업대

Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술 Figma 에셋 가져오기: 초보 기획자도 실수 없는 컴포넌트 활용 기술 디자이너가 공들여 만든 버튼, 입력창, 아이콘들… 기획서에 넣고 싶은데 방법을 몰라서 사각형부터 그리고 계셨나요? 그 사각형, 마음은 따뜻하지만 결과물은 “임시” 티가 납니다. 😇 Figma의 에셋(Assets) 기능을 쓰면 클릭 몇 번으로 실제 서비스와 동일한 컴포넌트 를 기획서에 배치할 수 있어요. 복잡한 매뉴얼 대신, 이 글 순서대로만 따라오면 됩니다. 📚 목차 에셋(Assets) 패널 위치 확인하기 원하는 컴포넌트 광속으로 찾는 법 기획서로 에셋 가져오기 (드래그 앤 드롭) 초보 기획자가 자주 하는 실수 방지 가이드 아이콘/버튼 교체하기: 스왑(Instance Swap) 요령 기획 퀄리티 2배 올리는 에셋 활용 꿀팁 마지막 체크리스트 FAQ 1) 에셋(Assets) 패널 위치 확인하기 왼쪽 사이드바에는 보통 Layers 와 Assets 탭이 있습니다. Layers(레이어) : 지금 페이지에 있는 요소 목록(현재 캔버스의 “재료 목록”). Assets(에셋) : 디자이너가 만들어 둔 컴포넌트(부품) 목록 (우리에게 필요한 “정품 부품 창고”). 빠른 이동 단축키 Assets 열기 : Windows Alt + 2 / Mac Option(⌥) + 2 Layers 열기 : Windows Ctrl + 1 / Mac Option(⌥) + 1 포인트 : “기획서는 Layers가 아니라 Assets에서 ‘부품을 꺼내 쓰는’ 문서”라고 생각하면...

Figma 컴포넌트 라이브러리 ‘정리 규칙’ 7가지를 제공합니다. 복붙 지옥 탈출: Figma 컴포넌트 라이브러리 ‘정리 규칙’ 7가지(실무 템플릿) 서론 안녕하세요~ Figma로 버튼, 탭, 입력 폼까지 열심히 만들었는데 어느 날 이런 순간이 오더라고요. “그때 그 버튼… 어디 있더라?” 화면은 많아지고, 복사본은 더 많아지고, 결국 수정 요청이 오면 찾는 데 시간이 더 걸립니다. 저도 초반엔 화면 파일마다 컴포넌트를 만들고 그때그때 가져다 썼는데, 프로젝트가 커지니까 같은 UI가 조금씩 다른 버전으로 퍼지기 시작했습니다. 그때부터 깨달았어요. 만드는 실력보다 중요한 건 정리와 공유 라는 걸요. 그래서 이번 글에서는 Figma 라이브러리 를 기준으로 “복붙 지옥”을 끝내는 정리 규칙 7가지 를 실무 템플릿 형태로 정리합니다. (오늘 글은 예쁜 말보다, 바로 써먹는 규칙 위주로 갑니다 🧾) 이 글을 읽고 나면: UI 자산(버튼/칩/탭/입력폼)을 한 곳에 모아 공유해도 망가지지 않는 구조로 운영할 수 있습니다. 글 마지막에 Figma 라이브러리 체크리스트가 있습니다. 📚 목차 Figma 라이브러리란? (컴포넌트와 뭐가 다를까) 규칙 1) “원본 파일”과 “사용 파일”을 분리한다 규칙 2) 네이밍은 슬래시(/)로 ‘검색 가능’하게 만든다 규칙 3) Variants 속성은 공통 규칙(Type/Size/State)로 통일한다 규칙 4) 컴포넌트 페이지는 ‘전시장’처럼 구역화한다 규칙 5) 바뀌는 값(토큰/스타일)은 중앙에서 관리한다 규칙 6) 공유 전 체크리스트로 ‘망한 배포’를 막는다 ...