강의

멘토링

커뮤니티

Design

/

UI/UX

Chinh phục hoàn toàn Thiết kế UI Responsive với Figma

Muốn thành thạo Responsive Design bằng cách tận dụng hiệu quả các tính năng Auto Layout, Grid, Constraints của Figma? Khóa học này sẽ từng bước giúp bạn nâng cao kỹ năng tạo Responsive Design, từ các yếu tố UI nhỏ đến thẻ, bảng, component, màn hình web và ứng dụng. Hãy nắm vững cách dùng Figma để áp dụng ngay vào phỏng vấn và công việc thực tế, làm chủ khả năng thiết kế giao diện Responsive tối ưu cho mọi thiết bị!

(4.9) 14 đánh giá

76 học viên

  • uxeric
반응형디자인
UXUI
피그마
오토레이아웃
취업
Figma
Responsive Web
ui
ux
get a job

Đánh giá từ những học viên đầu tiên

Bạn sẽ nhận được điều này sau khi học.

  • Nắm vững thiết kế đáp ứng từ khái niệm đến thực hành.

  • Thành thạo "Auto Layout" – tinh hoa của Figma – để ứng dụng vào thiết kế đáp ứng.

  • Ứng dụng các tính năng Auto Layout, Grid, Constraints của Figma, chúng ta sẽ tạo responsive cho các yếu tố thiết kế UI nhỏ, thẻ và component.

  • Có thể thiết kế cả web và ứng dụng theo dạng responsive.

  • Sẽ có được năng lực thiết kế "đáp ứng" có khả năng linh hoạt ứng phó với nhiều môi trường thiết bị khác nhau chỉ với một thiết kế.

  • Có thể bàn giao thiết kế hiệu quả hơn cho nhà phát triển và các bên liên quan.

띠배너

2 lý do tại sao người mới bắt đầu/sinh viên chuẩn bị việc làm "nhất định" phải thành thạo thiết kế responsive🤔


Lý do thứ nhất. Vì đây là năng lực quan trọng mà người làm thực tế/người phỏng vấn coi trọng. Năng lực thiết yếu để có việc làm(!)

Tôi có một insight từ kinh nghiệm làm thực tế thiết kế sản phẩm trong ngành, đồng thời là người phỏng vấn và huấn luyện UX cho những người mới bắt đầu. Đó là "Nếu muốn có việc làm, ứng viên cần có khả năng mà người phỏng vấn muốn thấy, chứ không phải khả năng mà ứng viên muốn thể hiện". Điều này giống như việc phải nắm bắt ý định của người ra đề trong kỳ thi đại học - nghe có vẻ quá đơn giản và hiển nhiên, nhưng thực tế nhiều ứng viên không thực sự suy nghĩ kỹ về điều này, nên trong quá trình tích lũy kinh nghiệm, câu trả lời là


Lý do thứ hai. Tăng năng suất công việc đáng kể và thiết kế trải nghiệm người dùng tốt hơn

Ngày nay, người dùng không chỉ sử dụng một thiết bị duy nhất mà họ chuyển đổi giữa các thiết bị có kích thước màn hình khác nhau như điện thoại thông minh, máy tính bảng, laptop để sử dụng website hoặc ứng dụng. Trong môi trường như vậy, nhà thiết kế phải thiết kế sao cho người dùng có thể sử dụng dịch vụ một cách tự nhiên mà không gặp bất tiện nào trên bất kỳ kích thước màn hình nào.

Từ ví dụ về Uber ở trên, chúng ta có thể thấy rằng khi sử dụng cùng một dịch vụ trên các thiết bị khác nhau, mặc dù cấu trúc giao diện và cách bố trí thông tin có thay đổi, nhưng nhìn chung vẫn duy trì được trải nghiệm người dùng nhất quán. Chính thiết kế responsive là thứ giúp cung cấp trải nghiệm thống nhất cho người dùng trên các màn hình khác nhau như vậy.

Nếu hiểu và có thể sử dụng thiết kế responsive một cách đúng đắn thì năng suất công việc sẽ được cải thiện đáng kể. Nếu từ đầu đã thiết kế và tạo ra cấu trúc có thể ứng phó linh hoạt với kích thước màn hình, thì sẽ giảm bớt việc phải tạo lặp lại các thiết kế riêng biệt cho từng thiết bị, và tốc độ làm việc sẽ nhanh hơn gấp nhiều lần khi tái sử dụng thiết kế. Ngoài ra, trong quá trình hợp tác với các developer, chi phí sửa đổi không cần thiết và giao tiếp cũng giảm bớt, giúp kết nối giữa thiết kế-phát triển diễn ra hiệu quả hơn nhiều.

