🔰はじめての方へ

【Figma】編集メモ/グリッド・プラグインなど

Figma
記事内に広告が含まれています。
スポンサーリンク

自分用のメモとして残しておきます!

グリッド

Bootstrapに使えるため使用している

①フレームを選択

②「レイアウトグリッド」→ 左側のボタンをクリック

オートレイアウト

並べ替え、間の大きさを変更できる

ヘッダーにつかうオートレイアウトの説明

①テキストを入力して シフト+A → オートレイアウトが追加される

テキストを選択範囲の真ん中に設置したい場合は、赤線の中をクリック

②paddingを設定 (ここでは10になっている)

③コンポーネントの作成

 (1)上のひし形4つをクリック

 (2)複製

 Windowsは、alt+ドラッグ

 図形+文字は、図形と文字全体をドラッグして選択し、図形と文字の間を設定する

画像の書き出し

画像をクリックして、下の方にあるエクスポートからできる。

PNG、JPG、SVG、PDFから選択

WEB制作は、基本2倍(2x)を選択

コーディング

各オブジェクト毎にCSS情報(要素情報や文字情報)を確認することができる

→ 画面右上の「Inspect」

役にたつプラグイン

Insert Big image

サイトをフルスクショした画像を、Figmaに貼り付けると、かなり画像が荒くなります。

これは画像のサイズが大きすぎるためのようなので、圧縮する必要があります。

それを助けてくれるのがこのプラグインです!

有効化して、貼り付けたい画像をドラックアンドドロップすると綺麗な画像が出てくるはず!

html.to.design

HTML、CSSやURLを入力すれば、Figmaにデザインが表示される便利なツール!

無料は30日に最大10件までです!

Iconify

無料で簡単にアイコンが使える!

まとめ

なんとなくでしか使っていなかったので、何か便利なことがあれば随時更新していく予定です!