Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Design

/

UI/UX

ピグマ・アトミック・コンポーネント設計システムでMVPを作成

アトミックコンポーネントシステムを活用し、MVPを企画からデザインまで完了してみるクラスです。

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

こんなことが学べます

  • ピグマの基礎

  • コンポーネントシステム

  • MVP企画

  • アジャイルプロセス

  • アトミックデザイン

ピグマアトミックデザインコンポーネントシステムでMVPを作成する



AIが1秒でデザイン、コピー、コードを織る時代です。
デザインだけをすることを知っているデザイナー/企画だけをすることを知っている企画者/開発だけをすることを知っている開発者は
もはやAI時代に勝てません。


どうすれば「代替不可能な人」になるのでしょうか?
迅速かつ効率的にMVPを作成し、仮説を検証するアジャイル方法論を学ぶことです。

結局のところ、計画的思考が裏付けられていないプロダクト(mvp)は殻だけです。 10のうち7つのサービスが5年以内に消えます。企画、デザイン、開発、ビジネスモデルが別々に遊んでいるからです。


figmaのコンポーネントシステムを活用して素早くMVPを製作するスキルを得ることができれば
月に一つずつプロダクトを作れるようになります!
私も私が作ったピグマコンポーネントセットを活用して短くは一ヶ月、長くても第1四半期内のプロダクトを連続的に立ち上げています。 へのmvpを見る

こんな方におすすめです

ピグマとコンポーネントの活用を学びたい予備/現UIデザイナー

プロダクト制作前のコースを学び、体の価値を高めたいメーカー

MVPを制作してみたい予備/県スタートアップ従事者


受講後は

  • FigmaでモバイルデザインMVPを企画してデザインできるようになります。

  • 単に同じように従うのではなく、なぜそうするのか理由がわかります。

  • Figmaならではの機能を100%活用し、野賀田はやめます。

  • UIライブラリとアトミックデザインシステムを理解し活用できるようになります。

  • アジャイル/リーンスタートアップサービスの企画やデザイン全過程のエッセンスを素早く把握できます。

  • デザイナーでなくてもワイヤーフレームをピグマで描くことができるようになります。

  • ピグマコミュニティのテンプレートソースをもっと自由に活用できるようになります。

この講義の特徴

10年目のデザイナーの問題の定義 - ワイヤフレーム - デザインプロセスのノウハウを取ります。

理論と実務の比率は適切です。

デザイン例が美しいです

すぐにmvpを作成できるコンポーネントテンプレートを提供します。

このようなことを学びます。

まさかまだレイヤーベースにしているんじゃないですか?

フレームを最初にオブジェクトを置いていますか?それでもストロークを使ってデザインしていませんか?オートレイアウトを書いて書くのに100%理解していないならハチミツチップを得ることができます。

RやAではなく、shift + aで始まります。

バリアント、スワップインスタンス、呼ばれる、アトミックコンポーネント

コンポーネントの基本であるバリアントの使い方とスワップインスタンス、呼ばれてflexible component、コンポーネントの中のコンポーネントであるアトミックデザインシステムを学びます。アトミックコンポーネントとは、1つのコンポーネントを原子単位、分子単位で分割することをいいます。極鋼の効率を追求する開発方法論の一つを学びましょう! (*注意:アトミックシステムはデザイン/開発方法論の1つであり、究極の技術ではありません)

他のコンポーネントソースを理解して制御できるようになります

段階的にデザインする過程を繰り返し見せてくれます。

ステップ1はレイヤーベースでデザインする
ステップ2はオートレイアウトでデザインする
3段階はバリアントと呼ばれる活用
ステップ4はコンポーネントの中にコンポーネントを入れる。 (アトミックデザイン)

100%コンポーネントベースでデザインできるように飾ってみました。 UIライブラリがなぜ必要なのか、コンポーネントベースでデザインするというのが一体何の音なのか分かるのはおまけです。

100%コンポーネントベースデザイン

10年目デザイナー出身のPO/Designpreneur。

  • 初期のスタートアップとエージェンシーの経験を通じて、規模に適したサービス企画/デザイン方法論が別々にあることに気づき、独自のノウハウでmvp製作法を開発しました。

  • 初期メンバーとしてシリーズB、創業メンバーとしてbep達成、デザイン創業家として企画からデザイン、マーケティングまでオールインワンプロセスでブートストラップ旅程中です。

  • 平均第1四半期に1つの製品を立ち上げます。

  • ブランチからの書き込み。

質問がありますか?

このレッスンは、2024年6月以降の最新のピグマインターフェースを反映していません。 (講義更新計画もありません) 初めてピグマに触れる人よりは、アトミックコンポーネントを実務でどのように作って活用するかに学習が気になる方のみ受講してください!

Q. デザイナーではないのに聞いて理解できますか?

デザイナー重点ではありますが、mvpを制作したい人を対象に企画しました。自ら製品を企画して立ち上げてみるブートストラップ、初期/創業メンバーに興味のある方、アジャイル方法論でプロダクトを開発してみたい方が聞けば良いです。入門者向けなので理論講義はブロードで、誰でも簡単に理解できます。 (中級者の方が聞くと困ります)

Q. 理論が重点ですか、ピグマ実務講義が重点ですか?

ピグマ実務講義が重点です。理論だけを挙げる講義ではなく、ピグマの基本は確かに教えなければならないと思いました。コンポーネントセクションは、ピグマに初めて接した人が難易度1段階から5段階アトミックデザインまで繰り返し学習を通じてコンポーネント理解度を高めるという仮定で構成しました。聞くだけで終わる楽な理論講義だけを期待された方は難しいと感じることができます。実習をしないと手に入れることが少ないです!

Q. 他のピグマ講義とは何が違うのですか?

「なぜそうすべきか」理由をお知らせするのにフォーカスしました。ただ「フォローしてください」ではなく、これを行う理由はこれであり、これを行う必要がある結果を得ます - というように説明します!

受講前の注意

準備

  • 新しい領域を開拓したい好奇心と情熱だけを持ってきてください。ああ、インターネットになるコンピュータも。

学習資料

  • ブランチコラムとYouTubeアウトリンクを提供しています。

  • ビデオに使用されるpdf素材をダウンロードできます。

選手の知識と注意事項

  • 提供されているuiテンプレートは、バリエーションと加工で自由に使用できます。

  • uiテンプレートを共有することはできません。

  • 自分の基礎知識やレベル、学習意志によって、講義の難易度が異なって感じられる場合があります。

  • とてもフレンドリーで簡単なレベルではありません。速度も少し速いかもしれません。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ピグマに初めて触れる人

  • MVP企画やデザインを一度にやりたい人

  • なぜそれを作らなければならないのか疑問に思う人

  • 実務デザインプロセスが気になる企画者、開発者、マーケティング担当者

  • アジャイルプロセスの実務を理解したい人

こんにちは
です。

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

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

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

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

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

カリキュラム

全体

31件 ∙ (5時間 27分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

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

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

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

    • Hagiro
      知識共有者

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

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

¥11,447

似ている講座

同じ分野の他の講座を見てみましょう!