Design

【Figma】デザインナレッジまとめ

公開
Design Figma

日々のデザイン作業において、「あの表現、どうやるんだっけ？」「もっと効率のいい方法ってないの？」と思うこともしばしば…

今回は、デザイナー陣が発信している記事の中から、Figmaのナレッジを目的別に探せるようにまとめました。

お悩み解決

IllustratorやPhotoshopでやってたアレはどうやるんだっけ、というお悩みからFigma独自の挙動でのお悩み解決はこちら。

【Figma】 オブジェクトを上下・左右に傾ける方法｜Skew

Figmaでオブジェクトを傾けるために、アンカーポイントを手作業でずらして調整したり、Illustratorなどで加工してから読み込んだりするのは、意外と手間がかかると感じたことはないでしょうか。特にデザインに当てはめながら角度を微調整したいときや、変形後のテキスト修正の際は歯がゆさを感じますよね。本記事では、こうした悩みを解決してくれたプラグイン「Skew」をご紹介します。 Skewとは？

直感的にオブジェクトを傾けたい時、アンカーポイントをいじらずに少しの工夫で解決するテクニックを紹介しています。

【Figma】コンポーネントのサイズを変えても中身が拡大縮小されない時の解決法

今回もタイトルが如く、Figmaでコンポーネントを作ったものの、サイズ変更が適応されない時の解決法を記録しておきます。 どういう状況？ 例えば、下の図のような猫ちゃんのイラストをコンポーネントにするとします。 このコンポーネントをもとに、デザイン上で縮小して使用する時、事件は起こります。 なんということでしょう…サイズを縮小すると、そこには正方形にトリミング

「せっかくコンポーネント化したのに拡大縮小が変…」というつまづきポイントと、その解決法を紹介します。

画像のトリミングとドロップシャドウを併用した際に発生してしまう、謎の境界線を消すための小技をご紹介。

【Figma/Photoshop/Web】AIで簡単！画像の背景を削除してトリミングする方法

今回は、Figma・Photoshop・Web上で画像の被写体の背景を削除して、トリミングする方法を３つご紹介します。あくまで一例なので、普段使っているデザインツールや画像との相性に合わせて使い分けてみてください / デザイン記事は note にもまとめています。良ければ、フォローお願いします 🌱https://note.com/jbgoode/m/m94c0f7157f9c

Figma・Photoshop・Webのそれぞれで、画像の被写体を簡単に切り抜く方法を用途に合わせて紹介します。

プロトタイプ・アニメーション

実装者への共有時やクライアントへのプレゼンで活用できる、Figmaでのアニメーション制作に特化した記事はこちら。

【Figmaプロトタイプ】モーダルをオーバーレイでつくる

今回はタイトルの如くです。Figmaのプロトタイプで、ボタンを押すとモーダルが開く挙動の設定を、備忘録も兼ねて記しておきたいと思います。 モーダルの設定方法 例として、動画の再生ボタンを押すとモーダルが開く、という挙動の設定をしてみます。 こんな感じ ①デザインを用意 まずは、ベースとなるデザインとモーダルのデザインを用意します。 ②インタラクションを設

ボタンを押すとモーダルが開く、というWebで頻出の挙動をプロトタイプで簡単に設定する手順を紹介しています。

【Figma】自動で無限ループするアニメーションをつくる

今回は、Webサイトでよく見かける ロゴが流れて無限ループするアニメーション をFigmaのプロトタイプで再現します。実装者にアニメーションイメージを共有する時に使ってみてください。 こういうの ① ループするロゴセットを作成 まずはアニメーションの表示領域をFrame（animation_1）にします。その中にロゴを４つ並べて、こちらもまとめてFra

こちらもWebサイトでよく見る、ロゴやコンテンツが無限に流れるアニメーションをFigmaのプロトタイプで再現する方法を紹介します。

【Figma】最小限のFrameでスケルトンUIアニメーションを作る

