원티드 프리온보딩 챌린지 6월 - 사전과제

da.circle·2023년 6월 2일
0

원티드 프리온보딩 챌린지 6월을 신청했다. 이번 주제는 컴포넌트 주도 개발이다. 원래는 테스트 주도 개발에 관심이 많지만, 이번 챌린지를 통해 컴포넌트에 대해 좀 더 깊이 이해하고 컴포넌트 주도 개발에 대해서도 알고 싶어서 신청하게 되었다. (그리고 취업도..)

사전 미션

사전미션은 버튼 디자인 시안을 Figma로 제작하기이다.

요구사항은 스타일, 색상, 테두리, 아이콘, 사이즈, 상태 표현이 있다.
일단 내가 이해한 대로 제작한 디자인 시안은 다음과 같다.

평소에 프로젝트하고 연습할 때 테마 색만 정해놓고, 사이즈 등은 정하지 않아서 눈으로 비교해가며 이 정도면 되겠지? 하고 만들었었다.
이렇게 디자인 시안을 만들다 보니 컴포넌트의 디자인 시안을 꼼꼼하게 만들어 놓으면 개발할 때 훨씬 시간도 절약되고 좋을 것 같다는 생각이 들었다.

그리고 피그마를 사용한 지 얼마 안 됐는데, 이번에 시안을 만들어보면서 피그마에 컴포넌트 기능이 있다는 걸 처음 알았다.
이렇게 좋은 기능이 있는데 모르고 있었다니! 이제 앞으로 자주 애용할 기능이 될 것 같다.


피그마에서 컴포넌트 만들어보기

  1. 컴포넌트로 만들 Instance를 선택하고 화면 상단의 버튼을 클릭한다.



    또는 이렇게 우클릭 해서 컴포넌트를 만들 수도 있다.

  2. 화면 왼쪽의 Assets 탭을 선택한다.

  3. 내가 선택한 Instance가 컴포넌트로 지정된걸 확인할 수 있다.

  4. 컴포넌트를 끌어다가 화면에 놓으면 사용할 수 있다. 컴포넌트는 보라색 테두리로 표시된다.


피그마 컴포넌트 삭제하기

Assets에서 컴포넌트를 클릭한 후에 키보드의 Delete키를 누르면 삭제가 된다.

컴포넌트로 만든 Instance를 컴포넌트가 아닌 일반 인스턴스로 해제하는 방법은 다음과 같다.

  • 복사한 요소를 Detach Instance하기 (우클릭 → 메뉴에서 선택)



    → Detach Instance를 누르면 컴포넌트에서 일반 Frame으로 변경된다.


출처) 컴포넌트가 뭔가요?컴포넌트의 중요성과 만드는 방법

profile
프론트엔드 개발자를 꿈꾸는 사람( •̀ ω •́ )✧

0개의 댓글