inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

테이블(Table) ✅

액션 아이콘 컴포넌트 질문

4

동팔이

작성한 질문수 3

0

초반에 액션 컴포넌트를 설정할 때 범용적으로 icon placeholder 아이콘을 설정해 두는데, 게시판 별로 액션 아이콘을 다르게 설정하는 경우가 많잖아요?? 그러면 첫 부모 컴포넌트는 placeholder로 냅두고 첨부사진과 같이 컬럼 컴포넌트로 아이콘을 지정해두는게 맞나요? 근데 이렇게하면 셀렉티드로 변환 상태의 아이콘도 바꿔야해서 Columns/Status Actions 를 True/Flase 2개를 만들어놔야 하는건지.. 게시판 별로 부모를 만들어 놓는 것과 컬럼 컴포넌트로 여러개 만들어 놓는 것, 어떤게 효율적인 방법인지 질문드립니다

이미지 415.png.webp

.

웹-디자인 figma figma-tokens 디자인-시스템 아토믹-디자인 figma-variable 프로덕트디자인

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 동팔이님.

피그마에서 액션 아이콘 컴포넌트를 설정하는 방식과 관련하여 좋은 질문 주셨습니다. 주로 디자인 시스템에서 컴포넌트를 설계할 때, 여러 게시판이나 상황에 따라 아이콘이 다르게 설정될 필요가 있을 수 있습니다. 이에 대한 몇 가지 접근법을 제안드립니다.

주제 요약

질문 내용은 다양한 게시판에 사용되는 액션 아이콘을 어떻게 효율적으로 관리할 수 있는지에 대한 것입니다. 한 가지 아이콘만을 사용한 placeholder 방식과 각 상황에 맞는 컬럼 컴포넌트를 설정하는 방식 중 어떤 것이 더 효율적인지 고민 중이신데요.

접근 방법

  1. Icon Placeholder 사용:

    • 장점: Icon Placeholder를 사용하면 일관된 상위 컴포넌트를 유지하면서 각 게시판의 요구에 맞춰 개별 인스턴스를 변경할 수 있는 유연성을 제공합니다. 기본적인 액션이 같을 시 placeholder는 매우 유용합니다.
    • 단점: 그러나, 각 상황에 맞는 커스터마이징이 필요할 시 각 액션을 위한 개별 처리가 어렵습니다.
  2. 각 게시판 별 부모 컴포넌트 생성:

    • 장점: 개별 게시판에 특화된 컴포넌트를 만들면, 각 상황에 정확히 맞는 아이콘과 속성을 정의할 수 있습니다. 이는 다양한 interaction(예: selected 상태 등)을 세밀하게 조정할 수 있게 해줍니다.
    • 단점: 컴포넌트 관리의 복잡성이 증가할 수 있으며, 일관성 유지가 어려울 수 있습니다.
  3. 컬럼 컴포넌트로 아이콘 지정:

    • 장점: 각 컬럼의 상황에 맞는 아이콘을 쉽게 재구성할 수 있습니다. 각 상황(예: selected 상태)에서의 동작을 정확히 관리할 수 있습니다.
    • 단점: 중복 작업이 증가할 수 있으며, 일반성이 높은 아이콘의 경우 이 방법은 비효율적일 수 있습니다.

권장 사항

각 접근 방식은 고유의 장점과 단점이 있어, 최상의 방법은 주어진 상황에 맞게 설계하는 것입니다. 만약 다양한 게시판에 대해 정확한 요구 사항이 있고, 이 요구사항이 자주 변경되지 않는다면, 각 게시판에 맞는 부모 컴포넌트를 만드는 것이 좋습니다. 반면에, 일관된 행동을 유지하면서 다양한 아이콘을 조금씩 변경해야 한다면 Icon Placeholder 방식이 더 효율적일 수 있습니다.

참고 질문 및 답변

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

0

9

1

스피너 아이콘 크기 질문

0

23

1

미리보기 빈칸생기는 현상

0

19

1

아이콘 빌런 부분

0

32

2

배리어블 Value에 관해 질문있습니다.

0

56

1

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

0

49

1

Navigation Mobile 토글 베리어블이 안됩니당

1

47

2

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

0

45

1

디자인 시스템에 그룹명을 숨길 수도 있나요?

0

51

2

디자인 시스템 네이밍에 관한 질문드립니다.

0

67

2

next step?

1

84

1

16강 Print Variables 출력 질문

0

85

2

open in Figma 누르고 ui kit 다운?받았을 때

0

81

2

variables 이름 지을때 소문자,대문자 사용에 관해..

0

105

2

디자인 시스템 네이밍 순서에 대해 질문남깁니다!

0

125

2

이미지 캐러셀 영상

0

74

2

아이콘 사이즈 컴포넌트 구성 방식 관련

0

116

3

완강/리뷰 이벤트 후 강의자료

0

68

2

Stack 컴포넌트 관련하여 궁금한 점이 있습니다.

0

64

1

컴포넌트별 베리어블 구축

0

91

2

인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?

0

46

1

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

0

57

2

UI Kit에서 배리어블 등록 안되는 문제

0

66

2

교육용 피그마 계정 문의

0

70

2