
웹 애니메이션을 위한 GSAP 가이드 Part.01
범쌤
GSAP을 통해 인터랙티브 웹 개발에 한 단계 다가갈 수 있으며, 애니메이션을 보는 관점이 달라질 겁니다.
Basic
gsap, 인터랙티브 웹, 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,393
Learners
222
Reviews
292
Answers
4.9
Rating
5
Courses
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
All
31 lectures ∙ (5hr 31min)
All
71 reviews
4.9
71 reviews
Reviews 10
∙
Average Rating 4.8
5
이제(이미) 피그마는 앱/웹 프론트엔드 개발 현장에서 필수적인 도구가 되었습니다. 개발자와 비 개발자 모두가 부담없이 사용할 수 있는 커뮤니케이션 도구가 된 느낌입니다. 웹 프론트엔드를 개발하는 과정에서는 보통 아래와 같은 손바뀜(핸드오프)이 일어납니다. 디자이너 -> HTML 마크업 개발자 -> SPA/MPA 개발자 손바뀜이 일어날 때마다 각자의 업무범위를 넘나들면서 활발한 커뮤니케이션이 필요하게 되는데.. 피그마를 사용해 볼수록, 피그마야말로 이런 상황에 적합한 도구라는 확신이 생깁니다. 모든 디자이너/프론트엔드 개발자는 피그마를 배워야 합니다. 하지만 이 강의에서는 피그마의 기초 사용법을 다루지 않기 때문에, 디자인 도구를 처음 다루는 분께는 어려울 수 있습니다. 그런 분들도 섹션 3까지만 따라해 보시면 큰 무리없이 따라오실 수 있으리라 생각합니다. 강의 구성이 마치 프렉탈 도형과 비슷하거든요. 이 강의는 디자이너/개발자에게 아래와 같은 소양을 갖추게 해 줍니다. 디자인 구성요소를 디자인 시스템으로 추상화하기(섹션 1. Foundation 구성하기) 디자인 시스템에 기반한 디자인 구현하기(섹션 1 ~ 섹션11) 디자인 시스템을 디자인 토큰으로 가공하기(섹션12~섹션13) 개발자도 전체적인 디자인 프로세스를 익힐 수 있게 됩니다. 특히 디자인 시스템을 디자인 토큰으로 가공하는(섹션 1, 섹션 12, 섹션 13) 부분을 국내에서 처음 다룬 강의가 아닐까 생각합니다. 참고로 디자인 토큰은 디자인 구성요소에 대한 국제 표준입니다. restful api 스펙의 국제 표준이 OpenAPI(swagger)인 것과 같습니다. 앞으로 디자인 토큰에 기반한 라이브러리와 구현이 쏟아질 것입니다. 피그마를 사용해 디자인 시스템을 구축하면, 디자인 토큰을 쉽게 추출할 수 있고, 거대한 흐름에 올라탈 수 있습니다. 이 강의를 추천합니다.
Reviews 1
∙
Average Rating 5.0
5
디자이너와 협업을 많이 하는 UI 개발자 입니다. 간혹 동일해 보이는 색상이 미세한 차이가 있거나 일정한 기준 없이 디자이너의 직관으로 설정한 여백 등으로 고통을 겪어 왔습니다. 특히 유지보수가 절말 “헬” 이었거든요. 그러던차에 이를 해결할 수 있는 방법을 찾아보다가 디자인 시스템이라는 개념을 알게되었고 여러 유명 IT 기업에서의 적용 사례를 접했습니다. 함께 일하는 디자이너에게도 디자인 시스템을 구축해 보자고 의견을 드렸으나 어떻게 시작해야 할지 방향을 잡지 못하던 차에 만난 “디자인 시스템 with 피그마" 강의는 최고의 선택이었습니다. 기획자도 디자이너도 그리고 개발자도 모두 모두 들어야하는 강좌라고 생각합니다. 피그마를 사용하고 있는 기업이라면 강력하게 추천하고 싶습니다.
Reviews 1
∙
Average Rating 5.0
5
그래서 대체 이 피그마로 뭘 할 수 있는지, 어떤 방향성을 갖고 완성을 향해 나아가야 하는지 비전과 방법을 함께 제시해주는 강의입니다. 하위 컴포넌트에서 시작해 하나의 페이지를 만드는 실습과 더불어서, 강사님의 풍부한 경험과 실전 팁들도 잘 녹아들어서 듣고 난 뒤에 만들어지는 결과물 뿐만 아니라 체득되는 다른 지식도 좋았습니다. 피그마를 통해 디자인 시스템을 만들어 나감으로서 내 자신이 얻는 이득도 있겠지만, 파트가 다른 협업자들과 커뮤니케이션의 오류로 인해 논쟁이 일어날 확률을 상당히 줄일 수 있다는 점에선 개발자와 디자이너 양자에게 아주 매력적일 툴이 될 수 있다고 생각합니다. 굉장히 만족스러웠던 점 중에 하나는, 어째서 이렇게 만들어져야 하는가? 를 강의 내내 주지시키고 또 생각할 거리가 주어지기 때문에, 프론트엔드 개발자던, 또는 웹 퍼블리셔나 웹 디자이너던 이해할 수 있는 방식을 추구해서, 서로 합의하고 공통 규칙을 정해서 수월하고 세련된 결과를 쉽게 만들어낼 수 있음을 이해할 수 있게 해 준다는 점입니다. 그냥 이렇게 해야 한다! 가 아니라 강의를 들은 수강생들이 생각할 수 있는 폭과 유연성을 넓혀주는 좋은 강의입니다. 피그마의 디자인 도구는 아무래도 프론트엔드 개발자의 입장에선 낯설수 있고 동작 원리를 바로 이해하기는 어렵지만, 어떻게 하는 지 하나하나 단계를 보여주기 때문에 강의를 듣다 보면 툴의 사용법은 알 수 있게 됩니다. 손에 익기 위해서는 약간의 연습이 더 필요하겠지만, 협업에 특화된 피그마의 매력에 금방 빠지게 되실 거라 믿습니다!
Reviews 1
∙
Average Rating 5.0
Reviews 5
∙
Average Rating 4.4
$34.10
Check out other courses by the instructor!
Explore other courses in the same field!