기획자용 피그마 텍스트 필드 베리언츠(Variants) 완벽 가이드: 효율적인 컴포넌트 관리법
기획자용 Figma 입력 폼 Variants
: Text Field 상태 관리 한 번에 끝내기
서론
안녕하세요~
오늘 글은 제가 Figma로 기획서 시안을 만들면서 가장 많이 놓치고,
수정 요청도 가장 많이 받았던 입력 폼(Text Field) 상태 관리에 대한 이야기입니다.
버튼, 칩, 탭까지 정리했는데도 화면이 어딘가 허전해 보일 때가 있죠.
그럴 때 원인을 찾아보면 거의 항상 입력 폼이었습니다.
특히 로그인 화면에서 많이 느꼈어요.
“아이디/비밀번호 입력창”은 만들어 둔 것 같은데,
화면을 다시 보면 완성도가 떨어져 보이거나, 리뷰에서 이런 말이 나옵니다.
“포커스는요?” “에러 상태는요?” “비활성은요?”
결국 Figma Text Field는 ‘하나의 입력창’이 아니라 ‘상태 세트’로 봐야 하더라고요.
그래서 이 글에서는 Figma Variants를 활용해 Text Field 상태를 한 번에 관리하는 방법을 실무 기준으로 정리해 보겠습니다.
.png "기획자용 Figma 입력 폼 Variants")
📚 목차
본론
1) 입력 폼이 가장 먼저 망가지는 이유
입력 폼은 UI 중에서 상태 변화가 가장 많은 요소입니다. 그런데 기획서 시안에서는 상태 정의가 빠지는 경우가 정말 많습니다. 그러면 화면마다 품질이 흔들립니다.
- 에러는 빨간 테두리인데 메시지 위치가 매번 다름
- 포커스가 화면마다 다르게 보임(강조색, 그림자, 두께)
- 비활성인데도 ‘눌러도 될 것처럼’ 보임
정리하자면, Figma Text Field를 “그리기”로 끝내는 순간 상태가 늘어날 때마다 복붙이 늘고, 수정이 늘고, 검수가 늘어납니다.
2) Text Field Variants 설계 규칙(Type/Size/State)
입력 폼은 버튼보다 더 단순한 규칙이 좋습니다. 핵심은 State 중심입니다.
- State: Default / Focused / Error / Disabled
- Size: S / M (필요하면 L)
- Type: Normal / Search / Password (필요할 때만)
3) 1단계: 기본 Text Field 만들기(Auto Layout)
기본 구조는 단순하게 시작하세요. “확장 가능한 뼈대”가 목표입니다.
- 전체를 세로 Auto Layout으로 구성 (라벨 → 입력영역 → 헬퍼텍스트)
- 입력영역 내부 패딩 고정 (좌우/상하 규격을 먼저 정함)
- 텍스트가 길어져도 깨지지 않게 Hug/Fill 점검
4) 2단계: State 중심 Variants 구성
이제 “상태 세트”를 만듭니다. 여기서부터가 진짜입니다. 아래 4가지만 있어도 로그인/회원가입/설정 화면 대부분이 커버됩니다.
- Default: 기본 테두리 + 안내 문구(placeholder)
- Focused: 강조 테두리(포커스 링) + 커서 상태
- Error: 에러 테두리 + 헬퍼 텍스트(에러 메시지) 표시
- Disabled: 흐린 스타일 + 입력 불가
5) 3단계: Size/Type 확장 전략(과하지 않게)
확장은 천천히 해도 됩니다. 입력 폼은 조합이 늘수록 관리 난이도가 급상승하니까요.
- Size: M 하나로 시작 → 툴바/촘촘한 화면에서만 S 추가
- Type: Normal 완성 → Search/Password는 “프로젝트에서 필요할 때” 추가
이렇게 하면 Figma Text Field 세트가 “진짜 재사용 가능한 자산”이 됩니다.
6) 실무 예시: 로그인/검색/설정 화면에 적용
예시 1) 로그인 화면
- Email: Default → Focused → Error(조건: 형식 오류)
- Password: Default → Focused → Error(조건: 불일치)
예시 2) 검색 화면
- Type=Search + State=Focused로 시작하면 “검색 화면” 느낌이 즉시 납니다
예시 3) 설정 화면
- 권한/정책으로 수정 불가한 항목은 State=Disabled로 통일하면 커뮤니케이션이 쉬워집니다
7) 초보가 가장 많이 하는 실수 7가지
- Error 메시지를 매번 오버라이드로만 처리 → 반복이면 Variants 구조로 흡수
- Focused 상태를 만들지 않음 → 리뷰에서 가장 먼저 지적되는 포인트
- Disabled가 ‘회색 버튼’처럼 보임 → 텍스트 대비/테두리 톤까지 함께 조절
- Size 규칙이 화면마다 다름 → 높이/패딩 기준을 먼저 고정
- Search/Password를 너무 빨리 확장 → Normal 안정화 후 확장
- 헬퍼 텍스트 위치가 흔들림 → 레이아웃을 Auto Layout으로 고정
- 상태 이름이 제각각 → Default/Focused/Error/Disabled로 통일
결론
입력 폼은 화면의 “완성도 체감”을 결정하는 요소입니다. 버튼·칩·탭이 잘 정리돼도, 입력 폼 상태가 흐릿하면 화면이 미완성처럼 보입니다.
오늘처럼 State 중심 Variants로 정리해두면, Figma Text Field를 화면마다 새로 만드는 대신 “선택으로 관리”할 수 있어 수정 요청 대응 속도가 확 빨라집니다.
다음 글에서는 이 컴포넌트들을 라이브러리로 정리하고 공유하는 방식으로 확장하면 팀 단위에서도 유지보수가 쉬운 구조가 됩니다.
FAQ
Q 입력 폼에도 Variants가 꼭 필요한가요?
A 상태가 2개 이상이면 Variants가 훨씬 관리하기 쉽습니다. 특히 Figma Text Field는 상태가 늘어나는 속도가 빨라서, 초반에 잡아두는 편이 효율적입니다.
Q Error 상태는 디자인보다 기획이 더 중요한가요?
A 네. 에러 문구 조건(언제, 어떤 텍스트로)과 노출 타이밍이 명확해야 시안도 설득력을 가집니다. Error 상태가 애매하면 화면 전체 신뢰도가 내려갑니다.