Видео

가로로 움직이는 모션은 스크롤만해도 움직이나요? 저는 드레그만 적용되던데..

혹시 아이폰 폰트 어디서 다운 받는 지 물어봐도 될까요?😂 이거 못찾아서 따라하기 힘드네요 ㅠ

혹시 한글 키보드는 어떻게 구현해야 할까요

최소 픽셀을 320px하는 이유가 있나요? 영상에 나온 사이즈랑 다른 사이즈로 하니 적용이 안돼요ㅠㅠ

카드칩은어떻게 만드나용?

소컷(??+D)에는 이모티콘이 뭘 의미 하는건가요? 윈도우인가요?

감사합니다! 근데 이거 다시 역방향으로도 드래그는 불가능한건가요..?

안녕하세요. 영상 보고 피그마 애니메이션 공부하고 있습니다. 근데 다 똑같이 하고 있는데 한가지 다른 점이 있어서요. 시올라님이 하신 것처럼 하트 가운데를 기점으로 모션이 적용되는 게 아니라 왼쪽 위를 기준으로 움직입니다. 이건 어떻게 해야 바꿀 수 있나요?

이거 결제해야 할 수 있는지 아니면 무료 버전으로도 할 수 있는지 궁금합니다.

@00:40

글자는 안되나요?

개념설명해주실 수 있나욥? 열심히 찾아보고 있는데, 잘 모르겠네요 :ㅠ

우오ㅓ 너무 유용해요!!

와 꿀기능들 다모여있네 감사합니다!

Css 업그레이드 버전같은건가요?? 신기하네요

이렇게만들고 GIF나 MP4로 익스포트가 가능한가요??

안녕하세요, 그대로 따라해봤는데 카드 회전이 안되는데 무엇이 문제일까요??

넘 재밌게 잘 보고 있어요!!

제목이랑 내용 때문에 가려져서 너무 불편하고 빨라요

피그마 Variables 이용해서 똑똑하게 디자인하기⚡️ ruclips.net/user/shortsTLQg0JjSS44?feature=share

💡진짜 매일 쓰는 피그마 단축키 5가지 - Part 1 보러가기 ruclips.net/user/shortsTX2PKxZO8f8?feature=share

모르면 손해인 피그마 Variables 배우기 ⚡️ ruclips.net/user/shortsTLQg0JjSS44?feature=share

⚡️피그마 variables 시리즈는 더 쉬운 이해를 위해 하나의 예제로 단계별로 나누어 총 3편 준비했습니다! 01 기초 편 - variable의 기본 기능 및 쓰임 ruclips.net/user/shortsTLQg0JjSS44?feature=share 02 조건 편 - variable을 이용한 프로토타입 기능 소개 ruclips.net/user/shortsrhVZNbcdHg0?feature=share 03 색상 편 - variable의 기초적인 다른 활용 방법 ruclips.net/user/shortsfZQ5fJutAhw?feature=share 다방면으로 강력한 피그마 기능이라 꼭 한번 따라 해보세요!

⚡️피그마 variables 시리즈는 더 쉬운 이해를 위해 하나의 예제로 단계별로 나누어 총 3편 준비했습니다! 01 기초 편 - variable의 기본 기능 및 쓰임 ruclips.net/user/shortsTLQg0JjSS44?feature=share 02 조건 편 - variable을 이용한 프로토타입 기능 소개 ruclips.net/user/shortsrhVZNbcdHg0?feature=share 03 색상 편 - variable의 기초적인 다른 활용 방법 ruclips.net/user/shortsfZQ5fJutAhw?feature=share 다방면으로 강력한 피그마 기능이라 꼭 한번 따라 해보세요!

⚡️피그마 variables 시리즈는 더 쉬운 이해를 위해 하나의 예제로 단계별로 나누어 총 3편 준비했습니다! 01 기초 편 - variable의 기본 기능 및 쓰임 ruclips.net/user/shortsTLQg0JjSS44?feature=share 02 조건 편 - variable을 이용한 프로토타입 기능 소개 ruclips.net/user/shortsrhVZNbcdHg0?feature=share 03 색상 편 - variable의 기초적인 다른 활용 방법 ruclips.net/user/shortsfZQ5fJutAhw?feature=share 다방면으로 강력한 피그마 기능이라 꼭 한번 따라 해보세요!

이해가 안된 부분들이 해소 됐어요!! 감사합니다~~

