📌

컴포넌트 기능 관련 아티클

컴포넌트 디자인으로 재사용성 극대화하기

컴포넌트 디자인의 생성과 활용, 협업하기 by 강남언니 블로그

https://blog.gangnamunni.com/post/Maximize-reusability-with-component-design/

피그마로 디자인 시스템 세팅하기: ②인터랙티브한 컴포넌트 만들기 | 요즘IT

이번 편에서는 그다음 단계인 ‘컴포넌트(Component)’를 만드는 방법을 소개할 예정이다. 컴포넌트는 단어의 의미 그대로 화면의 구성 요소를 가리키며, 여러 컴포넌트를 조합해 하나의 UI를 이룬다. 이때 버튼(Button), 스위치(Switch 혹은 Toggle), 카드(Card), 텍스트필드(Text field)처럼 반복적으로 쓰이는 주요 컴포넌트를 미리 디자인 에셋으로 저장해두면 UI 제작 시 많은 시간을 단축할 수 있다.

https://yozm.wishket.com/magazine/detail/1648/

[피그마 컴포넌트 불리언, 인스턴스 스와이프, 텍스트 프로퍼티&카드 리사이징] Add component boolean, instance swipe, text properties

지난 영상에서 만들었던 카드UI를 활용해서 베리언트 후 불리언, 인스턴스 스와이프, 텍스트 속성을 추가했습니다. 카드를 반드시 이렇게 만들 필요는 없으니 참고로 봐주세요~ : ) 블로그 : https://figma-play.tistory.com/9

https://www.youtube.com/watch?v=DxsgaZeps1Q

사수님의 코멘트

시안이 슬슬 정리되고 있다면 컴포넌트화도 고려해보아야 할 텐데요! 실무에서는 거의 모든 요소를 컴포넌트화 시키고 있는 만큼, 관련 기능들을 미리 익혀두시는 것도 도움이 될 듯싶어 공유드립니다.

특히 정말 많이 사용되는 Boolean, Instance swap, Layer on-off 는 꼭 연습해보시길 바랍니다!