강의

멘토링

로드맵

Inflearn brand logo image
BEST
Design

/

UI/UX

[UI3アップデート] Figma変数を利用したデザインシステムを構築する

最新のUI3インターフェースでFigmaの変数(バリアブル)を活用して、一緒にデザインシステムを作りましょう🔥 変数は一貫したユーザーエクスペリエンスを提供し、デザインプロセスを革新的に改善できる鍵🔑です。

  • bolduxlab
피그마
디자인 시스템
토큰
figma variable
Figma
Figma Tokens
Design System
Atomic Design

学習した受講者のレビュー

こんなことが学べます

  • 変数を活用してデザインシステムを構築する

  • 2025年上半期 Figma 最新アップデート反映

  • デザイントークン、アトミックデザインを基盤に変数の概念を掘り下げる

  • 33+ コアデザインコンポーネントを最初から一つ一つ製作する

  • バリアブルモードを活用して、B2B、B2C、モバイルUIページを作成する

Bootcamp

Figma Variable(Figmaバリアブル)を活用したデザインシステム完全ガイド🔥


もしかして新しいUIインターフェースに慣れるのが難しいですか?

最近アップデートされたFigmaの適切な日本語資料を見つけるのが難しかったですか?


🙋‍♀ トークンやデザインシステムを学びたいけれど、資料が多すぎてどこから始めればいいのか途方に暮れていた方々、

🤷 実務でどのようにバリアブル(Figma Tokens)を活用し、デザインシステムに適用すべきか難しく感じていた方々、

心配しないでください!

初心者のための基礎理論から実務者のための実践的な活用方法まで一度に学べる講義を準備しました。特にFigmaとデザインシステムの能力が企業で必須要件とされる時点で、この講義は現場で活用できる実用的なスキルとインサイトを提供します。

デザイナーボールドをご紹介します😀

こんにちは、デザイナーのボルドです。現在私はロンドンでSr. プロダクトデザイナーとして働いており、インスタグラムとブランチを通じて私の実務の話を共有しています。

過去8年間、UXリサーチャーとプロダクトデザイナーとして働きながら、様々なプロジェクトを経験しました。特に最近、Figmaデザインシステムにバリアブルをアップデートするプロジェクトを実行し、これによってデザイン業務の生産性と効率性が2倍以上向上し、一貫したUX体験を作り出す成果を収めました。本講義は私の実務経験とノウハウを込めて、デザイントークン/デザインシステム概念の核心を理解し、実務に適用する方法に重点を置いています。これを通じて皆さんが現場で実際に活用できる実用的なスキルとインサイトを得て、デザインシステム能力を開発できるよう私がお手伝いします!

一緒に学び成長する楽しい旅路に参加してみませんか!

バリアブルを活用したデザインシステムを学ぶべき理由

Figmaが現在デザインツール市場で世界的に圧倒的な1位である理由は、まさにデザインシステム強力なコラボレーション機能があるからです。

Figmaはデザインシステムの核心である「デザイントークン」の役割を果たすVariableを提供しており、今後多くのアップデートが予定されています。また、Atlassian、Microsoft、IBMなど多くのグローバル企業もすでにVariableをデザインシステムに導入しています。

本講義では、バリアブルを活用してデザインシステムを作成し、デザインの一貫性と効率性を向上させる方法を学ぶことができる講義です。

この講義だけにある
核心ポイント

この講義では
どのような内容を学びますか?

この講義のカリキュラムは全3つのパートに分かれており、全13セクションに分かれています

Part 1
理論を理解してファウンデーションを作る

セクション2、3、4、5

デザイントークンと変数の理解

デザイントークンの概念が馴染みのないものに感じられますか?アトミックデザインと海外事例を通じて、デザイントークンの概念を明確に理解していただけるでしょう。

(無料講座として公開されましたので、ぜひご覧ください!)

ファウンデーション全体を直接作ってみる

ファンデーションを使ったことはあっても、作ったことはありませんか?スタイルから変数まで、すべてを作ってみましょう。

