
Hướng dẫn GSAP dành cho hoạt hình trên web Phần 02
kindtiger
“GSAP có khả thi không?” Chúng tôi sẽ phá bỏ định kiến hiện có rằng hoạt hình là phức tạp và khó khăn.
Basic
gsap, Interactive Web, JavaScript
Through this course, you will build a design system and experience the explosive synergy of your design work.
How to build a design system
The concept of atomic design and how to apply it in practice
Building a system with Figma
Communication between designers and developers
Collaborative web applications for interface design,
Learn design using Figma ✍️
With each additional design, the communication costs between designers and developers increase, and as the business grows, it becomes increasingly difficult for developers to cope.
Understanding and building a design system can significantly reduce communication costs. Many designers are curious about design systems, but don't know where to start. This course was designed for those who are curious about them but don't know where to start.
❓ My design work that is similar but strangely different ,
How to maintain a consistent form while at the same time
Can we communicate the design in a way that makes it easier for developers to develop?
Design system using Figma
You can know and understand the construction process.
Reducing communication costs between designers and developers, maximizing work efficiency! This is the purpose of a design system.
In this course, we will build a system that does not only use the native Figma system, but also works with the Figma tokens plugin, and build a system that allows all design tokens to be handed off to developers.
After attending the lecture, students...
💡You will develop an eye for viewing all design work from a system perspective, and you will develop the habit of designing work that does not violate the system.
💡Understand the atomic design system and consider the reusability of design work.
💡You will gain a better understanding of the components, which will allow you to communicate more smoothly with developers.
This plugin allows you to manage design tokens created in Figma in one place. It integrates with the Figma native system and is used for handoffs to developers later.
We have a process of registering the spacing, color, typography, and grid, which are the basic foundations of design work, into the system.
All design work is created and managed as components with reusable forms in mind.
Each part is made and then assembled to create a finished product.
👇 Final Result 👇
Q. I don't know much about design systems. Can I still take the course?
This class is for those people. We start with the theory of design systems.
Q. Why should I learn a design system?
Communication issues between designers and developers are bound to arise, so minimizing them is a task for both designers and developers.
Q. Is there anything I need to prepare before attending the lecture?
Since this is not a description of the basic tools of Figma, it is recommended that you know how to use the basic tools.
Q. Are there any notes (environment requirements) regarding taking the course?
Since we are building the system with Figma, please download the Figma account and desktop app.
Who is this course right for?
Designers who want to collaborate smoothly with developers
Developers who value communication with designers
Anyone who wants to build an in-house design system
For those who want to understand Figma in depth
Need to know before starting?
Figma
GitHub
Understanding variables
4,411
Learners
223
Reviews
292
Answers
4.9
Rating
5
Courses
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
All
31 lectures ∙ (5hr 31min)
All
72 reviews
4.9
72 reviews
Reviews 10
∙
Average Rating 4.8
5
Giờ đây (đã) Figma đã trở thành một công cụ thiết yếu trong lĩnh vực phát triển giao diện người dùng ứng dụng/web. Tôi cảm thấy nó đã trở thành một công cụ giao tiếp mà cả nhà phát triển và người không phải nhà phát triển đều có thể sử dụng thoải mái. Trong quá trình phát triển giao diện người dùng web, các bước chuyển giao sau thường xảy ra. Nhà thiết kế -> Nhà phát triển đánh dấu HTML -> Nhà phát triển SPA/MPA Bất cứ khi nào xảy ra sự thay đổi chủ sở hữu, cần phải có sự giao tiếp tích cực khi mỗi người vượt qua phạm vi công việc của mình. Càng sử dụng Figma, tôi càng tin rằng đây là công cụ phù hợp cho tình huống này. Mọi nhà thiết kế/nhà phát triển front-end nên học Figma. Tuy nhiên, vì bài giảng này không đề cập đến những kiến thức cơ bản về sử dụng Figma nên có thể gây khó khăn cho những người mới làm quen với các công cụ thiết kế. Tôi nghĩ ngay cả những người đó cũng có thể theo dõi mà không gặp nhiều khó khăn nếu họ chỉ theo dõi đến phần 3. Cấu trúc của bài giảng tương tự như một hình fractal. Khóa học này trang bị cho các nhà thiết kế/nhà phát triển những kỹ năng sau: Tóm tắt các thành phần thiết kế thành hệ thống thiết kế (Phần 1. Thi công nền móng) Triển khai thiết kế dựa trên hệ thống thiết kế (Phần 1 đến Phần 11) Xử lý hệ thống thiết kế thành mã thông báo thiết kế (Phần 12 ~ Phần 13) Các nhà phát triển cũng sẽ có thể tìm hiểu quy trình thiết kế tổng thể. Đặc biệt, tôi nghĩ đây là bài giảng đầu tiên ở Hàn Quốc đề cập đến việc xử lý hệ thống thiết kế thành mã thông báo thiết kế (Phần 1, Phần 12, Phần 13). Để tham khảo, Design Token là một tiêu chuẩn quốc tế dành cho các thành phần thiết kế. Giống như tiêu chuẩn quốc tế về thông số kỹ thuật API an toàn là OpenAPI (vênh vang). Trong tương lai, các thư viện và triển khai dựa trên mã thông báo thiết kế sẽ được bổ sung. Nếu bạn xây dựng một hệ thống thiết kế bằng Figma, bạn có thể dễ dàng trích xuất mã thông báo thiết kế và cưỡi trên làn sóng lớn. Tôi khuyên bạn nên khóa học này.
Reviews 1
∙
Average Rating 5.0
5
Tôi là một nhà phát triển giao diện người dùng cộng tác rất nhiều với các nhà thiết kế. Đôi khi, chúng ta gặp phải những khác biệt nhỏ về màu sắc có vẻ giống nhau hoặc lề do trực giác của người thiết kế đặt ra mà không có tiêu chuẩn nhất quán. Đặc biệt, việc bảo trì là một nỗi đau hoàn toàn. Sau đó, trong khi tìm cách giải quyết vấn đề này, tôi đã tìm hiểu về khái niệm hệ thống thiết kế và xem qua các ví dụ về ứng dụng của nó tại một số công ty CNTT nổi tiếng. Tôi đã đề xuất xây dựng một hệ thống thiết kế với nhà thiết kế mà tôi đang làm việc cùng, nhưng tôi không biết bắt đầu như thế nào, vì vậy tôi đã xem qua “Hệ thống thiết kế với Figma”. Bài giảng là sự lựa chọn tốt nhất. Tôi nghĩ đây là khóa học mà tất cả các nhà quy hoạch, nhà thiết kế và nhà phát triển nên tham gia. Tôi thực sự muốn giới thiệu nó cho bất kỳ công ty nào sử dụng Figma.
Reviews 1
∙
Average Rating 5.0
5
Vì vậy, đây là bài giảng trình bày tầm nhìn và phương pháp về những gì bạn có thể làm với figma này cũng như hướng đi mà bạn nên thực hiện để hoàn thành. Ngoài việc thực hành tạo một trang duy nhất bắt đầu từ thành phần cấp thấp hơn, kinh nghiệm phong phú và các mẹo thực tế của người hướng dẫn đã được kết hợp chặt chẽ nên tôi không chỉ thích thú với kết quả tạo ra sau khi nghe mà còn cả những kiến thức khác thu được. Tôi nghĩ sẽ có lợi cho bản thân khi tạo ra một hệ thống thiết kế thông qua Figma, nhưng nó sẽ là một công cụ rất hấp dẫn cho cả nhà phát triển và nhà thiết kế ở chỗ nó có thể giảm đáng kể khả năng xảy ra tranh cãi do lỗi giao tiếp với các cộng tác viên thuộc các bộ phận khác nhau. bạn có thể. Một trong những điều khiến tôi rất hài lòng là tại sao nó lại phải được làm như thế này? Bởi vì điều này được dạy trong suốt bài giảng và thức ăn để suy nghĩ được cung cấp, các nhà phát triển giao diện người dùng, nhà xuất bản web và nhà thiết kế web có thể dễ dàng tạo ra các kết quả dễ dàng và phức tạp bằng cách theo đuổi một phương pháp dễ hiểu, đồng ý lẫn nhau và thiết lập các quy tắc chung. nó cho phép bạn hiểu. Bạn chỉ cần làm như thế này thôi! Đúng hơn, đó là một bài giảng hay giúp mở rộng chiều rộng và tính linh hoạt trong tư duy của học sinh. Công cụ thiết kế của Figma có thể xa lạ với các nhà phát triển front-end và khó có thể hiểu ngay nguyên tắc hoạt động của nó, nhưng nó hướng dẫn từng bước cách thực hiện, vì vậy bạn có thể học cách sử dụng công cụ này bằng cách nghe bài giảng. Có thể phải thực hành thêm một chút để thành thạo, nhưng tôi tin rằng bạn sẽ nhanh chóng yêu thích sự quyến rũ của Figma, chuyên về cộng tác!
Reviews 1
∙
Average Rating 5.0
Reviews 5
∙
Average Rating 4.4
5
Nó có rất nhiều nội dung hữu ích và rất hữu ích. Thật tuyệt vời khi biết một phương pháp có thể được sử dụng trong thực tế. Tuy nhiên, màn hình làm việc của bài giảng lớn nên có nhiều mục bảng điều khiển ở bên trái và bên phải, đồng thời các biểu tượng và văn bản đều nhỏ. Ngay cả khi xem ở chất lượng 1080 cũng khó nhìn, nhức mắt và khó chịu. khiến bạn khó tập trung. ㅠㅠ Ví dụ: vì chỉ có màn hình làm việc ở trên cùng là phù hợp nên bạn nên cắt bỏ màn hình làm việc ở phía dưới để có thể xem được màn hình lớn hơn.
Limited time deal
$718,141.00
22%
$34.10
Check out other courses by the instructor!
Explore other courses in the same field!