- Видео 106
- Просмотров 107 025
Let Figma Design 니키
Добавлен 1 янв 2013
현직 UXUI디자이너로써 Figma, Sketch, XD 등의 UXUI툴의 실무디자인 팁을 공유합니다.
자세한 튜토리얼은 블로그에서도 보실 수 있어요~
자세한 튜토리얼은 블로그에서도 보실 수 있어요~
Видео
피그마에서 반복된 디자인 AI로 채우기 #figma #AI #figmatips
Просмотров 4145 дней назад
이미지를 로띠로 만드는 가장 쉬운 방법 #phase #imagetolottie #lottie #animation #motion
Просмотров 62120 дней назад
피그마 AI 한글 컨텐츠도 잘 될까? Shorten, Rewtite this, Translate 기능 #피그마AI #figma
Просмотров 23929 дней назад
피그마로 선인장 키우기 게임 만들기 with Variables #figma #베리어블
Просмотров 698Месяц назад
피그마 베리어블로 만든 차량네비게이션 UI #variables #figma #darkmode
Просмотров 532Месяц назад
피그마 반응형 확인하는 꿀팁 #figma #figmatips #prototype #responsive
Просмотров 4132 месяца назад
이제 PPT말고 피그마 슬라이드로 작업해요~ #figma #2024config #slide #피그마슬라이드
Просмотров 9082 месяца назад
피그마 프로토타입 자동으로 만들기 Make prototype #figma #ai #자동프로토타입 #피그마프로토타입 #피그마ai
Просмотров 1,3 тыс.2 месяца назад
피그마 AI로 만든 디자인 #figma #texttodesign #피그만ai #makeDesigns #ui
Просмотров 8942 месяца назад
작업 효율 극대화! 피그마 AI 자동 레이어명 만들기 #2034config #figma #ai
Просмотров 7822 месяца назад
피그마 AI가 제안해주는 UI디자인과 이미지, 배경제거 #figma #ai #2024config
Просмотров 7762 месяца назад
이제 피그마 오토레이아웃도 자동으로~ #2024Config #피그마업데이트 #suggest #autolayout
Просмотров 7772 месяца назад
피그마에서 감각적인 라인 아트 만들기 #figma #플러그인 #plugins #RuriLines
Просмотров 7343 месяца назад
피그마에서 Progressive Blur 쉽게 만들어 보세요 #플러그인 #피그마블러 #plugins
Просмотров 5063 месяца назад
헉 쩌네.......대박입니다..
속도를 조금만 천천히 했으면 좋겠어요. 튜토리얼 쇼츠 보다는 광고 보는 느낌이에요.
좀더 노력해보곘습니다..ㅠㅠ
👍
너무 빨라서 속도 조절하면 더 좋을듯 해요. 쇼츠들이 너무 빨라요.
현재 사용가능한 기능인가요?? 전 안보여서리..
@@그리디-q8d 현재 피그마 ai 기능은 유저들에게 순차적으로 오픈중입니다. 홈에서 우측 하단 물음표 버튼의 ui3와 ai기능을 신청해보세요
감사합니다. 좋은 팁들이 많은데 영상들이 모두 쇼츠라 너무 빨라서 따라하기 힘들다는 아쉬움이 있습니다. 😅
자세한 튜토리얼은 블로그에도 있어요 m.blog.naver.com/nick8888 방문하셔서 꿀팁 얻어가세요
이미지로 로띠 애니메이션 만드는 가장 쉬운 방법 로띠로 애니메이션 만들 때 벡터 일러스트로만 만드셨나요? 이제 Phase에서 이미지를 바로 Lottie로 추출해보세요~ 번거로운 변환 작업 필요 없이 Phase에서 모션 작업 후 바로 익스포트 하면 되요. 다양한 이펙트가 들어간 이미지, 3D 이미지, 쉐도우 이미지 모두 Lottie.JSON으로 추출됩니다. 1. 피그마에서 디자인한 비트맵 이미지를 3배수 png로 추출해주세요.(배수는 여러분의 프로젝트에 맞게 설정해주세요) 2.Phase.com 접속 후(로그인, 회원가입 필요) 새파일을 만들어줍니다. 3.Insert new asset 메뉴 선택 후 이미지를 화면으로 가져옵니다. 4.하단 Animate mode 토글 클릭하면 애니메이션을 바로 만들 수 있어요~ 5.모션 작업 후 상단 오른쪽 Export 버튼 클릭 후 Lottie(.json) 으로 추출하면 끝! 주의할 점은 배수의 이미지가 json 코드내에 포함되기 때문에 용량이 커질 수 있어요. 용량 확인은 필수! 용량 최적화된 이미지로 작업하는게 좋겠죠~ #Phase #Animation #UXUI #Design #디자이너모션 #애니메이션툴 #페이즈 #디자이너 #로띠 #Lottie #ImagetoLottie #이미지로띠 #로띠변환 #앱디자인 #모션디자인
와 멋져요! 저도 원본받을수있을까요? 😅
@@노유선-u4y 원본 드립니다.^^ www.figma.com/community/file/1335262558401985478 유용하게 쓰시길 바랄게요~
고맙습니다! ❤
무료버전은 design mode와 하단 툴에 ai를 못 쓰나요 ?? 😂 안 보여서 물어봅니다
@@joych8598 현재 피그마 슬라이드는 제한된 베타버전이라고 합니다. ai기능은 순차적으로 적용된다고 하니 조금 기다려 보세요..^^ design mode는 하단 펜촉 토글을 눌러보세요~ (요것도 베타버전에서 순차적지원인지 ....모르겠네요) 베타버전은 올해까지 유지될것이라고 해요
뒈에에에박!!!!! 제가 찾던 기능이였는데.. 너무 감사해요!!❤
뒈에에에바기네요!!!! 이런걸 찾아내는 당신은 능력자❤
안녕하세요~! 원본 받을 수 있을까요? 영상으로 많이 배워갑니다~
원본 드립니다.^^ www.figma.com/community/file/1335262558401985478 유용하게 쓰시길 바랄게요~
저는 이기능이 안보이던데..혹시 사라진걸까요..?
@@user-aran957 피그마의 디자인 생성 AI 기능은 애플의 날씨앱을 모방했다는논란이 있었습니다. 그래서 이 기능만 잠시 중단 되었습니다. AI 생성부분은 조금 더 신중하게 접근할것이라고 하는군요^^
@@let_figma 아하 답변 감사합니다!
우와 튜토리얼 만들어주세요
blog.naver.com/nick8888/223552068260 블로그에 자세한 설명 올려두었어요~
뭐할 수 있는지를 쓰지말고 뭘 클릭하는건지 좀 쓰지
@@Lily-xo8cu 피그마 베리어블을 담기엔 숏폼이 너무 짧네요^^ 개념부터 잘 정리된 유튜브 채널을 소개드립니다. youtube.com/@designer_dk?si=uC9TNjwY75S-dLgO @designer_dk
너..무 빨라요.........
피그마 팁이 아니라 앱 광고인 줄 알았음;; 완성도가 높은데 그래도 이건 일반적인 쇼츠 수준을 너무 아득히 상회해버려서 쇼츠같지가 않고 광고같음ㅋㅋㄴ
칭..칭찬맞죠???감사합니다❤
@@let_figma칭찬은 맞는데 쇼츠 제목을 조금 바꾸시는게 어떨까요? 제목 때문에 더 광고인 줄 알았어요 영상 내용은 정말 도움 많이 됐는데...
피그마 슬라이드는 2024년까지 베타 버전에서 무료로 쓸 수 있어요^^
피그마 정말 잘 하시네요~ 공부중인데 소스 공유 가능 하실까요? conditional에 관심이 많습니다.
정리가 안되있는 소스라도 필요하시다면 ,,,can view 권한으로 쉐어해 드릴게요,,,메일로 피그마 계정 전달주세요~ nick88889933@gmail.com
헉 궁금했던 기능인데 감사해요~
베타 버전에서 사용할수있나요? 일반 무료사용 유저도 사용할 수 있나요??
@@ringringgu8304 피그마의 ai 기능은 베타기간동안 모두 무료로 사용할 수 있고요. 정식 버전으로 런칭할시엔 유료로 전환된다고 합니다. 요금제에 따라 부과될지...아직 정해진 것이 없다고 하네요
안녕하세요 피린이입니다. 너무빨라요 선생님 그래도 유익한정보 감사합니다.
@@dooree22 m.blog.naver.com/nick8888/223173900360 블로그에 자세한 설명 올려두었어용^^
웨이트리스트 신청했는데 승인 나는 데 얼마나 걸릴까요?
저도 그에대한 정보는 따로 없어요..ㅜㅜ 그냥 순차적으로 공개한다고 알고 있습니다. 저는 피그마에서 AI베타버전 초기사용자로 선정해 주어서 일찍 사용할 수 있었어요
피그마 공부중입니다. 원본 보고싶어요 감사합니다. ^^
원본 드립니다.^^ www.figma.com/community/file/1335262558401985478 유용하게 쓰시길 바랄게요~
헉 늦었을려나요?! ㅠㅠ 저도 공유받을 수 있을까요?
아쉽게도 이메일로만 공유 가능하여 더이상 추가해드리지 못하고 있습니다. phase가 꾸준히 공동작업과 팀작업을 업데이트 준비중이라고 합니다. ^^
프레이마에서 마무리하고 다시 피그마로 가져오시는건가요.?
프레이머는 노코드툴입니다. 웹에 적용하기 위해 디자인을 코드화해줍니다 피그마와 스플라인에서 디자인 한 부분을 프레이머에서 적용하고 웹에 반영하는 것으로 알고 있습니다^^
@@let_figma 앟. 친절한 설명 감사드립니당 앞으로도 번창하세요! 구독하고 자주 놀러올게용
이거 좀 더 자세히 알고싶어요... ㅜㅜ
제 블로그에 자세한 방법 설명해두었어요 모르는 부분있으면 질문주세요^^ m.blog.naver.com/nick8888/223173900360
반응형도 구현되게 만들수는 있나요?
anima 자체 기능에 break point 설정 기능이 있더라고요...anima 사이트에 들어가보니 가능하다고 나와있습니다. www.animaapp.com/blog/ko/ 저도 한번 반응형도 추출해봐야겠어요~
헐 이런 기능이...?
00:00
이거 유료버전에서만 할 수 있나요??
피그마 무료플랜에서는 로컬 베리어블 mode한개까지는 지원됩니다. 현 예제는 모드 한개로 구현할 수 있는 예제라서 무료플랜에서도 사용하실 수 았어요~~블로그에 자세한 튜토리얼 올려두었으니 참고하세요^^ blog.naver.com/nick8888/223173900360
피그마에서 Progressive Blur 쉽게 만들어 보세요♡♡ #figma #플러그인 #figmatips #figmatips #블러 #blurEffect #점진적블러 #피그마꿀팁
잘 봤어요~!! 이런 라인 그래프는 전부 펜툴로 그리신 건가요? ㅠㅠ
피그마 플러그인 중 chartline 사용했어요~ 깔끔한 라인 그래프를 그려줍니다.
피그마로 Line chart interaction 만들기♡♡ 피그마 프로토타입을 lottie로 추출해서 내 프로젝트에 반영해보세요~ #figma #프로토타입 #figmatips #피그마꿀팁 #그래프모션 #라인차트 #인터랙션 #그래프인터랙션 #graph #chart
원본 공유 부탁드립니다!!!
원본 드립니다.^^ www.figma.com/community/file/1335262558401985478 유용하게 쓰시길 바랄게요~
피그마 디자인을 html, css로 만들기♡♡ Dev mode Plugins 데브모드 사용은 Professional 플랜부터 가능합니다. #figma #피그마 #플러그인 #plugins #figmatips #추천플러그인 #devmode #데브모드 #개발자모드 #anima
피그마 프로토타입으로 3D 느낌의 버튼 인터랙션 만들기♡♡ 블로그에 자세한 튜토리얼 올려두었어요~ blog.naver.com/nick8888/223470510772 #figma #프로토타입 #피그마 #인터랙션 #3D버튼 #mousehover #마우스오버 #WhileHovering
00:13
피그마 디자인 시스템 가이드 만들기 - px, rem 자동 변환 플러그인♡♡ 이제 rem 변환과 수치 가이드를 한번에 만드세요^^ 플러그인 실행하고 하단 units에 ($)px - ($##/16)rem 입력!! 16px을 1rem으로 설정한다는 뜻이에요^^ #은 소수점 자리수를 의미하며, ##은 소수점 두자리수로 표현해줘요. 여러분의 프로젝트 맞는 rem 단위를 설정해보세요 #px #rem #figma #plugins #measure #디자인가이드 #수치가이드 #guide #rem변환 #플러그인
그럼 아이콘 사이즈 따로 터치영역 따로 잡으면 되는거 맞나요? ㅠㅠ
터치영역까지 디자인에서 작업한다면 공수가 많이 들 수있는데요..디자인에선 아이콘 사이즈만 잡고 터치영역 고려하여 간격주셔도 됩니다. 퍼블 작업시 터치영역을 따로 설정할꺼에요.. 그치만 디자이너가 이런 개념을 알고있어야 사용성이 좋은 디자인이 나올 수 있기 때문에 만들어보았어요.. m.blog.naver.com/nick8888/223258215681 제 블로그에 자세한 내용 포스팅해두었어요^^
공유부탁드려요!
원본 드립니다.^^ www.figma.com/community/file/1335262558401985478 유용하게 쓰시길 바랄게요~
와 감사합니다❤
모바일 UI 패턴 라이브러리 사이트 3가지 UI Pattern 라이브러리는 사용자 인터페이스에서 사용하는 디자인 패턴과 구성요소를 실제 서비스 되는 화면 스크린샷으로 모아놓은 곳입니다. 국내 국외의 UI 패턴 사이트를 참고하여 디자인의 영감을 얻고 더 나은 사례를 내 디자인에 적용해보세요~ #uipatterns #inspiration #uxui #design #레퍼런스 #reference #인터페이스 #참고사이트 #유저플로우 #앱스크린샷 #모바일스크린샷 #screenshot
넘 좋아요~~ 원본 필요합니다! 풀영상도 올려주시면 좋을텐데~~기다립니다~
원본 드립니다.^^ www.figma.com/community/file/1335262558401985478 유용하게 쓰시길 바랄게요~
오 ㅓㄴ뮤 신기해요
너무 잘보고 있어요! 저는 피그마 프로토 타입할때 마우스가 저렇게 동그라미 인터페이스로 안나오고 마우스 손모양으로 나오는데...ㅠㅠ어떻게 하는거죠?
프로토타입 탭의 Device 설정을 바꿔보세요 모바일과 태블릿으로 설정했을때 마우스 커서 모양이 바뀝니다. Prototype탭 > Show prototype settings > Device > 모바일, 태블릿 디바이스 설정
피그마 프로토타이핑 Set variable mode 업데이트♡♡ 이제 프로토타입에서 베리어블 모드를 한꺼번에 제어할 수 있어요^^ Set variable mode 업데이트로 여러가지 프로토타입핑 아이디어를 실현시켜 보세요👍 블로그에 자세한 튜토리얼 올려두었어요. m.blog.naver.com/nick8888/223445400290 #figma #variables #setVariableMode #피그마 #프로토타입 #프로토타이핑 #업데이트 #최신업데이트
풍선 느낌의 3D 텍스트도 이 방법으로 가능할까요?
풍선느낌은 아래 플러그인 사용해보세요. www.figma.com/community/plugin/1264600219316901594/vector-to-3d?searchSessionId=lw0ds2ql-6ktfaxkdpwu
좋은 영상 감사합니다. 저도 공유해주실 수 있나요?
파일 공유드립니다. Phase.com (회원가입, 로그인 필요) 01. Main app.phase.com/view/f/2b1d4a25-be66-4949-97aa-77fb3eb08614 02.sub app.phase.com/view/f/e924e57a-2a3d-4f50-a134-b9d1cb88ff22 03.complete app.phase.com/view/f/d22a83f5-6869-4f10-b075-899d745e2a44 04.blank app.phase.com/view/f/98ff1930-0ef7-43d0-8b1b-fa4c1c06f9eb 튜토리얼 사이트 phase-motion.teachable.com/p/phase-motion-course-korean 유용하게 쓰시길 바랄게요~^^
안녕하세요, Phase 파일 쉐어가 아직 메일주소 추가만 가능해서요.. 아마 링크로 파일을 못 보셨을텐데.... Phase에 로그인한 메일주소 보내주시면 다시 쉐어해드릴게요~인스타그램 디엠으로 부탁드립니다..ㅜㅜ 혼란을 드려 죄송합니다. 추가해드리면 메일로 초대링크가 갈텐데요~ 거기로 접속해주시면 됩니다. 4개 파일중 1개파일이 깨졌네요,,,나머지 3개만 공유해드릴게요ㅜㅜ 감사합니다^^
와 너무 좋은 정보에요ㅠㅠ 애니메이션 파일 혹시 공유해주실 수 있나요? 🙏🏻
파일 공유드립니다. Phase.com (회원가입, 로그인 필요) 01. Main app.phase.com/view/f/2b1d4a25-be66-4949-97aa-77fb3eb08614 02.sub app.phase.com/view/f/e924e57a-2a3d-4f50-a134-b9d1cb88ff22 03.complete app.phase.com/view/f/d22a83f5-6869-4f10-b075-899d745e2a44 04.blank app.phase.com/view/f/98ff1930-0ef7-43d0-8b1b-fa4c1c06f9eb 튜토리얼 사이트 phase-motion.teachable.com/p/phase-motion-course-korean 유용하게 쓰시길 바랄게요~^^
안녕하세요, Phase 파일 쉐어가 아직 메일주소 추가만 가능해서요.. 아마 링크로 파일을 못 보셨을텐데.... Phase에 로그인한 메일주소 보내주시면 다시 쉐어해드릴게요~인스타그램 디엠으로 부탁드립니다..ㅜㅜ 혼란을 드려 죄송합니다. 추가해드리면 메일로 초대링크가 갈텐데요~ 거기로 접속해주시면 됩니다. 4개 파일중 1개파일이 깨졌네요,,,나머지 3개만 공유해드릴게요ㅜㅜ 감사합니다^^