色、間隔バリアブル構造を理解して登録する

特に色のバリアブル(Figmaトークン)の構造と命名が最も複雑で難しいです。例を通してどのようにバリアブル構造を設計するかを学びます。学び終えると、今度は他の会社のトークンを見ても全て理解できるようになり、自分だけの構造も作れるようになります。

コンポーネントの基礎理論とライブラリ

コンポーネントの基礎を正しく理解できていない方のための追加講義として、本格的なコンポーネント実習に入る前に基本的な理論について詳しく説明いたします。

Part 2
変数を活用してコアコンポーネントを作ってみる

セクション6、7、8、9

30個以上のコアコンポーネントを作ってみる

30個のコアコンポーネントを4つのパートに分けて作成していきます。コンポーネントを作成した後、簡単なチェックから簡単なWebアクセシビリティまでチェックしていきます。

[入力、ディスプレイ、フィードバック、ナビゲーションパート]

I'm

体系的に一歩一歩システム的に作ってみる

下位(Part)コンポーネントから実際のコンポーネントまでどのようにビルドアップされるかをご覧いただけます。段階的に構築することで、皆さんも構造を理解し、簡単に作れるようになるでしょう。

効率性を高めるコツやノウハウをお教えします

スロットコンポーネントを活用してコンポーネント数を効率的に削減する方法、ダミーアイコンを活用するノウハウなど、有用なコンポーネントのコツをお教えします。

Part 3-1
モードの活用について学ぶ

セクション10

ダークモードを適用する

ダークモードを実装するために、ブランド、アクセシビリティ、美観を考慮して色彩値を選択し、これをローカル変数に登録してモードを適用してみます。

ブランドモードを適用してみる

マルチブランドモードの概念を理解し、バリアブルモードを活用して統合ブランドを実装する方法とその限界について学んでいきます。

レスポンシブデザインを適用してみる

レスポンシブデザインとアダプティブデザイン、最大値と最小値について概念を学び、デスクトップ、タブレット、モバイルをバリアブルモードを活用して作ってみます。

多言語対応を試してみる

グローバル、ローカライゼーションについて扱い、ローカライゼーションのための言語の方向(RTL、LTR)、画像切り替えをテキスト変数を活用して作ってみます。

Part 3-2

モードを活用してページを作ってみる

セクション11、12、13、14

B2B管理画面のWebデザインページを作ってみる

B2B Saas形式の管理ページを作成し、モードを活用してダークモード、マルチブランド、レスポンシブデザインを作ってみます。

B2C eラーニングページ作成

B2Cイーラーニングページを作ってみるんですね。モードを活用してダークモード、マルチブランド、レスポンシブデザインを作ってみるんですね。

モバイルOTTアプリサービスページを作ってみる

マルチブランド、ダークモードで構成されたアプリを一度作ってみます。モードを活用してどのように簡単で素早くダークモードを作り出すのかをご覧いただけるでしょう。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • デザインシステムに興味のあるすべての人

  • バリアブル/デザイントークンについて馴染みのない方

  • デザインシステムに関心のあるPM/開発者

  • Figmaのスキルを一段階アップグレードしたい方

前提知識、
必要でしょうか?

  • Figmaの基礎(基本インターフェース、オートレイアウト)

こんにちは
です。

4,495

受講生

220

受講レビュー

198

回答

4.9

講座評価

7

講座

저희는 프로덕트 디자이너의 성장을 돕는 볼드유엑스랩 메인 튜터인 볼드, 제 경력은 리서처로 시작하여 프로덕트 디자이너로 커리어 전환 후 핀테크, 클라우드 테크, 마케팅 등 다양한 분야에서 경험을 쌓고 있습니다. 국내 석사 출신으로 해외교육 없이 해외에서 취업하여 다양한 실무 경험을 하고 있으며, 실무에서 아래의 내용을 진행해왔습니다.

  • 사용자 리서치 시스템 구축, 관리

     

  • 디자인 시스템 구축, 관리,

    피그마 UI/프로토타이핑

  • 디자인 역량 코칭, 멘토링

