티스토리

오쌤의 니가스터디

검색하기

블로그 홈

오쌤의 니가스터디

ossam5.tistory.com/m

웹프론트엔드의 모든것

구독자: 75

방명록 방문하기

728x90

반응형

주요 글 목록

[1116개강반] 피그마 소스 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 11. 23.
[1031개강반소스] - 피그마소스 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 11. 5.
[피그마강좌] 기초테스트!! - 피그마 좀 해봤다면 드루와~~ 안녕하세요. 오쌤입니다. 피그마 기초 테스트를 만들어봤습니다. 나는 과연 피그마 공부를 잘하였는가? 아래 주소를 클릭하면 됩니다. https://forms.gle/QmCrxe7N1YVkuVfo6 오쌤의 니가스터디 - 피그마기초 평가 오쌤의 니가스터디의 피그마 기초강좌를 들으신 분들은 한번 풀어보세요. 점수가 60점이하이면 다시 복습하시길 추천드립니다. 구독자 분들이 아니여도 괜찮으니 한번 풀어보시길 바랍니다. 총 docs.google.com 피그마 기초 부분의 테스트를 만들어 봤습니다. 피그마에서 2023년에 새로 나온 Variable, DevMode 등은 제외했습니다. 오쌤의 니가스터디 피그마 기조강좌를 들은 분들이 테스트하면 좋습니다. 시험은 객관식으로 20문제입니다. 총점 100점, 개당 5점입니다.. 공감수 0 댓글수 3 2023. 12. 19.
[피그마플러그인강좌] #11. Remove BG - 피그마사진배경지우기 - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Remove BG를 보도록 하겠습니다. Remove BG는 사진의 일부 픽셀을 선택하여 지워주는 플러그인입니다. Step01. 플러그인을 먼저 찾고, 주소에 들어가서 회원가입을 합니다. 회원가입을 다했으면 다시 플러그인에 들어가서 [Set API Key]를 등록을 해줍니다. 눌렀을 때 나오는 사이트에 가면 api를 받아 올 수 있습니다. 그걸 입력창에 붙여 넣고 [save] 버튼을 누릅니다. Step02. 배경을 없애줄 사진을 먼저 꺼내 줍니다. 사진 선택이 안되면 실행이 안됩니다. Step03. 사진을 잡고 다시 플러그인을 엽니다. 이번에는 [Remove BG]의 [Run]을 누르면 바로 실행됩니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확.. 공감수 1 댓글수 1 2023. 12. 17.
[피그마플러그인강좌] #10. Skew - 피그마컨텐츠기울이기 - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Skew를 보도록 하겠습니다. Skew는 피그마에 없는 컨텐츠를 기울여주는 플러그인입니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 [Skew]를 클릭클릭~! Step02. 적용할 오브젝트를 선택!!! 이미지, 도형, 텍스트 등 모두 가능합니다. Step03. 수평, 수직선택 후 각도를 설정해주세요. Horizontal이 수평이고, Vertical이 수직입니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/BH5bjKLRmPE 유튜브 검색창에 오쌤의 니가스터디라고 검색해 주세요. 여러분들의 구독과 좋아요는 영상 제작에 큰 힘이 됩니다. 공감수 0 댓글수 1 2023. 11. 14.
[피그마플러그인강좌] #09. Fonts Changer - 폰트 찾아 변경하기 - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Fonts Changer를 보도록 하겠습니다. Fonts Changer는 프레임에 있는 폰트를 다른 폰트로 한 번에 바꿔 줍니다. Step01. 일단 폰트를 찾을 프레임을 선택합니다. 플러그인을 먼저 열면 처리가 안되므로 주의해 주세요. Step02. 이제 플러그인을 찾습니다. Resource 툴을 클릭클릭~! Step03. 바꿀 폰트를 선택하고, 새로운 폰트를 찾아 변경합니다. 왼쪽이 기존 폰트이고, 오른쪽이 새로운 폰트입니다. Replace버튼을 눌러 주세요. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/nA_wxRBru7o 유튜브 검색창에 오쌤의 니가스.. 공감수 0 댓글수 2 2023. 11. 5.
[피그마플러그인강좌] #08. Table Creator - 피그마로 테이블디자인하기 - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Table Creator를 보도록 하겠습니다. Table Creator는 컴포넌트를 응용해서 테이블(표)을 쉽게 제작해 주는 플러그인입니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 새창에서 [New Template]를 눌러 줍니다. [Import Template]는 다른 파일의 테이블을 불러오게 해 줍니다. Step03. 행과 열의 개수를 선택합니다. 숫자로 적어도 되고, 드래그해도 됩니다. [Create Table]버튼을 누르면 새로운 페이지에 나옵니다. 그때 나온 테이블만 옮겨 오면 됩니다. 응용해서 아래와 같은 예쁜 표도 만들 수 있습니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주.. 공감수 0 댓글수 1 2023. 11. 3.
[피그마플러그인강좌] #07. Auto Flow - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Auto Flow을 보도록 하겠습니다. Auto Flow는 도형이나 컨텐츠 간의 연결선을 쉽게 만들어 줍니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 연결선 굵기, 끝모양을 지정해줍니다. 선색, 선스타일, 모서리뭉글기도 설정가능합니다. Step03. 도형과 도형 사이를 연결해주세요. 첫번째 도형 잡고, [Shift]를 누르고 두번째 도형을 선택하면 됩니다. 응용해서 아래와 같은 조직도도 만들 수 있습니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/YLGgMRaKzjQ 유튜브 검색창에 오쌤의 니가스터디라고 .. 공감수 0 댓글수 0 2023. 10. 31.
[피그마플러그인강좌] #06. Lorem Ipsum - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Lorem Ipsum을 보도록 하겠습니다. Lorem Ipsum은 의미 없는 텍스트를 랜덤 하게 피그마 콘텐츠로 불러옵니다. 한글 입숨라는 플러그인도 있으니 검색해서 사용해 보세요. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 텍스트툴로 범위를 지정합니다. 글자크기, 색상, 글꼴 등 미리 지정하면 편해요. Step03. 몇 문장을 넣을지 숫자로 입력하세요. [Auto-generates]버튼을 누르면 범위에 맞게 자동으로 채워줘요! 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/bphc39L5Djg 유료 강좌니 유튜브.. 공감수 0 댓글수 1 2023. 10. 30.
[피그마플러그인강좌] #05. Contents Reel - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Contents Reel을 보도록 하겠습니다. Contents Reel은 텍스트나 이미지 등의 콘텐츠를 랜덤하게 불러오는 피그마 플러그인입니다. 한글 더미텍스트라는 플러그인도 있으니 검색해서 사용해보세요. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 큰 주제인 텍스트나 이미지를 선택해줍니다. 그리고 나서 세부적인 주제를 선택하면 바뀝니다. Step03. 만약에 세부 주제에 원하는 것이 없으면 만들 수 있습니다. 구글아이디로 Contents Reel의 회원가입을 하면 됩니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu... 공감수 0 댓글수 2 2023. 10. 27.
[피그마플러그인강좌] #04. Iconify - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Iconify를 보도록 하겠습니다. Iconify는 무료아이콘을 제공하는 피그마 플러그인입니다. 원래는 사이트인데, 플러그인도 있는 거죠. 이것 외에도 많은 아이콘 플러그인이 있으니 한번 검색해 보는 것도 좋겠습니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 검색창에 원하는 아이콘을 검색합니다. 아이콘은 영문으로 검색해야 나옵니다. 이번 기회에 영어공부를?!? Step03. 옵션들을 설정 후 [import icon]버튼을 눌러 줍니다. 옵션은 색상, 크기, 적용할 프레임 등을 지정해주면 됩니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. .. 공감수 0 댓글수 0 2023. 10. 26.
[피그마플러그인강좌] #03. Pixabay와 Unsplash - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Pixabay와 Unsplash를 보도록 하겠습니다. Pixabay와 Unsplash는 무료이미지를 제공하는 피그마 플러그인입니다. 원래는 사이트인데, 플러그인도 있는 거죠. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! 두 플러그인 모두 사용법은 같아서 pixabay만 정리했습니다. Step02. 도형에 바로 마스크 처리합니다. 그냥 사진선택하면 프레임 밖에 나가니까 도형먼저 그리고 사진을 선택해 주세요. Step03. 여러 도형을 잡고 선택하면 한 번에 이미지 들어갑니다. 편리하죠? 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해 주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be.. 공감수 0 댓글수 2 2023. 10. 23.
[Figma] 29강 Position Fixed와 ScrollTo기능 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브도 있어요! https://youtu.be/WsT01xGUFVY - 유튜브 멤버십 중급 강좌 이상을 신청해야 볼 수 있습니다! 1. Position Fixed - 사이트들을 보다 보면 헤더영역이 고정되었다거나, 스크롤탑버튼이 따라다니는 것을 볼 수 있습니다. - HTML/CSS에서 그 기능은 position: fixed; 를 통해 사용합니다. - position관련 기능을 피그마도 지원하고 있습니다. - 프로토타입 패널에 가면 [Scroll behavior]의 [Position] 기능으로 있습니다. Scroll width parent : 기본 값으로 프로토타입 실행에서 스크롤 이동 시 자신의 위치에 고정된 상태를 의미합니다. Fixed : 프로토타입 실행에서 스크롤 이동 시 화면.. 공감수 0 댓글수 0 2023. 10. 22.
[피그마플러그인강좌] #02. 써큘라 텍스트(Circular Text) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 강좌는 피그마 플러그인 중 Circular Text를 보도록 하겠습니다. Circular Text는 텍스트를 원형으로 돌려 줍니다. 원래 일러스트레이터나 포토샵에는 있는 기능인데 피그마에서는 이렇게 플러그인을 설치해야 합니다. Step01. 플러그인을 먼저 찾습니다. Resource 툴을 클릭클릭~! Step02. 창에 원하는 글자를 작성 각도를 지정하면 원이나 반원도 가능! Step03. 프레임 안으로 끌어갖고 오기 보통 프레임 밖에 생성되므로 안으로 끌어 오기! 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해주세요. 아래 주소에 들어가면 자세한 영상이 있습니다. https://youtu.be/iN8h9QszRiQ 유튜브 검색창에 오쌤의 니가스터디라고 검색해주세요. 여러.. 공감수 0 댓글수 2 2023. 10. 19.
[피그마플러그인강좌] #01. 구글시트싱크(Google Sheet Sync) - 오쌤의 니가스터디 안녕하세요. 오쌤입니다. 이번 포스트에서는 피그마 플러그인 중 구글시트싱크를 보도록 할게요. 구글시트싱크 (Google Sheet Sync)는 구글시트 데이터를 피그마에 적용시켜 줍니다. Step01. 구글시트에 데이터를 작성합니다. 표 제목은 반드시 굵게 하는 것이 뽀인트~! Step02. 원본 컴포넌트 제작 데이터가 들어갈 레이어명앞에는 #붙이기 Step03. 구글시트주소를 복사해와서 입력창에 붙여넣고 [Fetch & Sync]버튼눌러 적용합니다. 자세한 내용은 오쌤의 니가스터디 유튜브에서 확인해주세요. 1강부터 5강까지는 무료, 그 이후는 유료 강좌입니다. https://youtu.be/7hTH891OvTU 공감수 0 댓글수 0 2023. 10. 18.
[Figma] 28강 Text Ellipsis(...생략기호효과) ** 자세한 강의는 유튜브 쇼츠로도 있어요! https://youtube.com/shorts/hbObYS83y9o 1. 글자 생략기호 처리하기 - 디자인을 하다 보면 텍스트 상자의 크기를 지정하고, 그 범위를 벗어나면 생략기호를 줘야 하는 경우가 생깁니다. - 포토샵에서 디자인할 때는 일부러 그냥 박스에 ...을 줘야 하지만 피그마는 기능으로 있습니다. - 추후 구글시트싱크(Google Sheet Sync)를 통해 글자를 한 번에 적용할 때 알아서 범위를 넘어가지 않게도 해줍니다. - 위와 같이 5줄만 표시할 수 있는 텍스트 상자 범위인데, 글자가 넘어갔다고 보겠습니다. 1) 디자인패널의 Text 추가 옵션 누르기 - 빨갛게 체크한 [...]아이콘을 클릭해 줍니다. 2) 추가 옵션 창에서 글자 줄임 효과.. 공감수 0 댓글수 0 2023. 10. 17.
[Figma] 26강 하이퍼링크 넣기 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 쇼츠로도 있어요! https://youtube.com/shorts/e4GiQg7fhQw - 이번 강좌에서는 피그마에서 글자에 링크 거는 것을 보도록 하겠습니다. - 디자인에서 해당 글자를 누르면 인터넷 페이지가 열립니다. 1. 하이퍼링크 걸기 - 프레임을 하나 제작하고 글자를 작성 후 선택을 합니다. - 그럼 위와 같은 링크 아이콘이 뜹니다. - 마우스 올리면 Create link라고 툴팁도 뜨죠? - 그 아이콘을 클릭해줍니다. - 누르면 URL을 쓰라는 툴팁이 뜹니다. - 그리고 커서가 깜박 깜빡이죠? 이때 여기에 주소를 씁니다. - 네이버 주소를 작성해 봤습니다. - 아래 주소를 복사해서 붙여보세요. http://naver.com - 그러고 나서 엔터를 칩니다. - 링크가 .. 공감수 1 댓글수 2 2023. 10. 4.
피그마 유료 결제 취소 - plan 변경법 1. 우선 팀을 선택합니다. 2. 팀에서 [Go to admin view]를 눌러 줍니다. 3. setting에 들어가서 [cancle plan]을 누릅니다. 4. 그럼 창이 뜨면서 취소 이유를 체크합니다. - 저는 비싸다고 체크를 했습니다. 다른 이유가 있다면 선택해주세요. - 맨 하단은 취소 관련으로 피그마에서 전화한다는 내용인데 체크하지 말고 [continue]버튼을 눌러 줍니다. 5. [cancle plan]버튼을 눌러 줍니다. 취소하기로 선택하시면 2023년 9월 23일 현재 청구 기간이 끝나면 ossam이 무료 스타터 플랜으로 다운그레이드됩니다. ㅜ_ㅠ 오늘 결제가 되었는데, 그래도 한달 더 열심히 써봐야겠습니다. 공감수 0 댓글수 0 2023. 8. 23.
[포토샵강좌] 7강 포토샵 홈화면 최근 파일 제거하기 - 이번에는 포토샵 첫 화면에 매번 뜨는 홈화면 최근 파일을 삭제하는 방법을 보도록 하겠습니다. - 있으면 편한 기능이기도 하지만 없애고 싶을 때도 있죠? - 저도 자주 잊는 파트여서 블로그에 글을 써보고자 합니다. ## 포토샵 홈화면 ## 홈화면에 보일 파일 개수 지정하기 - 이건 포토샵의 환경설정에 있습니다. 1. [Ctrl]+[K] 단축키 눌러서 찾아주세요. 2. [Edit]메뉴-[Preference]-[General]을 눌러도 됩니다. - 그리고 환경 설정에서 [File Handiling] 누릅니다. 한국어는 [파일 처리]일 거예요. - 그 화면의 맨 마지막에 [Recent File List Contains]가 원래 20개로 되어 있는데 0개로 바꾸면 리스트가 삭제됩니다. 공감수 1 댓글수 0 2023. 1. 10.
[Figma강좌] 반응형웹 UI/UX 포트폴리오 제작 - 회원전용영상 안녕하세요~ 오쌤입니다. 제가 유튜브에 피그마 반응형웹 UI/UX 포트폴리오 제작 영상을 올리고 있습니다. 이 영상들은 회원전용영상입니다. 난이도가 좀 있는 스페셜강좌는 회원전용으로 올리고 있습니다. 많은 관심 부탁드릴게요! 많관부😄 자세한 커리큘럼 및 제작 안내영상은 하단의 영상을 보세요. https://youtu.be/KlNB8An6asY 공감수 0 댓글수 2 2022. 12. 8.
[Figma] 25강 캐러셀 카드(Carousel Card) - 오쌤의 니가스터디 ** 강의는 유튜브 영상으로 제공됩니다. https://youtu.be/0rDXu2RuWvg ** 오늘은 캐러셀 디자인을 해보도록 하겠습니다. 캐러셀(Carousel)은 원래 수하물 컨베이어 벨트 같은 것을 의미하는데 웹앱 UI/UX 디자인에서는 회전되며 돌아가는 슬라이드들을 캐러셀이라고 부릅니다. - 위에 보이는 것 처럼 스와이프(Swipe) 제스처를 사용해서 다른 슬라이드를 보이게 해주는 것을 의미합니다. - 캐러셀은 자동으로 움직일 수도, 제스쳐에 의해서 움직일 수도 있습니다. ** 완성 이미지 - 이번 강좌에서 저와 함께 만들어 볼 예제입니다. - 유럽여행 Steady Seller 상품들을 캐러셀 카드로 같이 만들어 봅시다!! ** 필요한 이미지 소스 출처 : https://pixabay.com/.. 공감수 3 댓글수 2 2022. 9. 29.
[Figma강좌아님] Adobe, Figma인수😢 - 200억달러 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/pY5n6INnuv0 어도비가 피그마 인수했다고? 진짜인 거야??? 어도비가 피그마 인수한다규? https://www.hankyung.com/international/article/202209153662i 어도비, 디자인 소프트웨어 '피그마' 200억달러에 인수 어도비, 디자인 소프트웨어 '피그마' 200억달러에 인수, 노유정 기자, 국제 www.hankyung.com - 진짜군요..... - 과연 피그마는 무료로 남을 수 있을 것인가? - XD로 병합돼서 영원히 사라지는 것은 아닐지? - 설마 인디자인처럼 방치하고 버리는 건 아니겠죠? - 기사에서는 일단 인수 후에도 XD에 통합되지 않고, 계속 개발될 것이며, 대신.. 공감수 6 댓글수 2 2022. 9. 16.
[Figma] 24강 코드 Inspect패널과 Zeplin - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://youtu.be/NYWR4G5OtZA ** 이번 강좌에서는 디자인이 다된 파일을 개발자에게 넘길 때 유용한 작업과 코드 Inspect패널사용법에 대해 알아보도록 하겠습니다. 그와 관련된 유용한 플러그인인 zeplin과 clean document 플러그인도 배워보도록 하겠습니다. 1. 코드 변환 전 체크 요소 - 디자인이 너무 중첩되었거나, 레이어에 이름을 작성하지 않았거나 하면 코드로 변환 시 의도치 않게 나올 수 있습니다. - 그래서 미리 여러 가지를 체크하고 개발자에게 넘기면 좋을 듯 합니다. 1) 레이어 정리 - 일단 모든 레이어에는 이름을 잘 지정해주세요. 혹시 vector로 빼야 하는 이름이 동일한 경우 [rename it]플러그인을.. 공감수 1 댓글수 0 2022. 9. 13.
[Figma] 23강 Variants를 이용한 탭바컨텐츠 - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다. https://www.youtube.com/watch?v=DlsvQKry-cc ** 이번 강좌에서는 탭바컨텐츠를 제작해보겠습니다. - Variants기능을 이용하면 탭바버튼을 얼마나 쉽게 제작할 수 있는지 보도록 하겠습니다. - 그리고 프로토타입 기능을 이용해서 실제 탭버튼 클릭시 화면 전환도 해보도록 하겠습니다. ** 완성 예시 ** 사용될 이미지 다운받기 출처 : https://pixabay.com/ko/ - 놀라운 무료 이미지 pixabay - 위의 svg파일은 버튼에 들어갈 화살표입니다. ** 사용될 텍스트 이태리남부 환상투어 투어코스 : 로마출발 → 폼페이 → 소렌토전망대 → 포지타노 → 로마도착 여행일정 : 원데이 - 투어날짜는 자세히보기를 눌러.. 공감수 1 댓글수 2 2022. 8. 29.
[Figma] 22강 피그마파일공유 및 코멘트툴 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 제공됩니다. https://youtu.be/-WsXLsBYKcs 1. 피그마 파일 공유 - Share - 피그마는 기획자, 디자이너, 개발자가 프로젝트를 편하게 공유하기 위해 고안된 프로그램입니다. - 협업 프로그램으로 개발된 프로토타입툴이기 때문에 공유 기능이 굉장히 잘 되어 있습니다. - 그래서 이번 강좌에서 공유기능에 대해서 알아보도록 하겠습니다. 1) [Share]버튼 누르기 - 툴박스 바에 오른쪽에 보면 파란색으로 [Share]버튼이 있습니다. - [Share]버튼을 누르면 공유관련 옵션팝업이 대화상자로 뜹니다. 2) [Share] 공유옵션 팝업 - [Invite]라는 탭으로 초대할 수 있는 파트가 뜨는 것이 보입니다. - 옆에는 [Publish to Comm.. 공감수 0 댓글수 4 2022. 8. 4.
[Figma] 21강 이미지(소스)내보내기(feat. 디자인에셋내보내기) - 오쌤의 니가스터디 ** 자세한 강의는 유튜브 영상으로 제공됩니다.https://youtu.be/rcmB6XMZVrc - 이번 강좌에서는 이미지(소스) 내보내는 방법을 알아보겠습니다.- XD에서는 디자인에셋 내보내기라는 용어를 써서 제목에 feat로 달아봤습니다.- 피그마 역시 XD처럼 내보내는 것이 아주 편리합니다.- 모바일에 대응한 1x, 2x, 3x로 내보낼 수도 있고, 내보내기를 체크한 것만 내보낼 수도 있습니다.- 그리고 원래 svg를 이용했거나, 벡터 혹은 직접 제작한 것은 SVG파일로도 내보낼 수 있습니다. 1. 해상도 설명 - 1x, 2x, 3x???- 이제 내보내기(Export) 수업을 하게 되는데, 처음부터 1x, 2x, 3x가 나옵니다.- 이건 애플 즉 아이폰에서의 해상도관련 용.. 공감수 3 댓글수 8 2022. 7. 20.
[Figma] 20강 Rename It 플러그인 - 오쌤의 니가스터디 1. Rename It 설명 - Figma 파일을 체계적으로 유지하고 레이어와 프레임의 이름을 일괄적으로 변경하는 플러그인 입니다. - 특히, 다중레이어 선택으로 한번에 여러 레이어 이름을 바꿔줍니다. - 그리고 알아서 레이어 뒤에 숫자도 붙여주는 좋은 기능을 가지고 있습니다. - 이프로그래은 원래 맥컴퓨터에서 사용되는 스케치라는 프로그램에도 있던 플러그인인데 자주 사용되었던 플러그인입니다. - 이 플러그인은 [19강 오쌤PICK! 플러그인TOP10] 게시물에서도 소개했었는데, 이번 강좌에서는 좀 더 디테일하게 알아보도록 하겠습니다. 1) 키워드 코드 표 - 아래서 예시를 보여드리기 전에 키워드를 미리 정리해보도록 하겠습니다. 타입 키워드 설명 Sequence (문장별정리) Keyword%N 키워드명 뒤.. 공감수 2 댓글수 0 2022. 7. 18.
[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.. 공감수 7 댓글수 4 2022. 6. 29.
[Figma] 18강 Prototype - Dropdown Menu - 오쌤의 니가스터디 ** 자세한 영상은 유튜브로 제공됩니다. https://youtu.be/QCFDEoMLv3g ** 사용될 이미지 출처 : https://pixabay.com/ko/photos/%ec%82%ac%eb%ac%b4%ec%8b%a4-%ec%9d%bc%ed%95%98%eb%8b%a4-%ec%b1%85%ec%83%81-%ec%bb%b4%ed%93%a8%ed%84%b0-932926/ ** 완성 예시 ** 완성파일은 [피그마 커뮤니티]에서 찾아보세요. 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) [예제12] Dropdown Menu이미지을 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com.. 공감수 0 댓글수 10 2022. 6. 16.
[Figma] 17강 prototype - HOVER이미지 - 오쌤의 니가스터디 ** 자세한 영상은 유튜브 영상으로 제공됩니다. https://youtu.be/71a76v5c884 ** 사용될 이미지 - 출처 : https://pixabay.com/ ** 완성파일은 [피그마 커뮤니티]에서 찾아보세요. 1) 피그마 앱에서 커뮤니티를 누릅니다. 2) 검색창에 [ossam]이라고 검색합니다. 3) [예제11] HOVER이미지을 더블클릭합니다. 4) [duplicate]버튼을 눌러 개인 작업창으로 복제해옵니다. ** 피그마웹에서 찾는 법 - [figma.com/@ossam]을 검색하면 찾을 수 있습니다. 검색이 잘되는 것을 확인할 수 있습니다. 공감수 0 댓글수 5 2022. 6. 10.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.