디자인프로그램/Figma (32) 썸네일형 리스트형 [Figma] 16강 prototype - 모바일패널 오버레이 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 보세요. https://youtu.be/_LllIPS6KAU ** 사용될 이미지 - 저작권 : https://pixabay.com/ ** 완성이미지 ** 완성파일은 [피그마 커뮤니티]에서 찾아보세요. 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) [예제10] 모바일패널을 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com/@ossam]을 검색하면 찾을 수 있습니다. 검색이 잘되는 것을 확인할 수 있습니다. [Figma] 15강 Prototype - Slide Images - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 보세요! https://www.youtube.com/watch?v=QEuh9S43WM0 ** 프로토타입의 기능정리는 아래 주소에 있으니 확인해보세요. https://ossam5.tistory.com/298 [Figma] 14강 Prototype - 네이버 로그인창 - 오쌤의 니가스터디 ** 동영상으로 공부하고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/CTZ3B3shKxM 1. 프로토타입(Prototype) 기능 정리 - 프로토타입은 일차원적인 요소에 이벤트를 이용해 효과나 애니메이션을 ossam5.tistory.com 1. fade Image - 웹에서 많이 사용되는 메인이미지 스타일 중 페이드 효과를 해보도록 하겠습니다. ** 사용될 이미지를 다운.. [Figma] 14강 Prototype - 네이버 로그인창 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 제공됩니다. https://youtu.be/CTZ3B3shKxM 1. 프로토타입(Prototype) 기능 정리 - 프로토타입은 일차원적인 요소에 이벤트를 이용해 효과나 애니메이션을 주는 기능입니다. - 피그마의 프로토타입은 [Design]패널 옆에 탭버튼으로 있습니다. 1) 프로토타입의 요소 - 프로토타입은 컴포넌트끼리도 가능하고, 프레임끼리도 가능합니다. - 일단 장면을 통해서 요소를 설명해보겠습니다. - 핫스팟(Hot Spot) : 위 그림에서의 파란색 기준이 되는 점을 핫스팟이라고 합니다. 사용자의 인터랙션이 시작하는 위치입니다. - 커넥션(connection) 라인 : 핫스팟과 이어지는 두개의 요소 사이의 연결 선입니다. 이 선을 클릭하면 프로토타입의 세부적 설정을 할.. [Figma] 13강 Variants - 토글버튼, hover효과 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 제공됩니다. https://youtu.be/Q7_UZI9yNnw 1. 베리언츠(Variants) 기능 정리 - Variants는 컴포넌트를 조합하여 컴포넌트 세트를 만들어 더 체계적으로 사용하는 기능입니다. - 예를 들어 이미지의 out상태와 over상태를 만들때 사용할 수 있습니다. - 예를 들어 토글버튼의 on상태와 off상태를 만들때 사용할 수 있습니다. - 또, 버튼의 default, hover, focus, active, disabled를 사용할 수 있습니다. - 위의 상황들은 전부 디자이너가 만드는 것입니다. 1) Variants 패널 설명 - 컴포넌트를 2개 이상 선택하면 저런 버튼이 [Design]패널에 보입니다. - [Combine as Variants]라는 .. [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)라고 합니다. - 이 색상들을 디자인시.. 이전 1 2 3 4 다음
