UXUI (4) 썸네일형 리스트형 [figma 실습] 로그인 페이지 만들기 글라스 느낌의 로그인 페이지 만들기 디자인하면서 고려한 부분 - 이메일 및 패스워드 유효성 검사 시 오류가 날 경우 문구 생성 - 문구가 생성되면서 늘어나는 container 크기는 어떻게 처리할지? - 이메일 및 패스워드 작성 시 해당 내용 전체 삭제 버튼 만들기 로그인 페이지 메인화면 input에 focus 이벤트 발생 시 - input : border 색상 변경(#FF6E84) - icon : color 변경(#FF6E84) - text color : #444444 input에 onkeypress() 이벤트 발생 시 - input의 value 값을 전체 삭제해 주는 'x' 버튼 'display : block'; - input의 value 값이 전체 삭제될 경우 'x' 버튼 'display : no.. Figma - 무엇이든 해제하기[인스턴스, 오토레이아웃, 그룹] 01 인스턴스 해제하기 #. 기본 지식 컴포넌트 = 부모 인스턴스 = 자식 컴포넌트를 복사하면 인스턴스가 됩니다. 인스턴스는 컴포넌트가 변경되면 영향을 받습니다. 인스턴스를 해제한다는 건 부모의 영향을 받지 않고 일반 frame으로 돌아가겠다는 말! *컴포넌트 생성 : Ctrl + Alt + K *인스턴스 해제 : Ctrl + Alt + B 02 오토 레이아웃 해제하기 *오토 레이아웃 생성 : Shift + A *오토 레이아웃 해제 : Alt + Shift + A 03 그룹 해제하기 *그룹 생성 : Ctrl + G *그룹 해제 : Ctrl + Shift + G [일러스트]오브젝트 잠금을 풀어도 움직이지 않을 때/잠금해제(Lock) 오브젝트 잠금을 풀어도 움직이지 않을 때 확인사항 01. ctrl + alt + 2 눌러서 전체 잠겨져 있는 오브젝트를 해제한다. 02. 레이어 창을 확인한다. 외부에서 일러스트 파일을 받았을 때, ctrl + alt + 2로 전체 잠금을 풀었는데도 대지의 요소들이 움직이지 않아서 당황한 적이 있습니다. 매우 쉽고 기본적인데도 잠금 해제가 안 되니 당황하게 되면서 저절로 보지 못하는 것이 있는데요, 바로 레이어 확인입니다. 외부 파일을 받았다는 가정으로 차례로 확인해보겠습니다. 1. 파일을 받았다면 먼저 F7을 눌러 현재의 레이어 상태를 확인해줍니다. 2. Hello와 뒤 배경이 다른 레이어로 나누어져 있음을 확인합니다. 3. ctrl+alt+2 눌러 모든 레이어를 잠금 해제시켜줍니다. 4. 잠겨있던 오.. [Figma]피그마 기초 이해 - 첫 피그마. 기본중의 기본부터 알아두자. 피그마 기초 이해 및 설정 첫 피그마일 경우 기초 이해 및 설정하는 방법입니다. 처음 시작할 경우 무엇을 먼저 설정해야 하고 처음 보는 이 툴을 어떻게 하면 더 효율적이고 편하게 이용할 수 있는지를 생각해보아야 합니다. 피그마 기본기부터 살아남아봅시다! 1. 캔버스 색상 변경하기 어도비에서 넘어오셨을 경우 아트보드 즉 대지도 없이 아무것도 없는 피그마는 굉장히 생소합니다. 심지어 캔버스 배경 색상은 라이트 그레이입니다. 어두운 색상으로 바꾸고 싶다면 아무것도 클릭하지 않은 상태에서 우측의 Design 사이드바의 background 패널을 확인하세요. 처음에는 #E5E5E5 색상으로 되어있는데요, 클릭 후 본인이 원하는 색상을 지정해주시면 됩니다. 좋은 점은 굳이 다크 색상만을 선택하지 않아도 된다는 점입.. 이전 1 다음
