はじめに

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

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

プラグインを使おう

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


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


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



このプラグインを使うと細かく・便利にアニメーションを作成できます。

TIPS

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



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

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




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


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


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

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