Kết quả là, thiết kế responsive không chỉ là kỹ thuật tạo ra "màn hình đẹp mắt", mà là năng lực cốt lõi trong thực tế giúp mang lại trải nghiệm nhất quán hơn với ít nỗ lực hơn.

Xin chào. Tôi là Eric, nhà thiết kế sản phẩm. 👋

Tôi hiện đang làm việc với vai trò Senior Product Designer trong ngành công nghệ tại New York, Hoa Kỳ. Từ UX Research đến UI Design, xây dựng và quản lý Design System, tôi đảm nhận các công việc thực tế bao trùm toàn bộ lĩnh vực UX/UI và cũng đóng vai trò là người phỏng vấn, có trách nhiệm xem xét và đánh giá portfolio của các ứng viên. Chính vì vậy, tôi hiểu rõ những năng lực thực sự cần thiết đối với người mới bắt đầu hoặc những ai đang chuẩn bị tìm việc. Và tôi cũng đã viết cuốn sách dành cho người mới bắt đầu học UX Design là "Design thinking for beginners" - cuốn sách đã lọt vào danh sách Amazon Bestseller.


Lý do tôi tạo ra khóa học này là vì sau khi thành thạo thiết kế responsive và các tính năng cốt lõi của Figma cho mục đích này trong công việc thực tế, tôi đã trải nghiệm việc năng suất và hiệu quả thiết kế được cải thiện gấp nhiều lần. Cốt lõi của điều đó chính là phương pháp thiết kế màn hình có hệ thống sử dụng các tính năng Auto Layout, Grid và Constraints của Figma.

Trước đây, để đáp ứng cùng một thiết kế cho các kích thước màn hình khác nhau, tôi phải tốn quá nhiều thời gian để tạo mới và chỉnh sửa. Nhưng bây giờ, tôi đã có thể xây dựng thiết kế UI dạng responsive có thể linh hoạt đáp ứng nhiều thiết bị khác nhau chỉ với một thiết kế, và kết quả là công việc lặp lại đã giảm, sự hợp tác giữa designer-developer cũng trở nên mượt mà hơn nhiều. Dựa trên kinh nghiệm, kiến thức và bí quyết thực tế của mình, tôi sẽ giúp thiết kế responsive tăng đáng kể khả năng có việc làm cho những bạn mới bắt đầu/chuẩn bị tìm việc, và giúp các designer đang làm việc nhưng chưa biết thiết kế responsive có thể cải thiện đáng kể năng suất công việc. Hãy tận dụng cơ hội này để học đúng cách về thiết kế responsive và tạo ra cơ hội phát triển sự nghiệp nhé.

Bạn sẽ học được gì trong khóa học này? 🧑‍🏫

Hiểu đúng khái niệm và nguyên lý của thiết kế responsive

Tại sao cần thiết kế responsive, nó giải quyết những vấn đề gì - chúng ta sẽ xem xét lý thuyết để xây dựng nền tảng vững chắc. Hiểu rõ sự khác biệt trong trải nghiệm người dùng theo từng thiết bị và nắm vững các khái niệm cốt lõi sẽ là nền tảng cho các bài thực hành sau này.

"Auto Layout và tùy chọn Resizing", làm chủ vũ khí cốt lõi của Figma cho thiết kế responsive

Sức mạnh thực sự của Figma nằm ở Auto Layout và các tùy chọn Resizing. Chúng ta sẽ tạo ra các component và màn hình thường được sử dụng trong thực tế, đồng thời học các nguyên lý về tự động căn chỉnh và bố cục linh hoạt thông qua các ví dụ thực tế.

Chinh phục hoàn toàn hệ thống Grid

Grid là bản thiết kế ẩn của thiết kế responsive. Bạn sẽ học một cách có hệ thống về nguyên lý của grid và cách ứng dụng thực tế để có thể tạo ra UI nhất quán trên các kích thước màn hình khác nhau.

Tạo đối tượng phản hồi linh hoạt với Constraints

Bí mật của layout không bị vỡ dù màn hình thu nhỏ hay mở rộng, chính là Constraints. Học cách cấu thành các object linh hoạt để đáp ứng với nhiều kích thước thiết bị khác nhau thông qua thực hành.

Học thiết kế responsive qua các trường hợp thực tế

Chỉ có lý thuyết thôi là chưa đủ. Hãy phát triển khả năng thiết kế responsive có thể áp dụng ngay vào công việc thực tế thông qua các ví dụ UI thực tế đa dạng.

