[피그마] 다이얼로그, 체크박스 UI만들기
텍스트필드 컴포넌트, 체크박스, 다이얼로그 컴포넌트로 로그인화면을 만들어 보았다.
체크박스와 라디오 버튼, 다이얼로그
1. 24x24 프레임 만들기
2. 옆에 20x20 프레임 만들어서 프레임 이름은 container로 바꿔준다.
3. 컨테이너를 24프레임안에 중앙에 배치한다. constraints 를 center로 변경
4. 체크아이콘을 그안에 중앙에 배치. 시각적인 효과 때문에 아래로 기울어져 보여서 백터레이어만 잡고 살짝 위로
5. 색변경 (컨셉에 맞는)
6. 컴포넌트로 변경하고 컴포넌트 이름지정하기
7. 베리언츠 추가해서 또 이름변경해서 색 변경
라디오버튼도 체크박스와 어느정도 유사함.
1. 프레임 24x24 만들기
2. 옆에 20x20 프레임 만들기 (이름은 container)
3. 또 12x12 프레임만들고 곡률로 원형만들기 (이름은radio, 곡률을 줄때는 높이값의 절반값을 정확히 입력해야함)
4. radio를 container 안으로 하고 container를 프레임안으로하기
5. 프레임은 색을 빼주고 radio에 색을 변경해주기
6. 컴포넌트 지정후 베리언츠 추가해주면 끝
다이얼로그는 컨테이너 컴포넌트이면서 모달속성을 가진 컴포넌트!
헤더 ( 제목,부제목, 썸네일이미지,아이콘, 닫기버튼 등이 들어갈 수 있음)
액션 ( 다이얼로그의 버튼)
1. 제목과 부제목을 적어서 오토레이아웃 걸기
2. 버튼만들기해서 오토레이아웃
3. fill을 채워주고 간격이랑 곡률적용하면 끝
(배경은 어두워야 사용자의 시선을 집중시킬수 있음)
체크박스는?
다중 선택가능, 하나도 선택안해도됨
라디오버튼?
딱 한개만 선택 가능, 하나라도 선택해야함.