チラシデザイン、動画編集制作、ホームページ制作は横浜の日本一店長のアイシープへ

日本一店長のチラシデザインと動画編集&ホームページ制作

【最新版】よく使う「Figma」TIPS集

60 views
約4分
【最新版】よく使う「Figma」TIPS集




はじめに


デザインツール「figma」はとても便利です。

webで使用できるのでパソコンさえあればどこででも作業ができます。
そこで、主な作り方を備忘録としてメモしておきます。

プラグイン


figmaはプラグインがたくさんあって使わないとソンです。
どんどん便利ツールは活用しましょう。

「Better Font Picker」

どのフォントがどんな形か見ながら探せるプラグイン。
「Better Font Picker」
とりあえずコレ入れとかないと話になりません。


「 Figma to Code」

Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインです。
LP制作にはもってこいです。


TIPS


表を作る方法


テンプレートがダウンロードできるので助かります。


バナーなどの背景をテクスチャにしたりする


テクスチャをpngにして、適用したいオブジェクトのFillに挿入します。
1.適用したいオブジェクトを選択して、Fillを「+」で追加する
2.追加されたレイヤーの一番左の□の部分をクリックしてポップアップの「Linear(またはSolidなど)」の部分を「Image」に変更
3.先ほど書き出したPNGファイルをドラッグする

このサイトは使えます。
テクスチャ探しにはもってこい!


「Crop」で画像を好きな形に切り抜く


画像を切り取る
全部同じサイズの画像にしたい場合に使います。


フッター固定

Bottom設定にしましょう。
プレビューじゃないと固定の確認はできないので注意。


横スクロール

横スクロール結構使います。

アートボード選択して「Clip content」のチェックを外すと横スクロール全画面確認できます。


Figmaじゃなくても「LP TIPS」


LP制作に必要なTIPSをご紹介
フォントサイズ

PC/SP共に読んでもらいたいテキストは最低でも14px以上が一般的です。
12pxはかなり小さいので、使うとしたらコピーライトのような読まれなくても問題ない部分に適用されています。
ちなみに、10pxを下回るとGoogle Chromeブラウザでは10px未満になりませんので、小さいフォントサイズで使う場合は基本10px以上を推奨しています。


ファーストビューがフルサイズ

下記のようなLPはファーストビューがフルサイズの横幅で、あとは細くなっています(背景はフルサイズ)がサイズはどのように設定しているのでしょうか?


ファーストビューは画像のみの配置で横幅の指定は無し。
ファーストビューより下の各コンテンツは、980px及び1000pxのコンテンツ幅(横幅)に収まっているレイアウトで、それよりはみ出ている背景の部分は背景画像で実装されています。
ファーストビューは横幅いっぱいで、それ以外の部分はコンテンツ幅を設定して、テキストやボタンなどをその中に収めるのは一般的なデザインですので、このような感じでデザインされますとWebサイトとして違和感が無い作りになります。




Comment On Facebook