디자인프로그램 (61) 썸네일형 리스트형 [Figma] 12강 Auto Layout과 Constraints - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/GhzSHYMy0KU 1. 오토레이아웃(Auto Layout) 기능 정리 - 컴포넌트를 생성하면 사용할 수 있는 Auto Layout기능을 보도록 하겠습니다. 1) Padding 조절 기능정리 - 여러 개의 컨텐츠가 있는 경우 뒤의 기본이 되는 컨텐츠와 위쪽 컨텐츠와의 패딩 간격을 동일하게 조절할 수 있습니다. - [Design]패널에서 [Auto Layout]을 +아이콘을 눌러 추가 후 사용하면 됩니다. - 단축키인 [Shift]+[A]를 통해서 사용해도 됩니다. 2) Padding 조절 실습 - 사각형 도형을 사이즈를 임의적으로 그리고, 모서리둥글기를 5로 처리, 색상도 하고 싶은 색상으로 넣으세요. - 그 위에 .. [Figma] 11강 컴포넌트 - 오쌤의니가스터디 ** 자세한 강좌는 유튜브 영상으로 제공됩니다. https://youtu.be/Z1mapqjOIEA https://youtu.be/_--p4JA1pNg 1. 컴포넌트(component) 기능 정리 - 컴포넌트란 재사용 가능한 디자인을 등록해서 사용하는 것을 의미합니다. - Adobe XD의 에셋(Asset)과도 같은 기능이고, 코딩쪽에서는 클래스(설계도)와도 비슷하다고 보면 됩니다. 1) 컴포넌트 만들기 - 컴포넌트는 오브젝트를 선택 시 나오는 타이틀쪽에 나오는 아이콘을 클릭해서 만듭니다. - 단축키 : [Ctrl/Command]+[Alt/Option]+[k] 로도 가능합니다. - 메뉴 - [object]-[create component] 로도 가능합니다. 2) 컴포넌트 복제 - 인스턴스 만들기 - 컴포.. [Figma] 10강 이미지 가져오기와 마스크 - 오쌤의니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=lgTPzAkYxuk ** 사용된 이미지 - 출처 : https://pixabay.com/ 1. 기능 정리 1) 툴을 이용한 이미지 가져오기 - 사각형툴을 꾹 눌러서 보면 맨 아래 [place image]를 눌러 클릭해주면 나옵니다. 2) 메뉴를 통해 가져오기 - [피그마아이콘]-[file]메뉴-[place image]눌러서 가져옵니다. - 단축키 : [Ctrl]+[Shift]+[k] 로 가져와도 됩니다. 3) 피그마앱이면 [내컴퓨터 탐색기]에서 드래그해도 가능 2. 마스크기능(Use as mask) 1) 마우스 오른쪽 대화상자 통해서 처리 - 마스크 영역은 화면 뒷쪽에 그리고, 보여질 오브.. [Figma] 9강 스타일등록와 스타일복사 - 오쌤의니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=WUqzBy421wM&t=1123s 1. 등록할 수 있는 스타일의 종류 1) Color Style - 색상을 단색, 그라디언트로 등록할 수 있습니다. 2) Text Style - 글자 관련을 등록할 수 있습니다. 3) Effect Style - 그림자, 번짐을 등록할 수 있습니다. 4) Grid Style - 그리드도 스타일을 지정할 수 있습니다. 2. Color Style - 모든 웹이나 앱은 컬러시스템을 만들고 시작합니다. - 보통 가장 많이 사용되는 색을 주조색(Main Color)라고 합니다. - 그리고 보조가 되는 색을 보조색(Sub Color)라고 합니다. - 이 색상들을 디자인시.. [Figma] 8강 그라디언트 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/J85dG36vJy8 1. 기능 정리 - 그라디언트는 2가지이상의 색을 이용해서 입체적인 느낌을 주는 기능입니다. - 모든 디자인 소프트웨어에는 있는 기능으로 단색에 비해서는 훨씬 입체적 느낌을 줍니다. 1) 그라디언트 적용법 - 오브젝트의 면색/선색에 단색 대신 그라디언트를 적용할 수 있습니다. - [Design]패널의 색부분을 클릭하여 [Solid]라고 적혀 있는 글자를 누르면 그라디언트를 선택할 수 있습니다. 2) 그라디언트의 종류 - 피그마는 4가지 그라디언트를 지원합니다. a) Linear Gradient(선형그라디언트) - 색의 흐름이 선형으로 퍼지는 것을 의미합니다. - 선의 흐름은 Gradient An.. [Figma] 7강 도형 패스파인더 - 오쌤의 니가스터디 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://youtu.be/bHaQ_q4yKBo 1. 기능 정리 - pathfinder란 도형끼리 합치거나 빼거나, 교집합시키거나 제외시키는 기능을 의미합니다. - Figma에서는 2개 이상의 도형을 선택하면 패스파인더 기능을 사용할 수 있습니다. - 그리고 원래의 도형을 기억하고 있어 그룹해제([Ctrl]+[Shift]+[g])를 누르면 원래 상태로 돌아옵니다. 1) Union Selection : 도형들을 하나로 합칩니다. 2) Subtract Selection : 맨 아래 있는 도형만 남기고 위에 있는 도형을 뺍니다. 3) Intersect Selection : 도형들의 교집합만 남기고 뺍니다. 4) Exclude Selection : 홀수로 겹.. [Figma] 6강 피그마 펜툴 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요. https://youtu.be/jfTxNHg7JvM 0. 예제를 피그마 커뮤니티에서 복제하기 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) 펜툴예제를 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com/@ossam]을 검색하면 찾을 수 있습니다. 1. 직선그리기 1) [실습]페이지의 [1_straight line]프레임을 크게 확대해주세요. - [ctrl]누르고 마우스 휠로 크기 조절합니다. - [ctrl]+[+] 혹은 [ctrl]+[-]누르면 확대축소됩니다. 2) [A-B]라인 그리기 - 직선을 그릴 때는 클릭클릭해주세요.. [Figma] 5강 스마트셀렉션(Smart Selection)과 텍스트툴 ** 영상으로 보실분은 아래 주소를 클릭해주세요. https://www.youtube.com/watch?v=2mO9BB53oI0 A. 텍스트툴 알아보기 1. 텍스트툴 옵션 ① style : 텍스트 스타일을 등록 ② font-family : 글꼴을 지정 ③ style : 글자 스타일(italic) 혹은 굵기 지정 ④ font-size : 글자 크기 지정 ⑤ line-height : 행간 지정 ⑥ letter-spacing : 자간 지정 ⑦ paragraph-spacing : 문단 간격 지정 ⑧ 텍스트 영역 크기 조정 ⑨ text-align : 가로 정렬 ⑩ vertical-align : 세로 정렬 ⑪ text-detail-setting : 텍스트 세부 설정 2. fixed size - 클릭해서 글자를 작성.. 이전 1 2 3 4 5 6 7 8 다음