디자인 시간 반으로 줄여줄 피그마 단축키 5가지 🤩 ruclips.net/user/shortsTX2PKxZO8f8?feature=share

드디어 나온 피그마 애니메이션 Sticky scroll! ruclips.net/user/shortsOwrqL02Srcw?feature=share

우와.. 피그마 초보인데 너무 멋있으시네용.. 😮

완전 쉬워진 피그마 반응형 레이아웃 🚀 ruclips.net/user/shortsB-nb7e0c2JU?feature=share

좋은 피그마 정보 너무 감사합니다. :)

늘 감사히 보고 있습니다. 제가 피그마 관련 영상을 많이 보는데, 시올라님 영상이 넘사벽입니다. 일목요연하고 이해도 잘 됩니다. 쇼츠도 좋지만, 영상을 길게도 해 주시고, 또 차근차근히 설명해 주시면 더할 나위 없을 것 같아요. 분명히 잘 될 겁니다!

완전 쉬워진 피그마 반응형 레이아웃 ✨ (2023 피그마 업데이트) ruclips.net/user/shortsB-nb7e0c2JU?feature=share

피그마로 구글 서치 바 애니메이션 만들기 🔎 ruclips.net/user/shorts3_cI6cTiVMs?feature=share

피그마로 스와이핑 애니메이션 만드는 법 보러가기 🔎 ruclips.net/user/shorts8ogTotwbB48?feature=share

피그마로 로딩 바 애니메이션 만드는 법 보러 가기 🌈 ruclips.net/user/shortsbqLRV9Iy0Fg?feature=share

피그마 단축키 하나로 크기별 컴포넌트 만들기 ⚡ 1. 프레임 선택하고 단축키 K 누르기 2. 스케일 고르면 끝

피그마로 hover 애니메이션 만들기 🏠 1. 코너가 둥근 사각형 프레임 만들고 이미지까지 입혀주기 2. 그라데이션으로 위는 투명 아래는 어둡게 만든 뒤 이미지 위에 제목 배치하기 - 메인 카드 완성 3. 좀 더 작은 사각형 프레임 만들고 한 코너만 둥글게 해준 뒤 내용 채워주기 4. 배경색 투명도 살짝 낮춰주고 Effect에서 Background blur 선택해 주기 - hover 프레임 완성 5. 완성된 프레임은 메인 카드 안에 넣어준 뒤 밑으로 내려 숨겨주기 (숏컷: ⌘ + ⇧ + ▼) 6. 메인 카드 복붙해주고 이번엔 프레임을 위로 올려 hover 했을 때 디자인 만들어주기 (숏컷: ⌘ + ⇧ + ▲) 7. 프로토타입 들어가서 카드 서로 연결해주고 While hovering, Smart animate, custom 설정하면 끝 :-)

피그마 로딩 페이지 만들기 파트1 - 로딩 바 🌈 1. 긴 사각형 프레임을 만들어 준다 2. 코너 둥글게 해주고 색은 #333333 로 변경해 준다 -> 오리지널 프레임 3. 프레임 복붙 후 길이를 3배 늘려준 뒤 그라데이션 색을 입혀 준다 -> 로딩 바 4. 끝부분 위에 폭이 작은 사각형을 만들고 코너는 똑같이 둥글게 바꿔 준다 5. 로딩 바 뒤로 사각형을 배치하고 (숏컷: [ ) 마스크를 적용해 준다 6. 마스크 입혀진 로딩 바를 오리지널 프레임 앞쪽에 넣어준다 7. 로딩 바를 클릭해서 마스크 밖으로 안 보이게 밀어 준다 (숏컷: ⌘ + ⇧ + ◄ ) 8. 프레임을 복붙해 주고 마스크 입혀진 사각형 길이를 1/3로 늘리고 로딩 바가 보이게 빼준다 - 색 순서는 상관 x ( 숏컷: ⌘ + ⇧ + ►) 9. 또 프레임을 복붙해 주고 사각형을 2/3로 늘린 뒤 로딩 바가 보이게 빼준다 ( 숏컷: ⌘ + ⇧ + ►) 10. 마지막으로 프레임을 또 복붙해 주고 끝까지 사각형을 늘려주고 로딩 바를 빼준다 ( 숏컷: ⌘ + ⇧ + ►) 11. 모든 프레임을 선택 하고 상단 Create component set 클릭 12. 프로토타입에 들아가 순서대로 After delay 1ms, smart animate, linear 1500ms 로 모두 동일하게 설정 13. 마지막에서 원본만 smart animate가 아닌 instant로 설정 14. UI에 오리지널 프레임을 배치해주고 힛 댓 플레이 🥳