인프런을 통해 제가 알고 있는 실무 노하우를 공유하고 이를 통해 저도 많이 배우고 싶습니다.

감사합니다.

 

경험 및 경력

(현) 데이터 솔루션 회사 · 시니어 프로덕트 디자이너

(전) 글로벌 리서치, 핀테크, 클라우드 컴퓨팅 등 다양한 분야에서 프로덕트 디자이너로 활동

연세대 인지공학랩 리서처

カリキュラム

全体

81件 ∙ (19時間 53分)

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

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

受講レビュー

全体

168件

4.9

168件の受講レビュー

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    受講レビュー 3

    平均評価 5.0

    5

    100% 受講後に作成

    Nếu bạn đang tìm kiếm một khóa học figma phù hợp và chuyên sâu, bạn chắc chắn sẽ thất bại nếu không tham gia khóa học này! Với tư cách là một người đã chăm chỉ nghiên cứu bài giảng, tôi sẽ đưa ra nhận xét thực sự. Tôi là một nhà phát triển front-end, nhưng tôi rất quan tâm đến UI/UX và có một số kỹ năng sử dụng Photoshop và Sketch, vì vậy tôi sẽ cố gắng viết ra trải nghiệm của mình về bài giảng này. Mặc dù Figma là một công cụ thiết kế nhưng nó đã trở nên vô cùng mạnh mẽ khi được bổ sung Biến và Chế độ Dev vào cuối tháng 6. Tuy nhiên, nếu áp dụng đúng cách, bạn có thể có được cảm giác logic hơn, vì vậy, từ góc độ của một nhà thiết kế, có vẻ như vậy. giống như kiến ​​thức bạn cần biết đã tăng lên. Khi mới kết thúc một bài giảng, tôi liếc nhìn bài giảng nhiều lần, chú ý xem liệu mình có giải thích đúng cách hay không. (Bạn không thực sự hiểu sau khi xem một lần, phải không? 😓) Và khi bắt đầu xem lần thứ hai, tôi cố gắng thỉnh thoảng làm theo những ví dụ để dễ làm theo. Bản chất của khóa học này là dày đặc nên không cần thiết phải nhảy qua từng chương. Nếu bạn nhớ và làm theo mọi thứ một cách hoàn hảo ngay từ đầu, rất có thể bạn sẽ bỏ cuộc. Đó chính xác là những gì tôi đã làm lúc đầu và cảm thấy chán nản, vì vậy tôi đã đứng dậy và bắt đầu xem đi xem lại cùng một video, tập trung vào sự hiểu biết hơn là tốc độ. Xem xét trình độ của người tham gia khóa học, người mới bắt đầu hoàn toàn sử dụng Figma có thể gặp khó khăn. Tuy nhiên, nếu bạn mua nó vì muốn tìm hiểu thêm về hệ thống thiết kế, bạn có thể dễ dàng xem và theo dõi các bài giảng. Có một số phần lý thuyết ban đầu có thể hơi nhàm chán, nhưng khi bạn đã vượt qua phần đầu, sẽ có rất nhiều bài giảng thực sự hữu ích và sâu sắc, và chúng được giải thích rất chi tiết. Khi tôi kiên nhẫn làm theo, tôi có thể cảm thấy rằng mức độ hiểu biết của tôi về hệ thống thiết kế ngày càng tăng. Có rất nhiều ví dụ thực tế để sử dụng. Thay vì nghĩ rằng bạn có thể hoàn thành mọi việc ngay lập tức, nếu bạn xem bài giảng với tâm thế cho viên kẹo vào miệng và từ từ tan chảy trước khi ăn, tôi chắc chắn rằng bạn sẽ cảm thấy kỹ năng của mình đang được cải thiện. Tôi đã làm vậy! Tôi khuyên tất cả các bạn hãy thử nó.

    • uppermost913709님의 프로필 이미지
      uppermost913709

      受講レビュー 1

      平均評価 5.0

      5

      97% 受講後に作成

      Tôi thật bướng bỉnh. Tôi hiện là nhân viên và đã sử dụng Figma hàng ngày trong vài năm. Để kiểm tra xem kỹ năng của mình có còn thiếu hay không, tôi đã trả tiền để tham gia khóa học và học trong hai ngày trong dịp nghỉ Tết Nguyên đán. Bạn có thể tìm hiểu rất tốt hệ thống thiết kế và các trường hợp sử dụng Biến khi làm việc thiết kế. Điều đặc biệt thú vị là các bài giảng đã được cập nhật theo bản cập nhật của Figma. Như người dưới đây đã nói, nó có thể khá khó khăn đối với những người mới bắt đầu hoặc những người cố gắng theo dõi mọi thứ trong bài giảng ngay từ đầu. Tuy nhiên, những người đương nhiệm sẽ biết rằng đây chỉ là một trải nghiệm của công việc thực tế. Thật khó khăn vì đây là lần đầu tiên của bạn, Nếu bạn lặp đi lặp lại điều đó, bạn sẽ thấy được nguyên tắc. Biết rằng nguyên tắc được áp dụng và lặp đi lặp lại Bạn sẽ quen với nó một cách nhanh chóng. Cảm ơn bạn đã tạo ra khóa học. Đây không phải là bài giảng mà bạn chỉ có thể xem một lần. Tôi nghĩ đây là điểm mạnh khiến nó khác biệt so với các khóa học khác.

      • orinuguri님의 프로필 이미지
        orinuguri

        受講レビュー 6

        平均評価 5.0

        5

        35% 受講後に作成

        Chất lượng bài giảng của giảng viên tốt đến nỗi mỗi lần xem là tôi đều cảm động :) 👍 Chắc hẳn bạn đã rất khó khăn để tự học những khái niệm này... Cảm ơn bạn đã biên soạn một bài giảng và chia sẻ nó với chúng tôi!! Tôi nghĩ bài giảng này giống như một cơn mưa rào đối với một nhà thiết kế trẻ sắc sảo như tôi! Tôi sẽ cố gắng hết sức!!

        • kkimaz4705님의 프로필 이미지
          kkimaz4705

          受講レビュー 2

          平均評価 5.0

          5

          57% 受講後に作成

          Có rất nhiều nội dung hữu ích. Đột nhiên, những điều tôi luôn tò mò xuất hiện trong bài giảng và tôi cảm thấy mình có thể sắp xếp các khái niệm một cách tốt. Nó giúp tôi rất nhiều. Cảm ơn

          • minju90139432님의 프로필 이미지
            minju90139432

            受講レビュー 1

            平均評価 5.0

            5

            100% 受講後に作成

            Vì Figma đã được cập nhật rất nhiều lần trong năm qua nên tôi đã tự hỏi khi nào nên học nó và làm thế nào để áp dụng nó vào thực tế. Tôi thực sự biết ơn người hướng dẫn đã giải tỏa cho tôi nỗi lo lắng đó. Đối với tôi, người đã nghe nói về hệ thống mã thông báo nhưng chưa bao giờ thử nó, đây là một cơ hội quý giá để học từ những điều cơ bản về cách thực hiện các biến thể bằng cách tạo từng hệ thống thiết kế một và biến chúng thành các thành phần, bắt đầu bằng việc đăng ký màu sắc thông qua các biến thể. Tôi nghĩ hiệu quả công việc của tôi sẽ tăng lên rất nhiều khi tôi tìm hiểu thêm về cách tạo biến thể một cách thuận tiện trong khi làm việc. Tôi không nghĩ mình đã từng hoàn thành một bài giảng nhanh đến vậy. Tôi nghĩ như vậy sẽ tốt hơn vì mỗi bài giảng không dài. Tôi mong đợi những bài giảng tốt hơn trong tương lai.

            ¥23,260

            bolduxlabの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

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