디자인프로그램/Figma (34) 썸네일형 리스트형 [Figma] 25강 캐러셀 카드(Carousel Card) - 오쌤의 니가스터디 ** 강의는 유튜브 영상으로 제공됩니다. https://youtu.be/0rDXu2RuWvg ** 오늘은 캐러셀 디자인을 해보도록 하겠습니다. 캐러셀(Carousel)은 원래 수하물 컨베이어 벨트 같은 것을 의미하는데 웹앱 UI/UX 디자인에서는 회전되며 돌아가는 슬라이드들을 캐러셀이라고 부릅니다. - 위에 보이는 것 처럼 스와이프(Swipe) 제스처를 사용해서 다른 슬라이드를 보이게 해주는 것을 의미합니다. - 캐러셀은 자동으로 움직일 수도, 제스쳐에 의해서 움직일 수도 있습니다. ** 완성 이미지 - 이번 강좌에서 저와 함께 만들어 볼 예제입니다. - 유럽여행 Steady Seller 상품들을 캐러셀 카드로 같이 만들어 봅시다!! ** 필요한 이미지 소스 출처 : https://pixabay.com/.. [Figma강좌아님] Adobe, Figma인수😢 - 200억달러 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/pY5n6INnuv0 어도비가 피그마 인수했다고? 진짜인 거야??? 어도비가 피그마 인수한다규? https://www.hankyung.com/international/article/202209153662i 어도비, 디자인 소프트웨어 '피그마' 200억달러에 인수 어도비, 디자인 소프트웨어 '피그마' 200억달러에 인수, 노유정 기자, 국제 www.hankyung.com - 진짜군요..... - 과연 피그마는 무료로 남을 수 있을 것인가? - XD로 병합돼서 영원히 사라지는 것은 아닐지? - 설마 인디자인처럼 방치하고 버리는 건 아니겠죠? - 기사에서는 일단 인수 후에도 XD에 통합되지 않고, 계속 개발될 것이며, 대신.. [Figma] 24강 코드 Inspect패널과 Zeplin - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://youtu.be/NYWR4G5OtZA ** 이번 강좌에서는 디자인이 다된 파일을 개발자에게 넘길 때 유용한 작업과 코드 Inspect패널사용법에 대해 알아보도록 하겠습니다. 그와 관련된 유용한 플러그인인 zeplin과 clean document 플러그인도 배워보도록 하겠습니다. 1. 코드 변환 전 체크 요소 - 디자인이 너무 중첩되었거나, 레이어에 이름을 작성하지 않았거나 하면 코드로 변환 시 의도치 않게 나올 수 있습니다. - 그래서 미리 여러 가지를 체크하고 개발자에게 넘기면 좋을 듯 합니다. 1) 레이어 정리 - 일단 모든 레이어에는 이름을 잘 지정해주세요. 혹시 vector로 빼야 하는 이름이 동일한 경우 [rename it]플러그인을.. [Figma] 23강 Variants를 이용한 탭바컨텐츠 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://www.youtube.com/watch?v=DlsvQKry-cc ** 이번 강좌에서는 탭바컨텐츠를 제작해보겠습니다. - Variants기능을 이용하면 탭바버튼을 얼마나 쉽게 제작할 수 있는지 보도록 하겠습니다. - 그리고 프로토타입 기능을 이용해서 실제 탭버튼 클릭시 화면 전환도 해보도록 하겠습니다. ** 완성 예시 ** 사용될 이미지 다운받기 출처 : https://pixabay.com/ko/ - 놀라운 무료 이미지 pixabay - 위의 svg파일은 버튼에 들어갈 화살표입니다. ** 사용될 텍스트 이태리남부 환상투어 투어코스 : 로마출발 → 폼페이 → 소렌토전망대 → 포지타노 → 로마도착 여행일정 : 원데이 - 투어날짜는 자세히보기를 눌러.. [Figma] 22강 피그마파일공유 및 코멘트툴 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 제공됩니다. https://youtu.be/-WsXLsBYKcs 1. 피그마 파일 공유 - Share - 피그마는 기획자, 디자이너, 개발자가 프로젝트를 편하게 공유하기 위해 고안된 프로그램입니다. - 협업 프로그램으로 개발된 프로토타입툴이기 때문에 공유 기능이 굉장히 잘 되어 있습니다. - 그래서 이번 강좌에서 공유기능에 대해서 알아보도록 하겠습니다. 1) [Share]버튼 누르기 - 툴박스 바에 오른쪽에 보면 파란색으로 [Share]버튼이 있습니다. - [Share]버튼을 누르면 공유관련 옵션팝업이 대화상자로 뜹니다. 2) [Share] 공유옵션 팝업 - [Invite]라는 탭으로 초대할 수 있는 파트가 뜨는 것이 보입니다. - 옆에는 [Publish to Comm.. [Figma] 21강 이미지(소스)내보내기(feat. 디자인에셋내보내기) - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다.https://youtu.be/rcmB6XMZVrc - 이번 강좌에서는 이미지(소스) 내보내는 방법을 알아보겠습니다.- XD에서는 디자인에셋 내보내기라는 용어를 써서 제목에 feat로 달아봤습니다.- 피그마 역시 XD처럼 내보내는 것이 아주 편리합니다.- 모바일에 대응한 1x, 2x, 3x로 내보낼 수도 있고, 내보내기를 체크한 것만 내보낼 수도 있습니다.- 그리고 원래 svg를 이용했거나, 벡터 혹은 직접 제작한 것은 SVG파일로도 내보낼 수 있습니다. 1. 해상도 설명 - 1x, 2x, 3x???- 이제 내보내기(Export) 수업을 하게 되는데, 처음부터 1x, 2x, 3x가 나옵니다.- 이건 애플 즉 아이폰에서의 해상도관련 용.. [Figma] 20강 Rename It 플러그인 - 오쌤의 니가스터디 1. Rename It 설명 - Figma 파일을 체계적으로 유지하고 레이어와 프레임의 이름을 일괄적으로 변경하는 플러그인 입니다. - 특히, 다중레이어 선택으로 한번에 여러 레이어 이름을 바꿔줍니다. - 그리고 알아서 레이어 뒤에 숫자도 붙여주는 좋은 기능을 가지고 있습니다. - 이프로그래은 원래 맥컴퓨터에서 사용되는 스케치라는 프로그램에도 있던 플러그인인데 자주 사용되었던 플러그인입니다. - 이 플러그인은 [19강 오쌤PICK! 플러그인TOP10] 게시물에서도 소개했었는데, 이번 강좌에서는 좀 더 디테일하게 알아보도록 하겠습니다. 1) 키워드 코드 표 - 아래서 예시를 보여드리기 전에 키워드를 미리 정리해보도록 하겠습니다. 타입 키워드 설명 Sequence (문장별정리) Keyword%N 키워드명 뒤.. [Figma] 19강 오쌤 Pick! 피그마 플러그인 Top 10 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 보세요! https://youtu.be/z3_hjBFItXk 0. 피그마 플러그인 검색 및 설치 - 블로그에 글을 쓰려고 피그마를 켰는데 또 새로운 기능이 나왔습니다. - 그래서 예전에 플러그인을 설치하는 방법과 새로 나온 방법을 비교해서 보여드리겠습니다. 1) 과거(2022년 6월 2x일 이전의 플러그인 설치) - 피그마아이콘(메뉴) - [Plugins] - [Browse plugins in Community]를 눌러서 플러그인을 찾았습니다. - 혹은 그 위에 있는 [Plugins] - [Manage plugins]를 눌러서 사용했습니다. 2) 현재(2022년 6월 2x일 이후의 플러그인 설치) - 현재는 새로운 툴이 생겼습니다. - 아래 파랗게 체크되어 있는 [Re.. 이전 1 2 3 4 5 다음
