강의

멘토링

로드맵

Inflearn brand logo image
Design

/

UI/UX

Creating an MVP with Figma's Atomic Component Design System

This class will help you plan and design an MVP using the atomic component system. You will learn how to understand and utilize design components.

(5.0) 1 reviews

50 learners

  • Hagiro
피그마UI
피그마클래스
아토믹디자인
디자인 시스템
Figma
Atomic Design
Design System
Mobile App Design

What you will learn!

  • Figma Basics

  • Component System

  • MVP Planning

  • Agile Process

  • Atomic Design

Building an MVP with Figma's Atomic Design Component System



We live in an era where AI can design, copy, and code in a second.
A designer who only knows how to design / a planner who only knows how to plan / a developer who only knows how to develop
We can no longer survive the AI era.


How can I become 'irreplaceable'?
Learn agile methodologies to quickly and efficiently create MVPs and verify hypotheses.

Ultimately , a product (MVP) without a plan is nothing more than a shell. Seven out of ten services disappear within five years. This is because planning, design, development, and business model are all separate entities.


If you gain the skill to quickly create an MVP by utilizing figma's component system,
You will be able to create one product per month!
I'm also using the Figma component set I created to launch products continuously, sometimes within a month, sometimes within a quarter. Check out Ha-Ro's MVP .

I recommend this to these people

Aspiring/current UI designers who want to learn how to use Figma and components.

Makers who want to learn the entire process of product production and increase their value

Aspiring/current startup professionals who want to create an MVP


After class

  • Figma lets you plan and design your mobile design MVP.

  • Rather than simply copying the same thing, you can understand why you should do it that way.

  • Take full advantage of Figma's unique features and stop the grind.

  • You will be able to understand and utilize UI libraries and atomic design systems.

  • You can quickly grasp the essence of the entire Agile/Lean Startup service planning and design process.

  • Even if you're not a designer, you can draw wireframes in Figma.

  • This will allow you to use the template source code of the Figma community more freely.

Features of this course

Get the know-how of a 10-year designer's problem definition, wireframe, and design process.

The ratio of theory to practice is appropriate.

The design examples are pretty

I'll give you a component template that you can use to create an MVP right away.

Learn about these things

Surely you're not still building it layer-based?

Are you drawing frames first and then adding objects? You're still designing using strokes, aren't you? If you use Auto Layout but don't fully understand it, you can learn some useful tips.

It starts with shift + a, not R or A.

Variant, Swap Instance, Boolean, and Atomic Components

Learn the fundamentals of components: variant usage, swap instances, flexible components with Booleans, and the atomic design system, a component within a component. Atomic components break down a single component into atoms and molecules. Learn one of the development methodologies that pursues extreme efficiency! (Note: Atomic systems are a design/development methodology, not the ultimate technology.)

You will be able to understand and control other component sources.

We will show you the design process step by step, over and over again.

Step 1: Design with a layer base
Step 2: Design with Auto Layout
Step 3: Utilizing Variants and Booleans
Step 4: Insert components within components (atomic design).

I've designed it so that you can design 100% component-based. As a bonus, you'll learn why UI libraries are necessary and what component-based design actually means.

100% component-based design

PO / Designpreneur with 10 years of experience as a designer.

  • Through my experience in early startups and agencies, I realized that there are service planning/design methodologies appropriate for scale, and I developed my own method of creating MVPs using my own know-how.

  • As an early member, I achieved Series B, as a founding member, I achieved BEP, and as a design entrepreneur, I am on a bootstrapping journey with an all-in-one process from planning to design and marketing.

  • We launch one product per quarter on average.

  • I write on Brunch .

Do you have any questions?

This course does not reflect the latest Figma interface as of June 2024. (There are no plans to update the course.) This course is recommended only for those who are curious about how to create and utilize atomic components in practice, rather than those who are new to Figma.

Q. Can I listen and understand this even if I'm not a designer?

While primarily designed for designers, this course is designed for those who want to build MVPs. It's ideal for those interested in bootstrapping (planning and launching a product on their own), being a founding member, or developing a product using agile methodologies. Because it's aimed at beginners, the theoretical lectures are broad and accessible to anyone. (Intermediate learners may find this course challenging.)

Q. Is the focus on theory or practical Figma training?

The focus is on practical Figma lessons. Rather than simply reciting theory, I believe it's crucial to provide a solid foundation in Figma fundamentals. The components section is designed with the assumption that beginners will deepen their understanding of components through repeated learning, from difficulty levels 1 to 5, atomic design. Those expecting a simple, easy-to-listen-to lecture might find it challenging. Without hands-on practice, you'll gain little!

Q. How is it different from other Figma courses?

We focus on explaining the "why" behind each step. Rather than simply saying, "Just do it," we explain why you should do it this way, and how you'll achieve the desired results!

Things to note before taking the course

Preparation

  • All you need is a curiosity and passion to explore new areas. Oh, and a computer with internet access.

Learning Materials

  • We provide brunch columns and YouTube outlinks.

  • You can download the PDF files used in the video.

Player Knowledge and Precautions

  • You can freely modify and modify the provided UI templates.

  • Sharing UI templates is not allowed.

  • The difficulty of the lecture may feel different depending on your basic knowledge, level, and willingness to learn.

  • It's not a very friendly or easy level, and it can be a bit fast.

Recommended for
these people

Who is this course right for?

  • For those new to Figma

  • People who want to do MVP planning and design at the same time

  • Anyone who is curious as to why it has to be done that way

  • Planners, developers, and marketers who are curious about the practical design process

  • Anyone who wants to understand agile process practices

Hello
This is

10년차 디자이너 출신의 PO / Designpreneur.

  • 초기 스타트업과 에이전시 경험을 통해 규모에 적합한 서비스 기획/디자인 방법론이 따로 있다는 것을 깨닫고 자신만의 노하우로 mvp 제작법을 개발했습니다.

  • 초기멤버로서 시리즈 B, 창업멤버로서 bep 달성, 디자인 창업가로서 기획부터 디자인, 마케팅까지 올인원 프로세스로 부트스트래핑 여정 중입니다.

  • 평균 1분기에 1개의 프로덕트를 런칭합니다. 하기로의 mvp 원씽메모

  • 브런치에서 글을 씁니다.

Curriculum

All

31 lectures ∙ (5hr 27min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1 reviews

5.0

1 reviews

  • Sangok Kim님의 프로필 이미지
    Sangok Kim

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    단순히 디자인만을 이야기 하지 않아 좋았습니다.

    • Hagiro
      Instructor

      완강 후 리뷰 남겨주셔서 감사합니다 :))

    • 강의 내용에 비해 수강평이 너무 담백했었네요. 퍼블리셔 출신으로 새롭게 아이템개발하면서 피그마에 대해 심도있게 알고 싶어서 강의를 들었는데요. 실력있는 디자이너로서 화면 디자인은 어렵겠지만 개발에 필요한 화면구성은 어렵지 않겠다는 자신감이 생기네요. 피그마 강의 내용도 당연히 좋았지만 디자인과 실무진행 내용과 연계하여 설명해 주셔서 너무 좋았구요 실무 내용이 최근 트랜드를 반영해 주셔서 좋았습니다. 이 강의를 들으면 피그마 사용하면서 가장 근간이 되는 라이브러리 한 세트가 만들어 지는 것도 좋았습니다. 선생님의 군더더기없는 깔끔한 강의와 설명도 도움이 많이 됬습니다. 다른강의도 준비하고 계시다면 기대가 됩니다. 감사합니다

$74.80

Similar courses

Explore other courses in the same field!