강의

멘토링

로드맵

BEST
Design

/

UI/UX

Design System with Figma

Through this course, you will build a design system and experience the explosive synergy of your design work.

(4.9) 72 reviews

1,508 learners

  • kindtiger
Figma
Figma Tokens
Design System
Atomic Design
product design

Reviews from Early Learners

What you will learn!

  • 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 ✍️

Ultimately, it is used every time
The goal is to reduce communication costs.

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?


I recommend this to these people ✔️


I want to build a design system
Designers who don't know how to start


I know how to use Figma tools, but systematically
Designers who don't know how to apply


Understand the design system and receive design tokens
Developers who want to use it for development


The design system allows designers and developers to
Planners who want to read communication

Design System with Figma 🎨

Design system using Figma
You can know and understand the construction process.

What a Design System Is for 🌀

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.


What you'll learn 📚

Tokens Studio (Figma Tokens)

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.

Color Foundation

We have a process of registering the spacing, color, typography, and grid, which are the basic foundations of design work, into the system.

Creating a Component

All design work is created and managed as components with reusable forms in mind.

Page assembly

Each part is made and then assembled to create a finished product.

👇 Final Result 👇



Expected Questions Q&A 💬

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.

Recommended for
these people

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

Hello
This is

4,411

Learners

223

Reviews

292

Answers

4.9

Rating

5

Courses

 

---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇‍♂

 

Curriculum

All

31 lectures ∙ (5hr 31min)

Published: 
Last updated: 

Reviews

All

72 reviews

4.9

72 reviews

  • cinos810120님의 프로필 이미지
    cinos810120

    Reviews 10

    Average Rating 4.8

    5

    100% enrolled

    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.

    • dydwns587049님의 프로필 이미지
      dydwns587049

      Reviews 1

      Average Rating 5.0

      5

      43% enrolled

      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.

      • eittrache0427님의 프로필 이미지
        eittrache0427

        Reviews 1

        Average Rating 5.0

        5

        13% enrolled

        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!

        • iys14596638님의 프로필 이미지
          iys14596638

          Reviews 1

          Average Rating 5.0

          5

          7% enrolled

          Đây là lần đầu tiên mình dạy một bài giảng riêng nhưng thật tuyệt vời khi bạn giải thích mọi thứ một cách dễ hiểu và cho mình nhiều lời khuyên hữu ích khi làm việc thiết kế hoặc cộng tác! Điều này rất hữu ích!

          • honeymel5721님의 프로필 이미지
            honeymel5721

            Reviews 5

            Average Rating 4.4

            5

            33% enrolled

            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

            kindtiger's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!