컴포넌트 & 인스턴스

텍스트 취소선 컴포넌트 구현

피그마 오픈카톡방2026. 3. 7.

질문사항

텍스트에 취소선(가운데 줄)을 적용한 것을 컴포넌트화하고 싶은데, 어떻게 구현할 수 있을까요?

답변

텍스트에 취소선을 적용하고 이를 컴포넌트화하는 방법은 다음과 같습니다:

텍스트 레이어 준비: 취소선을 적용할 텍스트 레이어를 만듭니다.

라인 레이어 추가: 텍스트 레이어 위에 취소선 역할을 할 라인(Line) 레이어를 그립니다.

Absolute Position 설정: 라인 레이어를 선택하고, 디자인 패널에서 'Absolute position'을 활성화합니다.

라인 위치 조정: 라인 레이어를 텍스트 레이어의 중앙에 오도록 수동으로 배치합니다.

Constraints 설정: 라인 레이어의 Constraints를 'Left and right'로 설정하여, 텍스트 레이어의 너비가 변경될 때 라인도 함께 늘어나거나 줄어들도록 합니다. (필요하다면 'Top and bottom'도 'Center'로 설정하여 세로 중앙을 유지)

Auto Layout 프레임 생성: 텍스트 레이어와 라인 레이어를 함께 선택한 후, Shift + A를 눌러 Auto Layout 프레임으로 묶습니다.

컴포넌트 생성: 이 Auto Layout 프레임을 컴포넌트로 만듭니다.

이렇게 하면 텍스트 내용이나 프레임 너비가 변경되어도 취소선이 텍스트 중앙에 유지되며 반응하는 컴포넌트를 만들 수 있습니다.