yeoni

Chapter 8. 디자인 시스템8-1) 디자인 시스템의 이해 디자인 시스템: 다양한 페이지와 채널을 걸쳐 공통의 언와 시각적 일관성을 만들고 반복되는 작업을 줄임으로써, 규모에 맞게 디자인을 관리하기 위한 표준 집합디지털 제품의 사용 기준을 명확하게 정의한 재사용 가능한 구성 요소의 모음 디자인 시스템은 디자이너 만을 위한 것이 아니다. 여기서 디자인은 시각적인 아웃풋이 아니라 '설계하다'의 어원으로디자이너 뿐만 아니라 전체 조직 구성원을 대상으로 제품을 만드는 방법을 다루는 결과물들이다.디자인 원칙, 브랜드 정체성, 스타일 가이드, 관리 정책 등이 포함된다. 제품이나 서비스가 처음 시작될 때 규칙들이 잘 반영되지만 시간이 지나고 프로젝트가 커지면 규칙이 잘 지켜지지 않게 된다. 이러한 혼란을 방지하고..

Chapter 7. 프로토타입7-1) 인터랙션과 미리보기   두 페이지 인터랙션 걸어주기 두 페이지를 연결하고 미리보기를 눌러보면 화면 클릭시 다음 화면으로 파란색 페이지가 뜨고 다시 한 번 클릭하면 분홍색 페이지가 뜬다.    7-2) 베리언트 인터랙션  버튼 두 개를 만들고 인터랙션을 연결한다. 컴포넌트로 생성해 다음 페이지에서 버튼을 가져가 미리보기를 눌러보면 버튼이 바뀌게 된다.     7-3) 버튼 인터랙션  normal 버튼에서 hover 버튼으로 갈 때는 While hovering 으로 설정하고, hover 버튼에서 pressed 로 연결할 때는 while pressing으로 설정한다.  미리보기로 보면 버튼 위에 마우스를 올렸을 때와 클릭할 때 버튼 색이 바뀌는 것을 확인할 수 있다.   ..

Chapter6. 컴포넌트와 베리언트6-1) 컴포넌트와 인스턴스  원본을 삭제하면 컴포넌트도 제거되기 때문에 컴포넌트를 보관해두고 사용해야한다.  컴포넌트 설정하기 컴포넌트로 설정하면 오브젝트를 선택했을 때 보라색으로 표시된다.컴포넌트로 설정한 오브젝트를 복제한 것이 인스턴스이다. 컴포넌트로 설정한 오브젝트의 색상을 빨간색으로 바꾸니 아래에 복제한 두 인스턴스도 같은 색으로 변경됐다.하지만 가운데에 인스턴스1 오브젝트를 분홍색으로 바꾸어도 컴포넌트와 나머지 인스턴스2 오브젝트의 색상은 변경되지 않는다.컴포넌트의 색을 다시 회색빛이 도는 분홍색으로 변경했더니 인스턴스2만 같은 색으로 변경되고 아까 따로 색상을 변경한 인스턴스1은 변하지 않은 것을 볼 수 있다. 한 번 변경되고 나면 인스턴스는 영향을 받지 ..

Chapter5. 정렬과 레이아웃5-1) 프레임과 레이어   command + D : 프레임 복제하기command + - : 화면 축소하기command + + : 화면 확대하기command + 0 : 비율 100%로 보기 우측상단에서 보이는 비율을 직접 지정하거나 옵션을 선택할 수도 있음피그마에서는 프레임안에 프레임이 삽입되기도 함 (XD에서는 X) 프레임을 회전할 수도 있다. command + [ : 선택한 오브젝트 뒤로 보내기  프레임을 잠가두면 프레임 안에 오브젝트를 넣어도 귀속되지 못하고 분리된다.잠금을 해제하고 오브젝트를 다시 안에 넣으면 프레임 안에 귀속된다.프레임 안에 들어있지 않은 오브젝트는 프레임을 이동시킬 때 프레임을 따라오지 않는다.   command + shift + L : 잠금(잠..

Chapter4. 그래픽 스타일의 응용4-1) 컬러와 스타일  다른 사람들과 협업 시에는 색상 코드와 투명도 수치를 통해 공유해야 정확한 공유가 가능하다. 한 오브젝트에 색상 하나만 넣을 수 있는게 아니라 색상을 추가할 수 있는데 위에있는 색이 아래 있는 색을 덮는 것이기 때문에 위에 있는 색의 투명도가 100%이면 아래에 추가한 색상이 보이지 않는다.  영문 i를 누르면 색상 스포이드 기능을 사용할 수 있다. 자주 사용하는 색상을 스타일로 등록해둘 수 있다. 스타일을 등록하면 우측에 로컬 스타일로 내가 저장해둔 색상이 저장된다.색상들은 그룹으로 묶어서 정리할 수도 있다.    tailwind color ganerator 플러그인을 실행시키면 단계별로 색상을 저장할 수 있다.     4-2) 토큰의 활용..

Chapter3. 도형의 활용3-1) 사각형과 원  사용했던 툴을 한 번 사용 후에도 계속 유지되게 설정하려면 keep tool selected after use 를 설정해두면 된다. 정방형을 만들고 싶을 때는 shift키를 눌러서 만들 수 있다.   사각형을 누르고 alt키를 누르면 두배로 커진다. 선을 그릴 때 shift키를 누르면 수평, 수직선을 그릴 수 있다.   하나 건너 선택해야 할 때 (가운데 별을 제외하고 사각형과 삼각형을 선택하고 싶을 때)는 shift키를 누르고 클릭하면 가운데 별은 건너뛰어 선택된다.     shift키를 누르고 정사각형을 만든 뒤 너비만 400으로 바꾸면 높이가 자동으로 400으로 바뀌게 된다.분홍생 동그라미가 쳐진 컨스트레인 프로포션 옵션이 켜져있기 때문이다.너비나..

Chapter 1. Figma 소개와 설치/ 1-1. Figma 소개, 1-2 Figma 실행시키기Chapter 2. Figma 인터페이스/ 2-1. 인터페이스와 커뮤니티, 2-2. 에디트 모드  피그마 장점 및 특징실시간으로 다른 사람들과 공유할 수 있다.프로그램을 별도로 다운받지 않아도 웹 브라우저로 접속해 사용할 수 있다.커뮤니티에서 다른 사람들이 만들어둔 UI 키트들을 가져다가 사용할 수 있다.  피그마: 시각적인 부분피그잼: 온라인 화이트보드 기능 프레임 툴: 화면 안에 요소를 구성하는 컨테이너섹션: 프레임을 화면에 담는 단위슬라이스: 오브젝트의 특정 영역을 잘라서 이미지로 추출할 수 있는 도구  전체적으로 피그마에 어떤 기능들이 있는지와 사용법을 간단하게 배웠다.