Mẹo vàng cho thiết kế UI🍯 Đại phát hành

Trong khóa học, tôi sẽ chia sẻ không tiếc tay các plugin và tài liệu mà tôi thực sự đang sử dụng trong công việc thực tế. Để công việc responsive từng khiến bạn bối rối trở nên dễ dàng hơn nhiều, khóa học chứa đựng những mẹo thực chiến có thể áp dụng ngay lập tức.

Thông qua khóa học này, chúng ta sẽ tạo ra những gì? 📐

Thiết kế và triển khai trực tiếp giao diện người dùng responsive được tối ưu hóa cho môi trường web và ứng dụng. Hãy tạo ra các layout thực tế có thể thích ứng tự nhiên với nhiều thiết bị khác nhau.

Thiết kế "ứng dụng" theo phong cách responsive

Tìm hiểu cách giao diện ứng dụng di động phải đáp ứng với các kích thước màn hình và độ phân giải khác nhau, đồng thời thực hành triển khai màn hình ứng dụng thực tế theo cách responsive.

Tạo thiết kế "web" responsive

Học cách cấu thành UI phản hồi trong môi trường web và trực tiếp thiết kế layout mở rộng tự nhiên từ desktop đến mobile.

Tạo card responsive

Chúng ta sẽ thiết kế các thẻ nội dung có chứa hình ảnh và văn bản để chúng biến đổi một cách tự nhiên theo các độ rộng màn hình khác nhau.

Tạo bảng

Xây dựng UI bảng responsive có thể đối phó với nhiều tình huống khác nhau như căn chỉnh, độ rộng, cấu trúc ô và phát triển năng lực thiết kế thực tế.

Tạo UI Component với thiết kế responsive

Thiết kế các thành phần UI thường được sử dụng trong thực tế như nút bấm, ô nhập liệu theo kiểu responsive, học cách tạo cấu trúc có thể tái sử dụng và đáp ứng được nhiều kích thước màn hình khác nhau.

Thực hành các trường hợp khác nhau

Thực hành với các tình huống UI đa dạng thường gặp trong công việc thực tế để mở rộng khả năng cảm nhận thiết kế responsive. Thông qua việc luyện tập lặp đi lặp lại, phát triển năng lực ứng phó linh hoạt với cả những layout phức tạp.

Chúng tôi khuyến nghị cho những người như thế này 🧭

🎯 Người mới bắt đầu / Sinh viên chuẩn bị việc làm

Tôi khuyến khích khóa học này cho những người mới bắt đầu học thiết kế hoặc đang chuẩn bị tìm việc muốn nắm vững các khái niệm cốt lõi và kỹ năng thực tế của thiết kế responsive. Bạn sẽ có thể trang bị khả năng sử dụng Figma có thể áp dụng ngay vào công việc thực tế và khả năng tạo UI responsive có thể tạo ấn tượng mạnh mẽ trong portfolio của mình.


💻 Nhà thiết kế đang làm việc

Tôi khuyến nghị khóa học này cho các nhà thiết kế muốn nâng cao độ hoàn thiện trong công việc thực tế bằng cách học các tính năng cốt lõi của thiết kế responsive như grid, auto layout. Bạn sẽ có thể trang bị khả năng thiết kế UI được tối ưu hóa cho nhiều loại màn hình khác nhau.


🧩 Nhà hoạch định / PM / PO

Phù hợp với các bạn làm kế hoạch·PM·PO muốn tạo wireframe hiệu quả và hợp tác suôn sẻ với designer. Hiểu được chức năng layout của Figma sẽ giúp cả thiết kế màn hình và giao tiếp đều trở nên dễ dàng hơn.


🛠 Nhà phát triển

Nếu bạn là một nhà phát triển frontend, bạn có thể có cơ hội hiểu cách làm việc của designer và nâng cao hiệu quả hợp tác. Ngay cả khi trực tiếp xử lý thiết kế, bạn cũng có thể học cấu trúc và nguyên lý của UI responsive để tự tin chuẩn bị cho giai đoạn thiết kế trước khi phát triển.

Câu hỏi thường gặp 📌

Q. Người không chuyên ngành có thể học được không?

