Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
学ぶ Figmaのシェイプ:デザイン要素の作成とカスタマイズ | Figma基本ツール
FigmaによるUI/UXデザイン

bookFigmaのシェイプ:デザイン要素の作成とカスタマイズ

メニューを表示するにはスワイプしてください

シェイプの描画

長方形、楕円形、多角形、線、または星形などのツールを使用してシェイプを作成。クリック&ドラッグで自由に描画し、Shiftキーを押しながら操作すると比率を固定(例:正方形や円)、Alt/Optionキーを押すと中心から拡大。

サイズと比率の調整

  • レイアウトパネルのチェーンアイコンで比率の固定・解除を切り替えながらサイズ変更;
  • 不透明度を調整してシェイプの透明度を変更;
  • コーナー半径を変更して角を丸め、必要に応じて各コーナーごとに個別の値を設定可能。

塗りと線の追加

シェイプは以下の方法でカスタマイズ可能:

  • 塗り:単色、グラデーション、塗りの不透明度の調整;
  • 線(ボーダー):位置(内側、中央、外側)、太さ(ウェイト)、スタイル(実線、破線、点線)のカスタマイズ。ダッシュやギャップの設定で独自パターンも調整可能;
  • 線分:始点・終点(矢印、円など)の追加オプションも利用可能。

エフェクトと強調

シェイプにエフェクトを追加してビジュアルを強化:

  • ドロップシャドウインナーシャドウで奥行きを追加;
  • ぼかし背景ぼかしで洗練された印象に。

ベクターシェイプの編集

ベクターシェイプを編集するには:

  • シェイプをダブルクリック、またはデザインパネルのオブジェクト編集アイコンをクリックしてアイソレーションモードに入る;
  • ベンドツールでカーブを作成し、必要に応じてベクターポイントを調整;
  • 空白部分またはXボタンをクリックして編集モードを終了。

これらのテクニックを活用することで、精度と創造性を持ってシェイプを作成・カスタマイズ可能。

ベクターグラフィックとラスター画像についてさらに知りたい場合は、Adobe Illustrator FundamentalsコースのRaster vs. Vectorチャプターを参照。

すべて明確でしたか?

どのように改善できますか?

フィードバックありがとうございます!

セクション 1.  8

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1.  8
some-alt