TIL (Today I learned)
오늘 나는 무엇을 했나요
- 디자이너와 프론트엔드 연관성 특강
- 피그마 기초 강의 (버튼 컴포넌트 프로퍼티)
- 컴포넌트 만들기
오늘은 어떤 것을 배웠나요
1. 피그마 기초 강의 ( 버튼 컴포넌트 프로퍼티 )
-컴포넌트 프로퍼티
컴포넌트는 의사상태가 있다. 이러한 의사상태일때 컴포넌트 안의 요소가 바뀌는 경우가 있는데
이러한 과정을 효율적으로 하기 위해 프로퍼티를 사용함
먼저 프로퍼티란 속성이라는 뜻임 즉 디자인 구조가 바뀌지 않는 선에서 변경할 수 있는 요소들을 다룰 때 사용
1. Variants
2. Boolean
3. Instance swap
4. Text
총 4가지가 있으며
대부분 1번째 기능으로 할 수 있으나 효율적으로 하기 위해서 상황에 따라 2,3,4번으로 해야합니다.
1. Variants
먼저 버튼의 위계 배리언츠를 만들어보았습니다.
일반적으로 프라이머리(Primary, 1순위), 세컨더리(Secondary, 2순위), 터시어리(Tertiary, 3순위)의 3단계를 가집니다.
1.버튼 컴포넌트를 만든다음 컴포넌트 패널에서 배리언츠를 추가합니다.
2.배리언츠 작성 창에서 property1을 Priority로 이름을 바꿉니다.
3.프레임 테두리의 + 버튼을 눌러 컴포넌트를 총 3개 생성합니다.
4.맨위쪽 컴포넌트는 배리언츠 패널에서 이름을 Primary로 변경
5.두번째 세번째 컴포넌트는 각각 이름을 Secondery, Tertiary로 변경
6.두번째 세번째 컴포넌트의 스타일 프라이머리 컬러를 참고해서 변경
그다음 버튼의 크기 배리언츠 입니다.
1. 컴포넌트 선택하고 컴포넌트 패널에서 배리언츠를 추가합니다.
2. 작성창에서 이름(Name)창에는 Size Value창에는 Large 라고 적습니다.
3. 만들어놓은 버튼 3개 모두 선택한다음 +를 누르면 3개가 더 생깁니다.
4. 새로 추가한 버튼 컴포넌트의 Size Value 창에는 Small 이라고 적습니다.
5. 새로 추가한 버튼 컴포넌트의 사이즈를 줄여줍니다.
그다음 버튼의 상태 배리언츠 입니다,
1.상태란 의사상태를 말합니다.
2.컴포넌트를 선택후 패널에 배리언츠를 추가합니다.
3.배리언츠의 이름(Name)은 State Value에는 Default라고 적습니다.
3.버튼을 모두 선택하고 +를 누릅니다.
4.추가한 버튼의 State를 모두 Pressed(누름)라고 변경합니다.
5.버튼을 눌렀을때 색상은 좀더 진한 색으로 표현됩니다.
2. Boolean
레이어를 숨기거나 보이게 하는 프로퍼티입니다
배리언츠에서 오래걸리는 작업을 Boolean에서 효율적으로 할 수 있습니다.
이 프로퍼티는 스위치를 껏다 키거나 버튼을 안보이게 하거나 보이게 할때 주로 사용합니다.
1.만들어놓은 버튼 컴포넌트에 아이콘을 하나 추가합니다.
2.그다음 버튼 컴포넌트에 아이콘을 패널창에서 연결합니다.
3.인스턴스 컴포넌트를 만들어서 아이콘을 on off 할 수 있습니다.
3. Instance swap
아이콘을 다른 아이콘으로 교체하도록 설정하는 컴포넌트 프로퍼티 입니다.
1.만들어놓은 버튼 컴포넌트 패널에 인스턴트 스왑을 추가합니다.
2.추가를 한후 아이콘을 클릭후 연결을 합니다.
4. Text
1. 컴포넌트 패널에서 text를 추가후 연결을 합니다.
2. 디자이너와 프론트엔드 연관성 특강
이번에 Zoom으로 프로덕트 디자이너가 개발지식을 알아야 하는 이유란 특강을 들었다.
그것은 바로 리액트인데 프론트엔드 개발자들이 리액트를 사용하는 이유는 현재 점유율이 리액트가 가장 높으며 다른 이유로는
1.HTML 재사용이 편리함
2.컴포넌트 단위로 개발하기 때문에 여러 개발자들이 분업하기 좋음
3.React Native를 쓰면 리액트 비슷한 문법으로 모바일 앱개발도 가능
4.프론트엔드와 백엔드 파트를 완전히 분리해서 각각 개발가능
정도가 있다.
즉 프로덕트디자이너와 가장 밀접한 프론트엔드 개발자들이 사용하는 개발지식을 배움으로써 논리적인 의사소통으로 인한 작업시간 단축을 할 수 있기때문에 리액트를 배워야 한다
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 버튼 컴포넌트 프로퍼티 를 배웠는데 이것을 만드는 시간이 오래걸리는것 같았다.
즉 꾸준한 연습을 통해 만드는 시간을 단축시켜서 실전에 들어갔을때도 빠르게 작업을 할수있을것이다.