질문사항
피그마 프로토타입에서 실제 텍스트 입력이 어렵다면, '텍스트를 입력하고 엔터를 치면 특정 결과값이 나온다'는 것을 시각적으로 표현하는 방법을 알고 싶습니다.
답변
Figma 프로토타입은 실제 텍스트 입력 기능을 직접적으로 제공하지 않습니다. 하지만 '텍스트를 입력하고 엔터를 치면 특정 결과값이 나온다'는 것을 시각적으로 시뮬레이션하는 방법은 있습니다.
시뮬레이션 방법:
입력 필드 클릭 시 키보드 오버레이: 텍스트 인풋 박스를 클릭(On Click)했을 때, 키보드 UI를 디자인하여 'Open Overlay' 액션으로 바텀 시트(Bottom Sheet) 형태로 나타나게 합니다.키보드 입력 시 결과값 표시: 키보드 UI의 특정 키(예: 'Enter' 키 또는 특정 문자)를 클릭했을 때, 미리 디자인된 '입력 완료' 상태의 화면이나 모달, 또는 다음 화면으로 이동(Navigate To)하도록 인터랙션을 설정합니다.텍스트 변경 시뮬레이션 (Variants/Variables 활용): 더 나아가, Variants나 Variables 기능을 활용하여 입력 필드의 텍스트 상태를 변경하는 컴포넌트를 만들 수 있습니다. 예를 들어, '빈 상태' -> '입력 중 상태' -> '입력 완료 상태'와 같이 여러 Variant를 만들고, 키보드 입력 시 해당 컴포넌트의 Variant를 변경(Change To)하도록 설정하여 텍스트가 실제로 입력되는 듯한 효과를 줄 수도 있습니다.이 방법들은 실제 입력은 아니지만, 사용자에게 입력 경험을 시각적으로 전달하는 데 효과적입니다.