スケルトンUIとはコンテンツが表示されるまでの間、コンテンツの枠組みを表示する読み込みUIの一種で、YouTube、Uber Eats、Pinterestなどのサービスで採用されています。読み込み中であることを伝えるだけでなく、コンテンツが表示される位置や画面の構成をあらかじめ示すことで、ユーザーが待ち時間に感じるストレスを軽減する役割があります。　　　今回は、「バリアブル」と「プロトタイプの条件

読み込み中の画面（スケルトンUI）を、少ないフレーム数で作成するプロトタイプのテクニックです。

連携

Figmaと他ツールを横断したスムーズな連携方法を紹介した記事はこちら。

【Chrome】プラグインなしで<img>タグのSVGをクリップボードに保存する方法

今回は、<img>タグのSVG画像をパス情報を保持したままクリップボードに保存する方法を忘備録として残します📝 はじめに SVGとは、拡大・縮小しても画像が荒れないベクター形式の画像データです。 普段見かけるJPGやPNG画像は、右クリックして「画像をコピー」することでクリップボードに保存でき、そのままデザインツールにペーストできます。 しかし、SVG画

Web上のSVG画像を、パス情報を保持したままサクッとFigmaに持ってくる、知る人ぞ知る時短ワザを紹介しています。

運用・管理

増え続けるFigmaのデータを使いやすく管理する方法を紹介した記事はこちら。

あのファイルどこいった？を解消するための方法をJ.B.Goode内で実際に設けている運用ルールを交えて紹介しています。

【番外編】概念・知識

操作方法だけではなく、WebデザインやUIデザインの考え方を一段階深める読み物・ナレッジもあります。息抜きにどうぞ。

オートレイアウト依存から脱却しよう

皆さんはWebサイトを制作する際、どのツールを活用していますか？弊社では主にFigmaを活用して制作しています。私は入社前までスマホアプリのデザインを中心に制作していましたが、入社後はランディングページ（LP）も制作することが増えました。それに伴い、大きく変わったのがオートレイアウトとの付き合い方です。入社したばかりの頃は、LPでもアプリを制作していた時と同様に、ほぼすべての要素をオートレイアウト

Figmaで「なんでもかんでもオートレイアウト」になっていませんか？適切な使い分けと、自由なレイアウトとのバランスについて考察した記事です。

デザインツールの点と線の話

Photoshop：Illustrator ＝ 点：線 フォトショ＝ビットマップ（点）：イラレ＝ベクター（線）。ん？Figmaはどっち？フィ？フィグ？もしや、フィマ？ 意外とここ、考えてなかった気がする。 ツールへの愛 Figmaはフィグマで、ベクターです。 さて。Figmaが登場するよりずっと前、2000年の頃までは、今よりツールの選択肢も限られていて、役割も明確。

Photoshop（点）とIllustrator（線）、ではFigmaはどっち？ツールの根本的な特性を紐解く内容です。

おわりに

いかがでしたでしょうか？ Figmaはアップデートの頻度も高く、便利な機能がどんどん追加されていくため、一度覚えたら終わりではなく、常に新しい使い方をキャッチアップしていくと、より快適にデザインが進められるかと思います。

J.B.Goodeでは、今後もFigmaの便利なTipsやデザインナレッジを随時発信し、本記事もアップデートしていく予定ですので、良ければフォローいただけると嬉しいです🌱

J.B.Goode株式会社
デザインや技術を表層だけではなく、その奥にある「構造」まで考え、形にするクリエイター集団です。

◆ チーム・採用について
私たちのカルチャーやものづくりに興味を持っていただけたら、まずは気軽にお話ししませんか？お互いのこだわりについて、カジュアルに話せたら嬉しいです。
https://www.jbgoode.jp/recruit/

◆ お仕事のご相談
「AIを導入したいが現場の課題が残っている」「既存のWebサイトやシステムではしっくりこない」など、なかなか解決しないお悩みがあればぜひご相談ください。
https://www.jbgoode.jp/contact/