Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2024 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma 線を設定する

    線を設定する

    1. Figma
    2. 機能
    3. メインメニュー
    4. オブジェクト
    eyecatch image

    概要

    図形やテキストの、線の太さや色を設定します。 長方形などの囲う線か、両端のくっついていない囲われていない線かで設定オプションが変化します。

    1. 設定中の色
    2. カラーコード
    3. 不透明度
    4. 表示 / 非表示
    5. 線の色の追加
    6. 線の色の削除
    7. 線の位置
    8. 線の太さ
    9. 各端の線
    10. 開始点・終了点
    11. 線の詳細設定
    12. スタイル

    set-line_image01.png

    1. 設定中の色

    設定している色の見本を表示しています。 ここをクリックするとカラーピッカーが表示され、色を変えることができます。

    set-line_image02.jpg

    set-line_image03.png

    スポイトのアイコンは、キャンバス内にある色を取ることができます。 スポイトを選択し、任意の色の箇所でクリックすると、塗りをその色に変更します。

    set-line_image04.jpg

    今回は隣の青色にカラーチェンジしたいと思います。

    set-line_image05.jpg

    set-line_image06.jpg

    【スポイトのショートカット】 キャンバス上で「I」キーを押すと、マウスカーソルがスポイトに切り替わります。

    2. カラーコード

    ６桁の英数字からなるカラーコードです。 任意のカラーコードを入力して、色を変更することができます。

    set-line_image07.png

    3. 不透明度

    線の塗りの不透明度を設定します。 数値が0になると、完全に透明になります。

    set-line_image08.jpg

    4. 表示 / 非表示（線のみ）

    線の表示 / 非表示を切り替えます。 塗りがある場合に非表示にすると、塗りだけが残って見えます。

    set-line_image09.jpg

    set-line_image10.jpg

    再度、押すと選択している範囲が表示されます。この時ボタンの目も一緒に開きます。

    set-line_image11.jpg

    5. 線の追加

    オブジェクトに線を追加します。 1つ目は通常の線ですが、2つ目の追加からは黒の半透明の線がデフォルトで追加されます。

    set-line_image12.png

    set-line_image13.jpg

    もう一度、追加すると

    set-line_image14.png

    黒の不透明度が20％で表示されます。

    set-line_image15.jpg

    6. 線の削除

    塗りの「−（マイナス）」をクリックすると、線を削除します。

    set-line_image16.png

    set-line_image17.jpg

    メインメニュー　＞　オブジェクト　＞　線の削除　でも同様です。

    set-line_image18.jpg

    7. 線の位置　※長方形を選択時にアクティブ

    線がオブジェクトの境界のどの位置にあるかを設定します。

    ① 中央：境界が中央になるように線を引く ② 内側：境界の内側に線を引く ③ 外側：境界の外側に線を引く

    set-line_image19.png

    ① 中央

    境界が中央になるように線を引きます。 線の太さが２pixel以上の場合、半分の1pixelが境界の内側、もう半分が境界の外側になります。

    set-line_image20.jpg

    ② 内側

    境界の内側に線を引きます。 オブジェクトの幅の中に引かれるので、オブジェクト全体の幅は変わりません。 線の太さの分、塗りの範囲が狭まります。

    set-line_image21.png

    ③ 外側

    境界の外側に線を引きます。 オブジェクトの幅の外に引かれるので、オブジェクトの幅は線の太さの分、大きくなります。

    set-line_image22.png

    8. 線の太さ

    線の太さを設定します。（単位はpixel）

    set-line_image22-1.png

    set-line_image23.png

    9. 各端の線　※長方形を選択時にアクティブ

    線を引く辺を設定します。 カスタムを選択すると、各辺ごとに線の有無や太さを設定することができます。

    set-line_image24.png

    ① すべて

    set-line_image25.png

    ② 上

    set-line_image26.png

    ③ 下

    set-line_image27.png

    ④ 左

    set-line_image28.png

    ⑤ 右

    set-line_image29.png

    ⑥ カスタム

    set-line_image30.png

    set-line_image31.png

    10. 開始点・終了点　※直線や曲線を選択時にアクティブ

    線の先端のデザインを、それぞれ設定します。 矢印を作ることができます。

    set-line_image32.png

    ① なし

    set-line_image33.png

    ② 線矢印

    set-line_image34.png

    ③ 三角形矢印

    set-line_image35.png

    ④ 逆三角形

    set-line_image36.png

    ⑤ 円矢印

    set-line_image37.png

    ⑥ ひし形矢印

    set-line_image38.png

    ⑦ 丸形

    set-line_image39.png

    ⑧ 正方形

    set-line_image40.png

    11. 線の詳細設定

    線の種類や角の形などをカスタマイズすることができます。

    set-line_image41.png

    線スタイル

    実線、破線（点線）を選択できます。 破線のデザインは、1本の長さや間隔を数値で指定して行います。 カスタムでは、異なる数値を続けて入力すると複雑な破線をデザインすることができます。 また、線の先端の形を変更することもできます。

    set-line_image42.png

    set-line_image43.png

    set-line_image44.png

    結合　※角のあるオブジェクトを選択時にアクティブ

    角の形を選択します。 線の位置が内側の時は選択できても変化しません。

    ① マイター：尖った角 ② ベベル：尖った部分を切り落としたような角 ③ 丸形：丸い角

    set-line_image45.png

    ① マイター

    set-line_image46.png

    ② ベベル

    set-line_image47.png

    ③ 丸形

    set-line_image48.png

    マイター結合の角度　※角のあるオブジェクトかつマイター選択時にアクティブ

    マイター結合（角が尖っている）時の角度を指定します。 角が90°のオブジェクトの時、90°以上を設定すると、角がベベルになり、89°以下を設定すると尖ったままになります。 主に、文字にツノ（必要以上の角のはみ出し）ができる時に使用します。

    set-line_image48-1.png

    set-line_image49.png

    12. スタイル

    作成した色を保存、呼び出すことができるライブラリです。

    ① チームライブラリ：保存した色のリストをチームで共有 ② リストとして表示 / グリッドとして表示：カラー一覧の表示形式を切り替える ③ スタイルを作成：ライブラリに保存する色を作成する

    set-line_image51.png

    ① チームライブラリ

    ライブラリを共有するときは、本のアイコンをクリックし、現在のファイル欄の右にある「公開」をクリックします。 共有されたライブラリを使用するときは、同じく本のアイコンをクリックし、使用したいライブラリの「有効化」ボタンをクリックします。

    set-line_image52.png

    set-line_image53.png

    set-line_image54.png

    ② リストとして表示 / グリッドとして表示

    保存されたカラー一覧の表示形式を切り替えます。 グリッド表示されている時はリスト表示のアイコンに、リスト表示の時はグリッド表示のアイコンに変わります。

    set-line_image55.png

    set-line_image56.png

    set-line_image57.png

    ③ スタイルを作成

    ライブラリに追加する色スタイルを作成、保存します。

    set-line_image58.png

    set-line_image59.png

    保存前に選択カラーを変更する場合 オプション選択し、変更するカラーコードを入力し保存

    set-line_image60.png

    set-line_image61.png

    set-line_image62.png

    author icon

    Designpedia Team

    2024年1月11日(木) 公開