피그마로 곡선 캐러셀 만들기 🌵 1. 사각형 프레임을 만들어서 여러 개 복사해 준다 2. 모든 프레임에 이미지를 입혀준다 3. 프레임 전체 선택 후 프레임을 다시 만들어 준다 (프레임 숏컷: ⇧ + A) 4. 미리 만들어둔 UI에 프레임을 배치해 준다 5. 타원 도형을 만들어 프레임 위아래 곡선 모양을 만들어준다 (타원 숏컷: O) 6. 프레임을 UI 폭에 맞게 줄여준다 7. 프로토타입에 들어가 프레임 클릭해 주고 스크롤 옵션에 Horizontal 선택해 준다 (Overflow: Horizontal)

피그마로 애플뮤직 스와이프 인터랙션 만들기 🎧 1. 미리 만들어둔 UI 디자인을 Auto layout 에서 Frame 으로 변경해 준다 (마우스 오른쪽 클릭 후 Frame selection 클릭) 2. 스와이프 하면 나오는 아이콘들을 Frame 안에 넣어준다 3. 각 아이콘을 왼쪽 오른쪽 맞는 위치에 배치하고 맨 뒤로 숨겨준다 (숏컷: [ ) 4. Frame을 복사하고 왼쪽 스와이프 상태로 재배치해 준다 (숏컷: ⌘ + ⇧ + ◄ ) 5. 한 번 더 Frame 복사하고 이번엔 오른쪽 스와이프 상태로 재배치해 준다 ( 숏컷: ⌘ + ⇧ + ►) 6. Frame 3개를 전체 선택하고 상단 패널에서 Create component set를 클릭해 준다 7. 컴포넌트 안에 ‘Body’ 를 클릭하고 다음 Frame과 프로토타이핑을 연결해 준다 8. 세팅 값은 On drag, Smart animate, Gentle 9. 4개 프레임 모두 적용 적용시켜준다 (기본에서 양쪽 스와이프, 양쪽 스와이프에서 기본으로) 10. 원하는 UI 만큼 내용 바꿔주고 와이어프레임에 적용시키면 끝!

피그마 파일 정리하는 법 pt.1 📂 1. 버전 - v1.0 / v1.1 / v1.2 2. 디바이스 - 모바일 / 태블릿 / 데스크탑 3. 작업 단계 - 스케치 / 와이어프레임 / 목업 4. 컴포넌트 - 버튼 / 카드 / 드롭다운

피그마로 햄버거 메뉴 인터랙션 만들기 🍔 1. 클릭 후 펜 툴로 햄버거 아이콘 만들기 2. 위 라인은 반으로 줄여주고 마지막 라인은 2/3로 줄이기 3. 아이콘 전체 선택하고 프레임 생성하기 - 숏컷: ⇧ + A 4. 바로 프레임 한 번 더 생성하기 (총 두 번) - 숏컷: ⇧ + A 5. 아이콘 프레임 복사하고 X 아이콘으로 모양 바꿔주기 6. 두 프레임 선택 후 상단 패널에 Creat component set 클릭해 주기 7. 미리 만들어둔 UI에 햄버거 컴포넌트 배치해 주고 와이어프레임 복사해 주기 8. 복사한 와이어프레임에서 X 컴포넌트로 바꿔주고 내용 채워주기 9. 프로토타입 가서 햄버거 아이콘 + 다음 프레임 이어주고 스마트애니메이션 설정 10. 이번엔 반대로 X 아이콘 + 첫 프레임 이어주고 스마트애니메이션 설정 11. 힛 더 플레이하면 끝 🎉

피그마로 앱 스토어 인터랙션 만들기 🎮 1. 앱 리스트를 포함한 UI를 카드 사이즈로 줄여주기 (Clip content 체크한 채로) 2. 프레임에 카드 배치해서 클릭 전 와이어프레임 만들기 3. 프레임 복사해 주고 카드 클릭 후의 UI로 바꿔주기 4. Close 아이콘도 만들어 배치해 주기 5. 프로토타입에서 카드 + 클릭 후 프레임 이어주고 스마트애니메이션 설정하기 6. 반대로 X 아이콘 + 클릭 전 프레임 이어주고 스마트애니메이션 설정하기

피그마로 텍스트 애니메이션 만들기 🪄 1. 텍스트 입력해 주기 - 숏컷: T 2. 프레임 생성해 주기 - 숏컷: ⇧ + A 3. (프레임이 아닌) 텍스트 클릭하고 오른쪽 패널에 있는 Absolute position, Clip content 클릭 4. 같은 프레임 복사해 주기 5. 텍스트 밑으로 오버플로우 해서 숨겨주기 - 숏컷: ⌘ + ⇧ + ▼ 6. 두 프레임 선택 후, 상단 패널에 Create component set 클릭해주기 7. 프로토타입으로 넘어가서 프레임끼리 연결해 주고 설정값 맞춰주기: After delay 350ms / Smart animation / Easy in 8. 만들어둔 UI에 텍스트를 배치해 준 뒤 오버플로우 (밑에 숨긴 텍스트) 버전으로 바꿔주기 끝🎉

피그마로 인스타그램 좋아요 애니메이션 만들기 ❤️ 1. 기본 하트 아이콘, 더 큰 빨간색 하트, 기본 크기의 빨간색 하트, 가장 작은 하트 총 4개 아이콘 준비 2. 아이콘 전체 선택 후, Create component set 클릭 3. 프로토타입 들어가서 1번 2번 아이콘 이어주고 On click / Smart animate / Custom Spring 25ms 설정 4. 2번 3번 아이콘 이어주고 After delay 1ms / Custom Spring 500ms 변경 5. 3번 4번 아이콘 이어주고 On click / Custom Spring 25ms로 변경 6. 마지막으로 4번 1번 아이콘 이어주고 After delay 1ms / Custom Spring 500ms로 변경 끝 :-)

