Figmaのコンポーネントを使いこなせるようになってきた気がするので私が使える機能をまとめていく

ごきげんよう。うつくしひろしです。

Figmaのコンポーネントを最近使いこなせるようになってきた（気がしてる）ので、私が使ってる機能をまとめていこうかなと思います。

〜Figmaとの出会いとコンポーネント活用の旅〜

なんだか旅番組みたいなタイトルになっちゃったな……。私がFigmaを使い始めたのは1年半前のことです。当時、エントリー課題に取り組む上で、弊社が基本的にFigmaを使用していることを知りました。もし入社できた場合、Figmaを使いこなせないとかなり迷惑をかけるだろうと感じ、採用担当に「Figmaに慣れたいので一週間時間をください」と無理を言って触り始めました。今振り返ると、あの一週間が私のデザインの基盤を作る重要な期間だったと感じます。Figmaの直感的なインターフェースと豊富な機能は、すぐに私を魅了し、その後のデザイン業務において欠かせないツールとなりました。

コンポーネントとは？

最初に「コンポーネント」という言葉を聞いたとき、正直言って「なんじゃそりゃ？」状態でした。果物を甘く煮るやつかと思ったほどです。（それはコンポート）しかし、入社後に先輩から「こういう機能もありますよ〜」と教えてもらい、目から鱗がボッロボロ落ちました。コンポーネントとは、「親データに編集を加えると子データも一緒に変えられる」という神機能です。例えば、ボタンデザインの修正が必要になった際、全てちまちまと手動で編集していた私にとって、まさに革命的な機能でした。Revolution、起きちゃったな・・

作り方

コンポーネントの作り方は非常に簡単。コンポーネント化したいオブジェクトを選んで、画面上部のアイコンをクリックするだけです。ショートカットキーはcommand+option+Kで、これだけでコンポーネントが作成できます。コンポーネントを使い始めてから、デザイン作業が格段に効率化されました。ボタン一つを変更するだけで、全ての関連するボタンが自動的に更新されるので手動での修正が必要なくなりました。本当に便利　ありがとう。

コンポーネントでできることはこれだけではなく、まだまだたくさんあります。その中のいくつかの機能については使いこなせるようになってきたので次の章で説明します

コンポーネントの応用

コンポーネントは親データを変えると子データも変えられるだけでなく、色、フォント、エフェクトまでもデータとして登録でき、一括変更が可能です。途中からフォントが変わって修正に苦労したあの頃の私に教えてあげたい機能です。各項目のテキスト右にある丸が四つ並んでいるアイコンをクリックして＋マークを押して任意の名前を設定するだけ。まじで簡単すぎる　なぜ今まで使わなかったのか・・・・

これらだけでなく、角丸の角度やオートレイアウト時の隙間の幅などもコンポーネントとして記憶させることが可能です。かなり便利……

また、説明も追加することができるのでチーム内で共同で作業する際も相手が理解しやすいコンポーネントを作ることができそうです。

ブール値

プロパティ画面で見かける「ブール値」についても、最初はその意味が分かりませんでした。しかし、これは表示／非表示を切り替えるためのプロパティで、アイコンの表示非表示を切り替えるときなどに便利です。設定方法は、表示or非表示にしたい要素を選択して、プロパティアイコンをクリックし、任意の名前をつけて『表示(True)か非表示(False)か』を選択するだけ。

これにより、パネルから1アクションで切り替えが可能になります。ブール値の活用により、デザインのバリエーションを簡単に管理できるようになったのが作業効率の向上に繋がったなと思います。

テキストプロパティ

テキストプロパティも非常に便利です。毎回トラックパッドポチポチやってテキスト変更していたので知ることができて本当によかったです。

この機能を利用することでパネルから簡単にテキスト変更が可能です。ブール値の設定と同じ方法で、テキストを選択してプロパティアイコンをクリックし、任意の名前をつけるだけで設定完了です。これにより、作業の効率が大幅に向上しました。特に、同じページ内で多くのテキストを更新する必要がある場合に、この機能は非常に有用です。

これを使った時に思ったことは「早い！便利！楽！！」でした。あほの感想すぎる。

共同作業の効率化

Figmaのコンポーネントとプロパティ機能を駆使することで、チーム内での共同作業がスムーズになります。例えば、デザインの変更が必要になった場合、親データを変更するだけで全ての子データが自動的に更新されるため、個々のファイルを手動で編集する手間が省けます。また、コンポーネントに説明を追加することもできるので、チームメンバー全員がコンポーネントの使用方法を理解しやすくなります。このような機能により、チーム全体の生産性が向上し、プロジェクトの進行がよりスムーズになります。

今後の展望

Figmaの便利な機能はまだまだたくさんありますが、全てを使いこなすには時間がかかります。今後もゆっくりと学んでいきながら、さらに効率的なデザイン作業を目指していきたいと思います。これからも新しい機能を発見し、それを活用することでデザイン業務がよりスムーズになることを期待しています。特に、Figmaの最新アップデートや新機能を取り入れることで、さらに高度なデザインが可能になることを楽しみにしています。また、Figmaのコミュニティやオンラインリソースを活用して、新しいテクニックやベストプラクティスを学び続けることで、自身のスキルを向上させていきたいです。

まとめ

このほかにも便利機能があるみたいなのですがいまだに使いこなせていないのでこれからゆっくりと学んでいこうと思います。

プロパティの詳細設定は、特に複雑なデザインシステムを構築する際に役立ちます。これにより細かなデザイン調整が容易になり、ユーザーが利用しやすいデザインを探求するための試行錯誤がしやすくなります。

今回Figmaのコンポーネントやプロパティ機能を学び、使えるようになってきたことで、デザイン作業がより効率的に進められるようになったと感じています。

このブログがプロパティ機能を利用したことがない方々に届き、皆様のデザイン業務が少しでも楽になることを願っています。

ここまで読んでいただきありがとうございました！また次回のブログでお会いしましょう〜！

うつくしひろし