インターフェース設計のためのコラボレーションWebアプリケーション、
ピグマを活用してデザインを学びます✍️
1つのデザインが追加されるたびに、デザイナーと開発者のコミュニケーションコストはますます増加し、ビジネスが大きくなるにつれて開発者は余裕がなくなります。
デザインシステムを理解して構築すれば、コミュニケーションコストを大幅に削減でき、多くのデザイナーの方が気になりますが、初めてを始める方法を知らない方のためにこの講義を企画することになりました。
❓似ているが妙に違う私のデザインワーク、
どうすれば一貫した形を保つと同時に
開発者が開発しやすいようにデザインを提供できますか？
ピグマを使用したデザインシステム
構築プロセスを知って理解することができます。
デザイナーと開発者とのコミュニケーションコスト削減、業務効率を最大化！これがデザインシステムの使用目的です。
本講義では、Pigma ネイティブシステムのみを使用せずに Figma tokens プラグインとともにシステムを構築し、すべてのデザイントークンが開発者に Handoff できるようにシステムを構築します。
講義を聞いた後、受講生は...
💡すべてのデザインワークをシステムの観点から見る目ができ、デザインワークを作ってもシステムにずれないようにデザインする習慣ができます。
💡アトミックデザインシステムを理解し、デザインワークの再利用性を考慮します。
💡コンポーネントの理解度が高まり、開発者とのコミュニケーションがスムーズに行われます。
ピグマで作成したデザイントークンを一度に管理するためのプラグインとして、ピグマネイティブシステムと連動して使用します。これは、将来の開発者にハンドオフするときに使用されます。
デザイン作業に基本ベースとなる間隔、色、タイポグラフィ、グリッドをシステムとして登録する過程を持ちます。
すべてのデザインワークは、再利用可能な形式を考慮してコンポーネントとして作成および管理します。
それぞれの部品を作成し、それらを組み立てて1つの完成した結果を得ます。
👇最終結果 👇
Q.デザインシステムがよく分からないのに受講できますか？
そんな方のための授業です。デザインシステムの理論から始まります。
Q.なぜデザインシステムを学ぶべきですか？
デザイナーと開発者の間のコミュニケーションの問題は常に発生するので、これを最小限に抑える努力はデザイナーと開発者の両方にとって必要な課題です。
Q.講義を聞く前に準備すべきことはありますか？
ピグマの基礎ツールの説明ではないので、基本的なツールの使い方は知っておいていただくことをお勧めします。
Q.受講に関する注意事項（必要な環境）はありますか？
ピグマでシステムを構築するので、ピグマアカウントとデスクトップアプリをダウンロードしてください。
これで、Pigmaはアプリ/ Webフロントエンド開発の現場で不可欠なツールになりました。 開発者と非開発者の両方が気軽に使えるコミュニケーションツールになった感じです。 Webフロントエンドを開発する過程では、通常、以下のような手替え（ハンドオフ）が起こります。 デザイナー -> HTMLマークアップ開発者 -> SPA/MPA開発者 手が変わるたびに、それぞれの業務範囲を行き来しながら、活発なコミュニケーションが必要になります。 ピグマを使ってみるほど、ピグマこそこういう状況に適したツールだという確信が生まれます。 すべてのデザイナー/フロントエンド開発者はピグマを学ぶ必要があります。 しかし、この講義ではピグマの基礎使用法を扱っていないので、デザインツールを初めて扱う方には難しいかもしれません。 そんな方もセクション３までだけしてみると大きな無理なくついてくることができると思います。 川の構成がまるでフレクタル図形に似ています。 この講義はデザイナー/開発者に以下のような素養を持たせてくれます。 デザインコンポーネントをデザインシステムに抽象化する（セクション1. Foundationを構成する） デザインシステムに基づくデザインの実装（セクション1〜セクション11） デザインシステムをデザイントークンに加工する（セクション12〜セクション13） 開発者も全体的なデザインプロセスを習得できるようになります。 特にデザインシステムをデザイントークンに加工する（セクション1、セクション12、セクション13）部分を国内で初めて取り上げた講義ではないかと思います。 ちなみに、デザイントークンはデザインコンポーネントの国際標準です。 restful api 仕様の国際標準が OpenAPI (swagger) と同じです。 将来的には、デザイントークンに基づくライブラリと実装が注がれるでしょう。 ピグマを使ってデザインシステムを構築すれば、デザイントークンを簡単に抽出でき、巨大な流れに乗ることができます。 この講義をおすすめします。
有益な内容がたくさんあります。実務で使える方法がわかり、特に良かったです。 ただ、講義の作業画面が大きくて左右のパネル項目がたくさんあり、アイコンとテキストがすべて小さいのに1080クオリティにしてみても見えづらく目も痛く集中がうまくいきません。 ㅠㅠ たとえば、上部の作業画面だけが関連しているので、下部の作業画面は切り取って、もっと大きく見ることができるようにすれば良いと思います。
デザイナーとコラボレーションをたくさんするUI開発者です。 時々同じように見える色が微妙な違いがあったり、一定の基準なしにデザイナーの直観で設定した余白などに苦しんできました。特にメンテナンスが絶対「ヘル」だったんですよ。 そのような車にこれを解決する方法を探すよりもデザインシステムという概念を知り、多くの有名なIT企業での適用事例に触れました。 一緒に働くデザイナーにもデザインシステムを構築しようと意見を述べたが、どのように始めるべきか方向をとらなかった車に会った「デザインシステム with ピグマ"講義は最高の選択でした。 企画者もデザイナーも、そして開発者も皆聴くべき講座だと思います。 ピグマを使っている企業なら強力におすすめしたいと思います。
講義は別に初めて聞くのに分かりやすく説明しやすく、デザイン作業やコラボレーションに役立つ蜂蜜のヒントをたくさん教えてくださいね！助けがたくさんありました！
それで、代替がピグマで何ができるか、どの方向性を持って完成に向かって進むべきか、ビジョンと方法を一緒に提示してくれる講義です。サブコンポーネントから始めて一つのページを作る実習に加えて、講師様の豊富な経験と実戦のヒントもよく溶け込んで聞いた後に作られる結果だけでなく、体得される他の知識も良かったです。 ピグマを使ってデザインシステムを作成することで、自分自身が得る利点もあるでしょうが、パートが他のコラボレータとのコミュニケーションの誤りによって議論が起こる可能性を大幅に減らすことができるという点では、開発者とデザイナーの両方にとって非常に魅力的なツールになるできると思います。 とても満足していた点の一つは、どうしてこうして作られなければならないのか？を講義を通して周知させ、また考える距離が与えられるため、フロントエンド開発者だったり、WebパブリッシャーやWebデザイナーだった理解できる方法を追求し、互いに合意して共通ルールを定め、容易で洗練された結果を容易に作り出すことができるを理解できるようにしてくれるという点です。ただこれをしなければならない！ではなく、講義を聞いた受講生たちが考えられる幅と柔軟性を広げてくれる良い講義です。 ピグマのデザインツールはどうやらフロントエンド開発者の立場では見慣れず、動作原理をすぐに理解することは難しいが、どうするか一つ一つのステップを見せるので講義を聞いてみるとツールの使い方は分かるようになります。手に身につけるためには少し練習が必要ですが、コラボレーションに特化したピグマの魅力にすぐ抜けてくれると信じています！
![データアナリストなしでデータドリブンデザインを行う [データリアンセミナー見逃し配信 | 2025年11月]講義サムネイル](https://cdn.inflearn.com/public/files/courses/339608/cover/01kbpcbn9gv7ysm630hkz313gd?w=420)