디자이너 눈 돌아가는 TOP3 AI 툴 소개 🤪 1. Khroma: www.khroma.co 2. Uizard: uizard.io 3. Remove.bg: www.remove.bg

피그마로 Spotify 애니메이션 아이콘 만들기 💚 1. 아이콘 클릭 전과 후 버전의 와이어프레임 2개를 만들어 주세요. 2. 애니메이션을 적용할 아이콘과 같은 크기의 원을 만들어 주세요. 3. 똑같은 디자인으로 아이콘 위에 겹치게 배치해 주세요. 4. 클릭 후 버전의 와이어프레임에도 같은 원을 만들어 주세요. 5. 원의 크기를 키워 주고 투명도를 0%로 맞춰 주세요. (애니메이션에 적용될 모양) 6. 프로토타입으로 가서 (클릭 전의) 원과 (클릭 후의) 와이어프레임을 이어 주세요. 7. 세팅 값을 Smart animate / Slow / 300ms 로 맞춰 주세요.

피그마 모바일 UI 그리드 시스템 만들기 📱 (저는 매번 Rows를 추가하진 않지만 정교한 디자인을 할 때 유용합니다!) 1. 아이폰 프레임을 만들어 주세요. 2. Layout에 + 추가를 눌러 해주세요. 3. 세팅 값을 맞춰 주세요: Columns, Count-4, Type-Stretch, Margin-20, Gutter-16 4. Layout에 + 추가를 다시 눌러 해주세요. 5. 세팅 값을 맞춰 주세요: Rows, Count-Auto, Type-Top, Height-1, Gutter-4

피그마 스마트 애니메이션을 이용해서 밴엔제리스Carousel UI 만들어보기🍦 1. 정사각형 프레임을 만들어주세요. (숏컷: F) 2. 프레임 중앙에 이미지를 배치해 주세요. 3. 해당 프레임을 4개 더 복사해 주세요. (숏컷: ⌘ + D) 4. 각 프레임마다 준비해둔 이미지로 교체해 주세요. (숏컷: ⌘ + ⇧ + R) 5. 프레임 4개를 전체 선택하고 (큰) 프레임을 다시 생성해 주세요. (숏컷: ⇧ + R) 6. 오른쪽 패널에 Clip content 박스를 체크해 주고 (큰)프레임을 기존 프레임 크기로 줄여주세요. 7. 줄여진 프레임을 복붙하고 ⌘를 누른 체 옆으로 스와이프 해서 다음 프레임이 나오게 해주세요. 8. 각 이미지가 나오게 4번 반복해 주세요. 9. 그렇게 만든 4개의 프레임을 다시 전체 선택하고 위 패널에 있는 Create component set를 클릭해 주세요. 10. 프로토타입을 클릭하고 프레임 순서대로 연결해 주세요. (세팅 값: Drag, Smart animate, Gentle, 800ms)