A.Vâng, khóa học này được thiết kế dành cho người mới bắt đầu và những người không chuyên. Tuy nhiên, tôi khuyến nghị bạn nên có kiến thức cơ bản về khái niệm UX design, kiến thức nền tảng cho UI design và làm quen với các chức năng cơ bản của Figma trước khi tham gia. Nếu bạn mới bắt đầu với UX/UI design, tôi khuyên bạn nên học trước Khái luận UX Design cho người mới bắt đầuKhóa học UI Design sử dụng Figma mà tôi đã mở trên Inflearn. Sau đó, bạn sẽ có thể nắm vững responsive design nhanh hơn gấp nhiều lần thông qua khóa học này.


Q. Làm thế nào để có thể nhanh chóng thành thạo thiết kế responsive?

A. Nếu bạn đã nắm được các nguyên lý cơ bản về thiết kế responsive và cách sử dụng công cụ Figma, thì điều quan trọng nhất là bạn nên "trực tiếp" thực hành với nhiều ví dụ khác nhau. Trong khóa học này, chúng tôi đã chuẩn bị từ những kiến thức cơ bản đến các trường hợp thực tế đa dạng, và sẽ hướng dẫn bạn để có thể thành thạo thông qua việc thực hành theo. Tuy nhiên, điều quan trọng nhất là bạn không chỉ xem bài giảng mà phải "trực tiếp" thực hành theo.


Q. Có thể học trên Windows và MacBook không?

A.Có thể. Khóa học này được tạo ra dựa trên công cụ Figma. Figma là phần mềm dựa trên trình duyệt internet nên có thể chạy trên cả Windows và MacBook, và trong khóa học này tôi cũng sẽ hướng dẫn các phím tắt mà tôi sử dụng cho cả Windows/MacBook.


Q. Có thể học khóa học với phiên bản miễn phí của Figma không?

A. Vâng, nội dung học trong khóa học này có thể được nghe bằng phiên bản miễn phí của Figma.

Tài liệu học tập

  • Chúng tôi cung cấp tệp Figma được tổ chức để bạn có thể trực tiếp thực hành tất cả các trường hợp được đề cập trong bài giảng.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người mới và ứng viên UX/UI Design muốn đạt mục tiêu nghề nghiệp nhanh hơn.

  • Lập trình viên hợp tác với nhà thiết kế UX/UI, hoặc tự thiết kế

  • PM/PO/서비스기획자 muốn nâng cao năng suất công việc khi tạo tài liệu kế hoạch bằng cách sử dụng 오토레이아웃/그리드, v.v.

  • Nhà thiết kế Junior hoặc đương nhiệm chưa rành thiết kế đáp ứng hay cách dùng Auto Layout/Constraints.

Cần biết trước khi bắt đầu?

  • Kiến thức cơ bản và cách dùng Figma

  • Khái niệm cơ bản về UX/UI Design

Xin chào
Đây là

5,041

Học viên

683

Đánh giá

306

Trả lời

4.8

Xếp hạng

7

Các khóa học

현재 뉴욕의 글로벌 테크 회사 The Knot Worldwide에서 시니어 프로덕트 디자이너로 일하고 있습니다.

뉴욕에 오기 전에는 서울에서 UI기획자로 일을 했습니다.

브런치 매거진 "디자인, 그리고 프러덕트"와 UX, UI 지식과 정보를 공유하는 "뉴욕 UX디자이너" 인스타그램페이스북을 운영하며 디자이너 및 예비 디자이너들과 소통하고 있습니다.

개인적으로는 세 아이👶의 아빠이며 요리🍲, 교육🏫에 관심이 많습니다.

 

집필 및 강의

