웹 애니메이션을 위한 GSAP 가이드 Part.01
범쌤
GSAP을 통해 인터랙티브 웹 개발에 한 단계 다가갈 수 있으며, 애니메이션을 보는 관점이 달라질 겁니다.
Basic
gsap, 인터랙티브 웹, JavaScript
BEST
Hệ thống thiết kế với figma
Thông qua bài giảng này, hãy xây dựng một hệ thống thiết kế và cảm nhận sức mạnh tổng hợp bùng nổ trong công việc thiết kế của bạn.
Đánh giá từ những học viên đầu tiên
Dịch cái này sang tiếng Việt
Cách xây dựng hệ thống thiết kế
Khái niệm về thiết kế nguyên tử và cách áp dụng nó vào thực tế
Xây dựng hệ thống với Figma
Giao tiếp giữa nhà thiết kế và nhà phát triển
Ứng dụng web cộng tác để thiết kế giao diện,
Học thiết kế bằng Figma ✍️
Cuối cùng, nó được sử dụng mọi lúc
Mục tiêu là giảm chi phí truyền thông.
Với mỗi thiết kế bổ sung, chi phí giao tiếp giữa nhà thiết kế và nhà phát triển sẽ tăng lên và khi doanh nghiệp phát triển, các nhà phát triển sẽ ngày càng khó khăn hơn để đối phó.
Việc hiểu và xây dựng một hệ thống thiết kế có thể giảm đáng kể chi phí truyền thông. Nhiều nhà thiết kế tò mò về hệ thống thiết kế nhưng không biết bắt đầu từ đâu. Khóa học này được thiết kế dành cho những ai tò mò về chúng nhưng chưa biết bắt đầu từ đâu.
❓ Tác phẩm thiết kế của tôi tương tự nhưng lại khác biệt một cách kỳ lạ ,
Làm thế nào để duy trì một hình thức nhất quán trong khi cùng một lúc
Chúng ta có thể truyền đạt thiết kế theo cách giúp các nhà phát triển phát triển dễ dàng hơn không?
Tôi giới thiệu điều này cho những người này ✔️
Tôi muốn xây dựng một hệ thống thiết kế
Các nhà thiết kế không biết bắt đầu như thế nào
Tôi biết cách sử dụng các công cụ Figma, nhưng một cách có hệ thống
Các nhà thiết kế không biết cách áp dụng
Hiểu hệ thống thiết kế và nhận mã thông báo thiết kế
Các nhà phát triển muốn sử dụng nó để phát triển
Hệ thống thiết kế cho phép các nhà thiết kế và nhà phát triển
Những người lập kế hoạch muốn đọc thông tin liên lạc
Hệ thống thiết kế với Figma 🎨
Hệ thống thiết kế sử dụng Figma
Bạn có thể biết và hiểu được quá trình xây dựng.
Hệ thống thiết kế dùng để làm gì 🌀
Giảm chi phí giao tiếp giữa nhà thiết kế và nhà phát triển, tối đa hóa hiệu quả công việc! Đây chính là mục đích của hệ thống thiết kế.
Trong khóa học này, chúng ta sẽ xây dựng một hệ thống không chỉ sử dụng hệ thống Figma gốc mà còn hoạt động với plugin mã thông báo Figma và xây dựng một hệ thống cho phép chuyển giao tất cả mã thông báo thiết kế cho các nhà phát triển.
Sau khi tham dự buổi thuyết trình, sinh viên...
💡Bạn sẽ phát triển được con mắt nhìn nhận mọi công việc thiết kế theo góc nhìn hệ thống và hình thành thói quen thiết kế công việc không vi phạm hệ thống.
💡Hiểu được hệ thống thiết kế nguyên tử và xem xét khả năng tái sử dụng của công việc thiết kế.
💡Bạn sẽ hiểu rõ hơn về các thành phần, giúp bạn giao tiếp dễ dàng hơn với các nhà phát triển.
Bạn sẽ học được gì 📚
Plugin này cho phép bạn quản lý các mã thông báo thiết kế được tạo trong Figma tại một nơi. Nó tích hợp với hệ thống gốc của Figma và được sử dụng để chuyển giao cho các nhà phát triển sau này.
Chúng tôi có quy trình đăng ký khoảng cách, màu sắc, kiểu chữ và lưới, vốn là nền tảng cơ bản của công việc thiết kế, vào hệ thống.
Mọi công việc thiết kế đều được tạo ra và quản lý như các thành phần có tính đến khả năng tái sử dụng.
Mỗi bộ phận được chế tạo và sau đó lắp ráp lại để tạo thành sản phẩm hoàn chỉnh.
👇 Kết quả cuối cùng 👇
Câu hỏi dự kiến Hỏi & Đáp 💬
H. Tôi không biết nhiều về hệ thống thiết kế. Tôi có thể tham gia khóa học này không?
Lớp học này dành cho những người đó. Chúng ta sẽ bắt đầu với lý thuyết về hệ thống thiết kế.
H. Tại sao tôi nên học hệ thống thiết kế?
Các vấn đề giao tiếp giữa nhà thiết kế và nhà phát triển chắc chắn sẽ phát sinh, do đó việc giảm thiểu chúng là nhiệm vụ của cả nhà thiết kế và nhà phát triển.
H. Tôi có cần chuẩn bị gì trước khi tham dự buổi thuyết trình không?
Vì đây không phải là mô tả về các công cụ cơ bản của Figma nên bạn nên biết cách sử dụng các công cụ cơ bản.
H. Có lưu ý nào (yêu cầu về môi trường) liên quan đến việc tham gia khóa học không?
Vì chúng tôi đang xây dựng hệ thống bằng Figma, vui lòng tải xuống tài khoản Figma và ứng dụng máy tính để bàn.
Khuyến nghị cho
những người này
Khóa học này dành cho ai?
Nhà thiết kế muốn cộng tác suôn sẻ với các nhà phát triển
Nhà phát triển coi trọng việc giao tiếp với các nhà thiết kế
Bất cứ ai muốn xây dựng một hệ thống thiết kế nội bộ
Bất cứ ai muốn hiểu sâu sắc về Figma
Cần biết trước khi bắt đầu?
hình tượng
GitHub
Hiểu các biến
4,393
Học viên
222
Đánh giá
292
Trả lời
4.9
Xếp hạng
5
Các khóa học
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
Chương trình giảng dạy
Tất cả
31 bài giảng ∙ (5giờ 31phút)
Ngày đăng:
Cập nhật lần cuối:
Đánh giá
Tất cả
71 đánh giá
4.9
71 đánh giá
서재원 SeoĐánh giá 10
∙
Đánh giá trung bình 4.8
5
100% đã tham gia이제(이미) 피그마는 앱/웹 프론트엔드 개발 현장에서 필수적인 도구가 되었습니다. 개발자와 비 개발자 모두가 부담없이 사용할 수 있는 커뮤니케이션 도구가 된 느낌입니다. 웹 프론트엔드를 개발하는 과정에서는 보통 아래와 같은 손바뀜(핸드오프)이 일어납니다. 디자이너 -> HTML 마크업 개발자 -> SPA/MPA 개발자 손바뀜이 일어날 때마다 각자의 업무범위를 넘나들면서 활발한 커뮤니케이션이 필요하게 되는데.. 피그마를 사용해 볼수록, 피그마야말로 이런 상황에 적합한 도구라는 확신이 생깁니다. 모든 디자이너/프론트엔드 개발자는 피그마를 배워야 합니다. 하지만 이 강의에서는 피그마의 기초 사용법을 다루지 않기 때문에, 디자인 도구를 처음 다루는 분께는 어려울 수 있습니다. 그런 분들도 섹션 3까지만 따라해 보시면 큰 무리없이 따라오실 수 있으리라 생각합니다. 강의 구성이 마치 프렉탈 도형과 비슷하거든요. 이 강의는 디자이너/개발자에게 아래와 같은 소양을 갖추게 해 줍니다. 디자인 구성요소를 디자인 시스템으로 추상화하기(섹션 1. Foundation 구성하기) 디자인 시스템에 기반한 디자인 구현하기(섹션 1 ~ 섹션11) 디자인 시스템을 디자인 토큰으로 가공하기(섹션12~섹션13) 개발자도 전체적인 디자인 프로세스를 익힐 수 있게 됩니다. 특히 디자인 시스템을 디자인 토큰으로 가공하는(섹션 1, 섹션 12, 섹션 13) 부분을 국내에서 처음 다룬 강의가 아닐까 생각합니다. 참고로 디자인 토큰은 디자인 구성요소에 대한 국제 표준입니다. restful api 스펙의 국제 표준이 OpenAPI(swagger)인 것과 같습니다. 앞으로 디자인 토큰에 기반한 라이브러리와 구현이 쏟아질 것입니다. 피그마를 사용해 디자인 시스템을 구축하면, 디자인 토큰을 쉽게 추출할 수 있고, 거대한 흐름에 올라탈 수 있습니다. 이 강의를 추천합니다.
- 전용준
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
43% đã tham gia디자이너와 협업을 많이 하는 UI 개발자 입니다. 간혹 동일해 보이는 색상이 미세한 차이가 있거나 일정한 기준 없이 디자이너의 직관으로 설정한 여백 등으로 고통을 겪어 왔습니다. 특히 유지보수가 절말 “헬” 이었거든요. 그러던차에 이를 해결할 수 있는 방법을 찾아보다가 디자인 시스템이라는 개념을 알게되었고 여러 유명 IT 기업에서의 적용 사례를 접했습니다. 함께 일하는 디자이너에게도 디자인 시스템을 구축해 보자고 의견을 드렸으나 어떻게 시작해야 할지 방향을 잡지 못하던 차에 만난 “디자인 시스템 with 피그마" 강의는 최고의 선택이었습니다. 기획자도 디자이너도 그리고 개발자도 모두 모두 들어야하는 강좌라고 생각합니다. 피그마를 사용하고 있는 기업이라면 강력하게 추천하고 싶습니다.
- 신지우
Đánh giá 1
∙
Đánh giá trung bình 5.0
5
13% đã tham gia그래서 대체 이 피그마로 뭘 할 수 있는지, 어떤 방향성을 갖고 완성을 향해 나아가야 하는지 비전과 방법을 함께 제시해주는 강의입니다. 하위 컴포넌트에서 시작해 하나의 페이지를 만드는 실습과 더불어서, 강사님의 풍부한 경험과 실전 팁들도 잘 녹아들어서 듣고 난 뒤에 만들어지는 결과물 뿐만 아니라 체득되는 다른 지식도 좋았습니다. 피그마를 통해 디자인 시스템을 만들어 나감으로서 내 자신이 얻는 이득도 있겠지만, 파트가 다른 협업자들과 커뮤니케이션의 오류로 인해 논쟁이 일어날 확률을 상당히 줄일 수 있다는 점에선 개발자와 디자이너 양자에게 아주 매력적일 툴이 될 수 있다고 생각합니다. 굉장히 만족스러웠던 점 중에 하나는, 어째서 이렇게 만들어져야 하는가? 를 강의 내내 주지시키고 또 생각할 거리가 주어지기 때문에, 프론트엔드 개발자던, 또는 웹 퍼블리셔나 웹 디자이너던 이해할 수 있는 방식을 추구해서, 서로 합의하고 공통 규칙을 정해서 수월하고 세련된 결과를 쉽게 만들어낼 수 있음을 이해할 수 있게 해 준다는 점입니다. 그냥 이렇게 해야 한다! 가 아니라 강의를 들은 수강생들이 생각할 수 있는 폭과 유연성을 넓혀주는 좋은 강의입니다. 피그마의 디자인 도구는 아무래도 프론트엔드 개발자의 입장에선 낯설수 있고 동작 원리를 바로 이해하기는 어렵지만, 어떻게 하는 지 하나하나 단계를 보여주기 때문에 강의를 듣다 보면 툴의 사용법은 알 수 있게 됩니다. 손에 익기 위해서는 약간의 연습이 더 필요하겠지만, 협업에 특화된 피그마의 매력에 금방 빠지게 되실 거라 믿습니다!
- 용석
Đánh giá 1
∙
Đánh giá trung bình 5.0
- abcdefg
Đánh giá 5
∙
Đánh giá trung bình 4.4
926.720 ₫
Khóa học khác của kindtiger
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!
