これだけ抑えよう！エンジニア向けFigmaガイド
何故この記事を書こうと思ったのか？
- Figmaのシェア率が非常に高いこと
- エンジニアがUI/UX関連に触れる機会が増えてきていること
- エンジニアとデザイナーのシームレスな連携を実現するため
2023年の最も試してみたいツールにランキング入りしています。
Figmaの効率を上げるショートカットキー
| キー | 内容 |
|---|---|
| F | フレームツール |
| Shift + S | セクションツール |
| T | テキストツール |
| V | 移動ツール |
| Shift + R | ガイドライン表示 |
| C | コメント |
実践的な活用TIPS
① セクションとフレームを使いこなそう
Figmaでのセクションとフレームの効果的な使用は、デザインプロセスの効率化と整理に非常に役立ちます。セクションとフレームを使いこなすことで、具体的に以下のようなメリットがあります！
具体的なメリット
- 構造と整理
- 効率的なデザイン作業
- 可視性とアクセスの向上
- プロトタイピングの強化
役割まとめ
| 目的 | |
|---|---|
| セクション | キャンバスの整理 |
| フレーム | UIの作成 |
✅ セクションの機能と役割
Figmaのセクション機能は、新しく追加されたグルーピングの機能でプロジェクト全体の要素を効率的に整理でき、視覚的にも整ったデザインが実現します。具体的に以下のメリットがあります。
- キャンバスの整理が容易になる
- コンポーネントの追跡が簡単になる
セクションだと拡大縮小しても、ある程度コンポーネント名やフレーム名などリサイズしてくれるので名前が見えて分かりやすくまとめられます。
✅ フレームの機能と役割
Figmaにおけるフレームは、デザインの基本的な構造要素として機能し、多様なデザインタスクを効率的に実行するための柔軟性と整理を提供します。フレームは、それ自体がデザイン上のプロパティ情報を持つコンテナでもあります。具体的に以下のように活用します！
- デザインエリアの枠組みとして使用
- Html(Webページ)のdivタグに似た機能
② レイアウトグリッドを活用しよう
Figmaでレイアウトグリッドを適切に使用することによって、どんなデバイスサイズにも対応し、視覚的に魅力的なデザインを実現することができます。具体的に以下のようなメリットがあります！
具体的なメリット
- 整合性のあるレイアウト（配置）
- マルチデバイス対応のデザイン(スマホ、タブレットなど)
- 効率的なワークフロー
公式動画
設定してみよう
※ 画像が見えにくい場合は拡大しながら比較してみて下さい🙇♂
| グリッドの設定 | 紫の列メインコンテンツ(6列) |
|---|---|
 |
 |
| ・1セルを8pxで設定 | ・メインコンテツを6列で設定 ・左右の余白を200px ・ガター(要素と要素の間)を16pxで設定 |
上記の様な設定をすると、👇の様に設定することが出来ます！
③ プライマリカラーとセカンダリカラーを登録しよう
Figmaで事前に色を登録しておくことは、デザインの効率化と見栄えの統一性を担保してくれます。色をシステムとして整理し、それらをプロジェクト全体で簡単に適用できるようにすることで、具体的に以下のようなメリットがあります！
具体的なメリット
- デザインの統一性
- 簡単な修正とアップデート
- デザイン作業の効率化
| ローカルスタイルから任意の色を登録 | 塗り > 四角(ボックス)を選択肢し色を設定 |
|---|---|
 |
 |
④ コンポーネントを作ろう
Figmaでコンポーネントを作成し活用することは、デザインプロセスの効率を大幅に向上させ、一度作成すれば、異なるプロジェクトやデザイン内で繰り返し使用することができ、具体的に以下のようなメリットがあります！
具体的なメリット
- 作業効率の向上
- 変更やアップデートの容易さ
公式動画
コンポーネントを活用することで、以下の様に切り替えが容易になります
また、フレーム名の先頭に共通の名称をつけることで、グループ化になるので設定すると便利です
icon / Twitter-
icon / Github
僕のオススメプラグイン
Iconify
IconifyとはFontAwesomeやTwitterなどの数々のアイコンをFigmaに追加できるプラグインです。
Unsplash
Unsplashとは Unsplashに掲載されている画像をfigma内で検索をして挿入できる便利プラグインです。
Japanese Font Picker
Japanese Font Pickerとは Figmaで日本語フォントを試しながら選択できるプラグインです。
Blush
Blushとは ユーザーが簡単にカスタマイズ可能なイラストをデザインに追加できるプラグインです。
Split Shape
Split Shapeとは 選択したオブジェクトを列・行数やオブジェクトの間隔を指定して、それに合わせて分割してくれるプラグインです。
オススメの記事
おわりに
Figmaは、デザインツール市場においてこれからもシェアを広げていくと思います!
この記事をきっかけに 皆さんにとってFigma(デザインツール)が少しでも身近な存在や触れるキッカケになれば、私としても非常に嬉しく思います。
ようこそ、Figmaデザインの第一歩へ！ 🎨
Discussion