• "뉴욕 프로덕트 디자이너가 알려주는 UX디자인 입문 A to Z" 책 출간 (링크: Yes24, 알라딘, 교보문고

• 퍼블리 아티클 "서비스의 첫 인상을 결정하는 3초: 랜딩 페이지 UX 4가지 원칙" 발행

• Samsung SW Academy for Youth (SSAFY) UX/UI다자인 및 피그마 강사

• 1:1 멘토링 및 기업 강의 진행 (토픽: UX, UI디자인, UX퍼실리테이션, UX/UI 포트폴리오  제작 및 발행)

 

경험 및 경력

• (현) 뉴욕 The Knot Worldwide 시니어 프로덕트 디자이너

(전) 서울 Pantech 모바일 앱 UI기획자

• 뉴욕 기반의 다수 스타트업과 UX/UI 컨설팅 프로젝트 진행

• 뉴욕 School of Visual Arts 디자인 대학원 졸업 / 전공: Interaction Design

• 한동대학교 학부 졸업 / 전공: 산업디자인

Chương trình giảng dạy

Tất cả

40 bài giảng ∙ (5giờ 10phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

14 đánh giá

4.9

14 đánh giá

  • stumire9262님의 프로필 이미지
    stumire9262

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    Thank you for creating the necessary lectures.

    • uxeric
      Giảng viên

      Thank you for the feedback. I'm so happy that I was able to help you through the course. I'll be cheering for all your future plans to go well~!

  • goodrain2626님의 프로필 이미지
    goodrain2626

    Đánh giá 1

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    75% đã tham gia

    I'm working on frontend development at a startup, but I'm also handling design tasks. Until now, I've been fumbling through design by searching for YouTube materials only when needed, but this time I had to learn responsive design quickly. Since the course is practice-oriented, I can follow along step by step or try first and then check, which seems effective for learning responsive design in a short period! The part where you explained the principles of constraints was especially helpful, and when alignment wasn't working, you pointed out why, which helped me understand aspects I had previously missed. Also, although I had difficulties with files during the course, I was grateful that you provided quick feedback despite the time difference...! This time, instead of the tedious way of manually adjusting values stitch by stitch like before, I want to work efficiently by properly applying what I learned in the course. Thank you so, so much 😭😭! I'll keep fighting until the end and complete the course!

    • uxeric
      Giảng viên

      I'm delighted to be able to help through the responsive design course. I also remember the times when I didn't use auto layout or constraints and had to do a lot of manual work stitch by stitch. I can say that productivity has increased dozens of times now. I believe that if Joy applies the course content to practical work, it will enhance work efficiency. Thank you for your valuable feedback, and I'll be cheering for you to achieve all the things you're planning ahead.

  • ko98329025님의 프로필 이미지
    ko98329025

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    50% đã tham gia

    I'm someone for whom understanding 'why' something needs to be done serves as a very important motivator. Actually, even if you know many features, if you don't know how to apply them or they're not practical, the utility of the information you have would decrease and the meaning of learning those features would also fade significantly. However, what I liked most about this course was that it felt like it was created not through a learning -> practical application route, but rather through a practical difficulties -> learning -> overcoming difficulties route. The way you actually explained things was also structured as why this feature is important in practice -> how to apply it + actual case examples, so it stuck in my head much better. And because you explained things in an easy way, I was able to completely break down the burden I felt about parts I had vaguely thought were difficult features. Also, as a job seeker, you told us throughout the course 'why' these are frequently used in practice, so even while learning, I found myself thinking I should remember this and looking at it once more. Thanks to this, my vague fear and burden about practical work has also decreased! Thank you :)

    • uxeric
      Giảng viên

      Thank you for your thoughtful review. I also remember feeling frustrated when I first learned and studied responsive design, especially auto layout, not knowing how to apply it in actual work. In other words, I didn't want to learn just for the sake of learning the feature itself, but I wanted to learn how to solve the problem of responsive design, and I remember that wasn't easy. So while creating this course, I tried to structure the curriculum and content by thinking about how students, especially beginners or those preparing for employment, could more easily understand and acquire skills applicable to real work. In other words, I set the goal of creating a course so that after taking this course and mastering responsive design, an applicant would make an interviewer think, "This person is ready with responsive design skills." Hearing that this course has reduced the vague and fearful burden of real work (!!) makes me incredibly happy and gives me great satisfaction in creating this course :) Once again, thank you for leaving such valuable reviews and feedback, and I deeply support all your future career plans.

  • jm0park님의 프로필 이미지
    jm0park

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    80% đã tham gia

    Thank you so much for such a valuable lecture! Sharing the Figma files made it great to practice along directly. However, I didn't quickly realize the materials were available at first, so I went searching for them during the lecture😊😊 Your intuitive explanations using comparisons, examples, analogies, etc. made it easy for beginners to understand, and it was wonderful to learn about the effects and applications of even the less noticeable Figma features! Plus, the quizzes at the end of each section helped me review and recall the content from each cycle, making the learning process enjoyable.

    • juliepj673691님의 프로필 이미지
      juliepj673691

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      30% đã tham gia

      Even though these are basics I already know, you explain the fundamentals thoroughly and easily as a reminder, making it easy to understand! You show real-world examples while explaining, and I think it's great that I can find similar cases on my own to compare and study!!!

      • uxeric
        Giảng viên

        Thank you. I designed the course with the goal of making it easy for students to understand and follow along, so I'm absolutely delighted to hear that it was helpful. I'll be cheering you on to achieve all the things you're planning in the future.

    2.090.612 ₫

    Khóa học khác của uxeric

    Hãy khám phá các khóa học khác của giảng viên!

    Khóa học tương tự

    Khám phá các khóa học khác trong cùng lĩnh vực!