ibing 销售页面：hXXps://www.udemy.com/course/figma-ui-ux-design-advanced-tutorial/
《Figma UI/UX设计进阶》将带你提升Figma技能，进入更高层次。
你将掌握设计技巧，包括管理资源、创建网格布局，以及在原型中使用变量来实现亮暗模式切换。
学会制作响应式设计，确保你的作品能够适应各种设备，赋予它们专业的触感。
发现如何使用高级动画功能和Lottie文件为你的创作注入生命。深入探索排版和视频遮罩的世界，增强你设计的视觉冲击力。
了解可访问性工具，确保你的设计具有包容性。你还将学习如何使用变体，精通将复杂性简化为一到两个变体的艺术。
无论你是想提升作品集，还是发展专业的UX流程，这门课程都会在每一步为你提供指导。成为Figma UI/UX设计的高手，将你的设计技能提升到新的高度，随时准备应对任何UX挑战。
Figma UI UX Design Advanced takes your Figma skills to the next level.
You’ll master design techniques, including managing assets, creating grid layouts, and using Variables for Light & Dark Modes in your prototypes.
Learn to craft responsive designs that adapt to any device, giving your work a professional touch.
Discover how to use advanced animation features and Lottie files to add life to your creations.Dive deeper into the world of typography and video masking, amplifying the visual impact of your designs.
Explore accessibility tools to ensure your designs are inclusive. You’ll also work with variants, mastering the art of reducing complexity to just one or two variants.
Whether you’re looking to enhance your portfolio or develop a professional UX process, this course will guide you every step of the way.Become a pro with Figma UI UX Design Advanced and take your design skills to new heights, ready to tackle any UX challenge that comes your way.
- 教程编号：0450663150
- 教程语言：英语 / 无字幕
- 安全扫描：无病毒无插件 / 云查杀 Virustotal Virscan
- 培训机构：未知 / IMJMJ
- 文件大小：7.15GB
- 文件格式：视频 / 文档 / 图文
- 压缩软件：7ZIP
- 视频播放：完美解码
教程目录
│ └─Figma UI UX Design Advanced
│ ├─01. Introduction
│ │ │ 1. Intro to the Figma Advanced Course.mp4
│ │ │ 2. Getting Started in Figma Advanced Course[ aixinshou.com ].mp4
│ │ │
│ │ └─Exercise Files
│ │ │ Class Projects - Figma Advanced.pdf
│ │ │ Figma Advanced Cheatsheet v2.pdf
│ │ │
│ │ ├─Copy
│ │ │ Event Listing.txt
│ │ │
│ │ ├─Fonts
│ │ │ fontawesome-free-6.4.0-desktop.zip
│ │ │
│ │ ├─Icons
│ │ │ Emoji Annoyed.svg
│ │ │ Emoji Mega Smile.svg
│ │ │ Emoji Shocked.svg
│ │ │ Emoji Smile.svg
│ │ │ heart-regular.svg
│ │ │ magnifying-glass-solid.svg
│ │ │ ticket-solid.svg
│ │ │ user-regular.svg
│ │ │ Video Icon - Bump.svg
│ │ │ Video Icon - Loop.svg
│ │ │ Video Icon - Mute.svg
│ │ │ Video Icon - Pause.svg
│ │ │ Video Icon - Play.svg
│ │ │ Video Icon - Stop.svg
│ │ │
│ │ ├─Icons2
│ │ │ Done.svg
│ │ │ Multiply.svg
│ │ │ Pencil.svg
│ │ │ Plus Math.svg
│ │ │
│ │ ├─Images
│ │ │ Abstract 01 jj-ying.jpeg
│ │ │ Abstract 02 philip-oroni.jpeg
│ │ │ Alpha01 karl-kohler.jpeg
│ │ │ Alpha01 karl-kohler.png
│ │ │ Alpha02 daniel-leone.jpeg
│ │ │ Alpha02 daniel-leone.png
│ │ │ Alpha03 rene-bohmer.jpeg
│ │ │ Alpha04 henrik-donnestad.jpeg
│ │ │ Artist 01 Austin-wade.jpeg
│ │ │ Artist 02 houcine-ncib.jpeg
│ │ │ Dan Scott Costume-1.jpg
│ │ │ Dan Scott Costume-2.jpg
│ │ │ Dan Scott Costume-3.jpg
│ │ │ Dan Scott Head Repeat 2.png
│ │ │ Firefly_flower+made of cyberpunk bits_art_24214.jpeg
│ │ │ Firefly_Techno+Club with aliens dancing in fluffy boots_20613.jpeg
│ │ │ Firefly_Techno+Club with aliens dancing in fluffy boots_30806.jpeg
│ │ │ Firefly_Techno+Club with aliens dancing in fluffy boots_74731.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_painting_20613.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_painting_30806.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_painting_52264.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_painting_74731.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_shot_from_below_20613.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_shot_from_below_30806.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_shot_from_below_52264.jpeg
│ │ │ Firefly_Techno+Club with chickens dancing with fluffy boots_shot_from_below_74731.jpeg
│ │ │ Fox.svg
│ │ │ Image 1 - Boliviainteligente.jpeg
│ │ │ Layer Blend shane-rounce.jpeg
│ │ │ Logo01.jpg
│ │ │ Logo02.jpg
│ │ │ Logo03.jpg
│ │ │ Luma01 aryan-dhiman.jpeg
│ │ │ Luma02 agape-trn.jpeg
│ │ │ Pen Tool mockup-graphics.jpeg
│ │ │ Pen Tool Practice.png
│ │ │ Product 01 eniko-kis.jpeg
│ │ │ Product 02 rachit-tank.jpeg
│ │ │ Product 03 ruslan-bardash-.jpeg
│ │ │ Product 04 giorgio-trovato.jpeg
│ │ │ Product 05 galina-n.jpeg
│ │ │ Product 06 joan-tran.jpeg
│ │ │ Spill01 Mask maksim-larin.png
│ │ │ Spill01 No Mask maksim-larin.jpg
│ │ │ Spill02 Mask toa-heftiba.png
│ │ │ Spill02 No Mask toa-heftiba.jpg
│ │ │ Spill03 Mask daniel-korpi.png
│ │ │ Spill03 No Mask daniel-korpi.jpg
│ │ │ water01 akira-hojo.jpeg
│ │ │ water02 samara-doole.jpeg
│ │ │ water03 silas-baisch.jpeg
│ │ │
│ │ ├─Videos
│ │ │ Video 01 pexels-super-lunar-4979849-3840x2160-25fps.mp4
│ │ │ Video 02 pexels-alena-darmel-7722987-3840x2160-25fps.mp4
│ │ │ Video 03 pexels-oleg-gamulinskii-3163534-3840x2160-30fps.mp4
│ │ │ Video 04 pexels-rachel-claire-8856785-2160x3840-25fps.mp4
│ │ │ Video 05 pexels-peggy-anke-10856978-1080x1920-30fps.mp4
│ │ │ Video 06 pexels-marc-mueller-2022396-1920x1080-30fps.mp4
│ │ │
│ │ └─zFinal Class Project
│ │ Class Project 20 - Finish your design.pdf
│ │
│ ├─02. Auto Layout - Level 1
│ │ 1. Auto Layout & Responsive Design 101 It's use in responsive design.mp4
│ │ 2. Designing in Figma with Auto Spacing in Auto Layouts[ aixinshou.com ].mp4
│ │ 3. When and when not to use Components in Figma.mp4
│ │ 4. What is good spacing to use in Figma.mp4
│ │ 5. What spacing should I use for web & app design in Figma.mp4
│ │ 6. Auto Layout vs Constraints in Figma.mp4
│ │ 7. Autolayout shortcuts Tips and tricks to work with Auto Layout faster.mp4
│ │ 8. Class Project 01 - Responsive Lower Navigation.mp4
│ │ 9. Class project 01 - Responsive Lower Navigation.html
│ │
│ ├─03. Advanced Workflow Tricks
│ │ 1. How to handle files in Figma and become a File Handling Master.mp4
│ │ 2. How to use advanced Copy, Paste, and Selection Tricks in Figma[ aixinshou.com ].mp4
│ │ 3. How to do crazy things with your Figma fields.mp4
│ │ 4. Frame Tricks Tips and Tricks to work with Figma frames effectively.mp4
│ │ 5. Advanced Zooming Techniques for precision work in Figma.mp4
│ │ 6. Light or Dark vs System Theme Which one to use in Figma.mp4
│ │ 7. Class Project 02 - Event Card Constraints.mp4
│ │ 8. Class project 02 - Event Card Constraints.html
│ │ 9. Class Project 02 - Event Card Constraints - Completed.mp4
│ │
│ ├─04. Grids
│ │ 1. Grid v Constraints v Autolayout in Figma Which one to use and when.mp4
│ │ 2. How to copy & paste grids and export grid styles in Figma[ aixinshou.com ].mp4
│ │ 3. How to add rows and column grids to one layout in Figma.mp4
│ │ 4. How to update Grid Styles in Figma.mp4
│ │ 5. Grids inside of frames that aren't the main frame.mp4
│ │
│ ├─05. Simple App Brand
│ │ 1. Class project 03 - Event Branding.mp4
│ │ 2. Class project 03 - Event Branding.html
│ │ 3. Logos using Iconscout How to use Iconscout to create logos in Figma.mp4
│ │ 4. What are widget compared to plugins in Figma.mp4
│ │ 5. How to create ux color variants using a Figma Widget .mp4
│ │
│ ├─06. Nested & Responsive Auto layouts
│ │ 1. Intro to Nested & Responsive Auto layouts Section.mp4
│ │ 2. Production video - Tidying up my frame & component mess[ aixinshou.com ].mp4
│ │ 3. Bring in images using the unsplash plugin in Figma.mp4
│ │ 4. Production video - Making the parts for our nested autolayout.mp4
│ │ 5. Nesting Multiple Auto Layouts inside each other in Figma.mp4
│ │ 6. Autolayout Nesting with variants and responsive text in Figma.mp4
│ │ 7. Auto Layout on different device sizes- How to make advanced Auto Layouts.mp4
│ │ 8. Responsive text that adjusts for 2 lines in Figma.mp4
│ │
│ ├─07. Animation - Level 1
│ │ 1. Abstract Gradient Background in Figma the easy way.mp4
│ │ 10. Why is interaction on tap on click grayed out of missing in Figma.mp4
│ │ 11. Class project 05 - Houdini Text Animation.mp4
│ │ 12. Class project 05 - Houdini Text Animation.html
│ │ 2. How to copy and paste Interactions in Figma[ aixinshou.com ].mp4
│ │ 3. How to animate gradient mesh using Variants in Figma.mp4
│ │ 4. How to give feedback on a UX project - The Critique Sandwich.mp4
│ │ 5. Class project 04 - Background Animation.mp4
│ │ 6. Class project 04 - Background Animation.html
│ │ 7. Houdini Text How to make a text mask animation Figma.mp4
│ │ 8. How to use the Spring Animations in Figma.mp4
│ │ 9. Spring Animation How to make custom Spring Animation in Figma.mp4
│ │
│ ├─08. Prototyping - Level 1
│ │ 1. Create & remove bulk multiple noodles wires at once in Figma.mp4
│ │ 10. Interactive components with sliding button in navigation for Figma.mp4
│ │ 11. Class project 07 - Sliding Button Nav Challenge.mp4
│ │ 12. Class project 07 - Sliding Button Nav Challenge.html
│ │ 13. Class project 07 - Completed.mp4
│ │ 14. How to use Sections in Figma for organizing your content.mp4
│ │ 15. How to use sections for prototyping in Figma.mp4
│ │ 16. How to add iOS battery wifi notch status bar to Figma.mp4
│ │ 17. How to add iOS or Android Snack Bar UI to Figma.mp4
│ │ 18. Class project 08 - Operating System UI.mp4
│ │ 19. Class project 08 - Operating System UI.html
│ │ 2. How to bulk update nav links in your Figma prototype[ aixinshou.com ].mp4
│ │ 20. Be careful what you create in Figma.mp4
│ │ 3. How to set the right phone and find old prototype phones in Figma.mp4
│ │ 4. How to make sticky scroll position search bar in Figma.mp4
│ │ 5. How to stack multiple sticky text vertical scrolling in Figma.mp4
│ │ 6. Class project 06 - Multiple Sticky Headings.mp4
│ │ 7. Class project 06 - Multiple Sticky Headings.html
│ │ 8. How to make Interactive Components in Figma.mp4
│ │ 9. How to make a checkmark turn on and off in Figma.mp4
│ │
│ ├─09. Advanced Layers
│ │ 1. What are the advanced Layer shortcuts in Figma.mp4
│ │ 2. How to find layer Zen shortcuts in Figma[ aixinshou.com ].mp4
│ │ 3. How to hide and lock unlock all layers in Figma.mp4
│ │ 4. How to use Locked layers in Figma.mp4
│ │ 5. How to Find Replace and Multi-select Layer Search in Figma.mp4
│ │ 6. How to Bulk Rename Layers with advanced tricks in Figma.mp4
│ │
│ ├─10. Components & Variants - Level 1
│ │ 1. How to replace instances and variants with shortcuts in Figma.mp4
│ │ 10. Class project 09 - One button to rule them all.mp4
│ │ 11. Class project 09 - One button to rule them all.html
│ │ 2. How to use Instance Swap Component Properties with preferred in Figma[ aixinshou.com ].mp4
│ │ 3. How to use Component Text Property in Figma.mp4
│ │ 4. How to use Boolean Component Property in Figma.mp4
│ │ 5. How to make a input field using only component properties in Figma.mp4
│ │ 6. How to Combine Variants with Component Properties in Figma.mp4
│ │ 7. How to apply component properties to existing design systems.mp4
│ │ 8. What is Simplify Instances in Figma.mp4
│ │ 9. What does Expose Nested Instances do in Figma.mp4
│ │
│ ├─11. Typography
│ │ 1. What are some font tips and tricks in Figma.mp4
│ │ 10. How to use adobe fonts & local fonts in Figma.mp4
│ │ 11. How to Preserve text overrides or not in Figma variant.mp4
│ │ 12. How to use Chat GPT AI to create placeholder and personas in Figma.mp4
│ │ 2. How to see Live Font Previews in Figma[ aixinshou.com ].mp4
│ │ 3. How reset fonts & set default fonts in Figma.mp4
│ │ 4. How to Use Line Height Percentage in 8pt grid in Figma.mp4
│ │ 5. How to use Leading trim to cap height to baseline in Figma.mp4
│ │ 6. How to set Hanging Punctuation for pull quotes & call outs in Figma.mp4
│ │ 7. What are the Advanced Type Options in Figma.mp4
│ │ 8. How to use Variable Type in UX app design in Figma.mp4
│ │ 9. How to curve text with type on a path in Figma.mp4
│ │
│ ├─12. Imagery
│ │ 1. How to create an image style in Figma.mp4
│ │ 10. How to create a luma mask in Figma.mp4
│ │ 11. Class project 12 - Luma Mask.mp4
│ │ 12. Class project 12 - Luma Mask.html
│ │ 13. How to make a spillover mask outside of the frame in Figma.mp4
│ │ 14. How to use the pen tool to make image masks in Figma.mp4
│ │ 15. How to use color layer blending modes in Figma.mp4
│ │ 16. Class project 13 - Social Ad.mp4
│ │ 17. Class project 13 - Social Media Ad.html
│ │ 2. What's the difference with Images inside frames vs fills vs Masked in Figma[ aixinshou.com ].mp4
│ │ 3. How to crop images using shortcuts in Figma.mp4
│ │ 4. How to mask images with text in Figma.mp4
│ │ 5. Class Project 10 - Text Mask.mp4
│ │ 6. Class project 10 - Text Mask.html
│ │ 7. How to mask using transparent pngs with alpha channels in Figma.mp4
│ │ 8. Class Project 11 - Alpha Mask.mp4
│ │ 9. Class project 11 - Alpha Mask.html
│ │
│ ├─13. Video
│ │ 1. How to add video in Figma.mp4
│ │ 2. How to make a background autoplay video in Figma[ aixinshou.com ].mp4
│ │ 3. How to get a video play when you hover in Figma.mp4
│ │ 4. Class project 14 - Hover Play.mp4
│ │ 5. Class project 14 - Hover Play.html
│ │ 6. How to make a play pause button for video in Figma.mp4
│ │ 7. How to build a video card in Figma.mp4
│ │ 8. Class project 15 - Video Card.mp4
│ │ 9. Class project 15 - Video Card.html
│ │
│ ├─14. Color
│ │ 1. What are some advanced color tricks in figma.mp4
│ │ 2. How to change replace colors in Figma[ aixinshou.com ].mp4
│ │ 3. How to create Color Themes for light and dark in Figma.mp4
│ │
│ ├─15. Styles & Libraries
│ │ 1. How to group color styles using slashes or folders in Figma.mp4
│ │ 2. How to descriptions to your styles in Figma for others to use[ aixinshou.com ].mp4
│ │ 3. Editing someone else's styles or component library in Figma.mp4
│ │ 4. How to hide color font styles & components from team library in Figma.mp4
│ │ 5. How to compare changes in component with overlay in Figma.mp4
│ │ 6. How to refactoring styles to another design file in Figma.mp4
│ │ 7. How to move relink refactoring components to another design file in Figma.mp4
│ │ 8. How to swap parts or entire component & style library in Figma.mp4
│ │
│ ├─16. Drawing, Stroke & Fill
│ │ 1. What are some advanced drawing tips and tricks in figma.mp4
│ │ 2. How to draw in Figma with the pen tool- Anchor point mastery[ aixinshou.com ].mp4
│ │ 3. How to draw with Bend & Mirror angle in Figma.mp4
│ │ 4. Can you animated anchor points or booleans in Figma.mp4
│ │ 5. How to animate a mobile nav menu in Figma using a dip.mp4
│ │ 6. Class project 16 - Alt Nav Animation.mp4
│ │ 7. Class project 16 - Alt Nav Animation.html
│ │
│ ├─17. Auto Layout - Level 2
│ │ 1. How to overlap & stack things in a Figma Autolayout.mp4
│ │ 10. What does stroke included excluded mean in Figma auto layout.mp4
│ │ 11. How to set custom spacing in auto layouts in Figma.mp4
│ │ 2. What are the shortcuts for hug & fill in Figma[ aixinshou.com ].mp4
│ │ 3. How to set absolute spacing so things ignore Autolayout in Figma.mp4
│ │ 4. How to absolute position something that is responsive in Figma.mp4
│ │ 5. How stick things to the bottom right of an auto layout in Figma.mp4
│ │ 6. How to resize a box automatically in a Auto Layout to match text in Figma.mp4
│ │ 7. What are the autolayout padding and resizing shortcuts.mp4
│ │ 8. How to create a minimum width height button in Figma.mp4
│ │ 9. How to wrap auto layout objects in Figma.mp4
│ │
│ ├─18. Components & Variants - Level 2
│ │ 1. How to organize Components into groups in Figma.mp4
│ │ 2. How to create slot placehold components in Figma[ aixinshou.com ].mp4
│ │ 3. How to convert an existing website into a figma design.mp4
│ │
│ ├─19. Prototyping - Level 2
│ │ 1. How to make a drop down using overlays in Figma.mp4
│ │ 10. Class project 19 - Expanding Search Bar.html
│ │ 2. How to make a multi level drop down menu in Figma[ aixinshou.com ].mp4
│ │ 3. Class project 17 - Nested Dropdown Menu.mp4
│ │ 4. Class project 17 - Nested Dropdown Menu.html
│ │ 5. How to create a hover grow effect for images in Figma.mp4
│ │ 6. Class project 18 - Hover Grow Effect.mp4
│ │ 7. Class project 18 - Hover Grow Effect.html
│ │ 8. How to make an expanding Search Bar in Figma.mp4
│ │ 9. Class project 19 - Expanding Search Bar.mp4
│ │
│ ├─20. Variables
│ │ 1. What are Variables in Figma.mp4
│ │ 2. How to create cart total using number variables in Figma[ aixinshou.com ].mp4
│ │ 3. How to add add conditions to variables in Figma.mp4
│ │ 4. Variant change using Boolean variable - change cart color.mp4
│ │ 5. Turning our boolean variable to false in Figma.mp4
│ │ 6. Making a Overlay Popup in the Variable action panel in Figma.mp4
│ │ 7. Light and Dark Modes using Collections & Color Variables in Figma.mp4
│ │ 8. How to change spacing with number Variables in Figma.mp4
│ │
│ ├─21. Design Tokens
│ │ 1. What are Design Tokens in Figma.mp4
│ │ 2. How to create Design Tokens in Figma[ aixinshou.com ].mp4
│ │ 3. Creating spacing & radius design tokens in Figma.mp4
│ │ 4. When would you use design tokens in Figma.mp4
│ │
│ ├─22. Animation - Level 2
│ │ 1. How do you animate along a path in Figma.mp4
│ │ 2. How to add Lottie animation files in Figma[ aixinshou.com ].mp4
│ │
│ ├─23. Accessibility
│ │ 1. Making Your Designs Accessible - A Guide to Accessibility plugin in Figma.mp4
│ │
│ ├─24. Working with Stakeholders
│ │ 1. What are some tips for working with colleagues in Figma.mp4
│ │ 10. How to use DEV Mode in Figma.mp4
│ │ 2. How view version history duplicate and restore in Figma[ aixinshou.com ].mp4
│ │ 3. How to archive and restore previous versions of Figma files.mp4
│ │ 4. How to create & share a flows in Figma.mp4
│ │ 5. How to use the Slice Tool in Figma.mp4
│ │ 6. How export uncropped and unscaled images from Figma.mp4
│ │ 7. How to export webp images from Figma & Photoshop.mp4
│ │ 8. How to downsize reduce file size of all images in a Figma file.mp4
│ │ 9. How to document a component in a design system in Figma.mp4
│ │
│ └─25. What Next
│ 1. Class Project 20 - Finish your design.mp4
│ 2. Class Project 20 - Finish your design.html
│ 3. What's Next - Figma Advanced.mp4
