はてなブックマーク

今回はFigmaでルーラー（定規）やグリッド（升目）を表示・非表示したり、アウトライン表示などの見た目を切り替える方法を紹介します。ガイドを作成したい場合や、誤ってショートカットキーを押してしまって元に戻したい時などの参考になればと思います。 この記事のターゲットFigmaの初心者 Figmaでルーラーやグリッドを表示・非表示したい方 Figmaで誤操作などで白黒の線画のようなモード（アウトライン）から元に戻したい方 ビューの切り替え機能の場所Figmaでルーラーやグリッドなどのビューを切り替える機能の場所は、ツールバーの一番右側の「xxx％」と表示されるエリアに格納されています。この「xxx%」は現在の拡大率を表示しています。 Figmaで利用できるビューの切り替え機能の種類今回紹介するFigmaの表示切り替えの機能は次の通りです。括弧の中はショートカットです。 Pixel previe

今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 この記事のターゲットFigmaの中級者〜上級者 Figmaでボタン・コンポーネントの作り方が知りたい方 Figmaの Component と Variants と Auto layout の使い方が知りたい方 1. ボタンの Component をつくる今回は、背景・枠線・テキストのみスタイルを設定した最もシンプルなボタンを作ってみようと思います。 まず、Textツールで適当なテキストを用意し、選択した状態で「Shift + Aキー」を押します。すると、テキストが「Frame」という Auto layout

今回は、Figmaで図形やフレームを追従する矢印でつないで、簡単にフローチャートや画面遷移図をつくる方法を紹介します。サイトマップ作成やアプリケーションのUXを検討する際に、画面同士を矢印で繋ぐことで動線を検討したり、概念モデルを整理するのに役立ちます。 この記事では、大きくプラグインを使う方法と、FigJamを応用する方法の２つを紹介します。 この記事のターゲットFigmaで画面や図形をなめらかに矢印でつなぎたい方 Figmaで遷移図やフローチャートを書きたい方 Figmaで情報設計やWebデザイン用の資料を作りたい方 プラグイン「Autoflow」を使う方法 図形やフレームなどを、簡単に矢印で接続できるプラグインを利用する方法です。 プラグインの導入方法が知りたい方は、以下の記事を参考にしてください。 Figmaのプラグインのインストール方法と使い方今回はFigmaでプラグインをインス

今回はFigmaでインジケータ・プログレスバー形式の円グラフ・棒グラフを簡単に作成する方法を紹介します。慣れれば１分で作成でき、パターンを用意しておけばいつでも必要な時にサッと書き出せるようになるのでおすすめです。 複数の値を持つ円グラフの作り方については、以下の記事で紹介していますので参考にしてください。 Figmaでシンプルな円グラフを生成するプラグインの紹介今回は、FigmaとFigJamで任意の値を入力して、パーセント表示付きの凡例と円グラフを生成できるプラグイン「シンプルな円グラフの生成」の紹介です。スライド資料用のグラフや、ウェブサイトに掲載する簡単な円グラフが手っ取り早く欲しい時などに便利です。 ... 続きを読む

今回は、Figmaのプラグイン「Mockup」を使って、スマートフォンやPCなどのデバイスの画面に、スクリーンショットなどの画像を簡単にはめ込む方法を紹介します。 はめ込みたいデバイスの画面が斜めになっている場合でも対応できますので、LPや広告バナーなどで使うサービス紹介用の素材作りにおすすめです。ぜひマスターしましょう！ この記事のターゲットFigmaの初心者 サービスサイトや広告でサービス紹介用のモックアップ素材を作りたい方 コンテンツマーケティング用素材を作りたいマーケティング担当者 1. 「Mockup」をインストールする この「Mockup」というプラグインは、スマートフォンやデスクトップPCなどの好きなデバイスに好きな画像をはめ込むことができる、控えめにいって神プラグインです。 Figmaのアカウントにログインして、こちらのページから「Install」をクリックすると、Figm

今回は、バナーやポスターなどの背景素材などにすぐ使える、模様や柄などの繰り返しのタイルパターンをfigmaで作る方法をまとめました。模様や柄には様々な種類がありますが、今回はシンプルな市松模様（チェック柄）と、麻の葉模様を+簡単に作ってみたいと思います。 この記事のターゲットFigmaの初心者〜中級者 Figmaで繰り返しパターンのデザインを作りたい方 Figmaで市松模様や麻の葉模様を自作したい方 市松模様編1. 「Rectangle」で正方形を４つ並べ、2x2のチェック柄になるようにFillの色を変更する Shape Toolsで矩形を追加する際に、Shiftキーを押しながらドラッグすることで、縦横比が1:1の図形を引くことができます。Rectangleは長方形ツールなので、この方法で正方形を簡単に追加できます。 そして、追加したオブジェクトを選択状態でOption（Alt）キーを押し

Figmaで画像をトリミングしたり、好きな形にくり抜く方法の紹介です。アプリのユーザーアイコンをデザインする際に円形にくり抜いたり、WEBやスライド資料などに差し込む画像の加工などに便利です。 Figmaにインポートした画像の余分な部分を切り取る方法はいくつかありますが、今回は「クロップ（Crop）」と「マスク（Mask）」を紹介します。 この記事のターゲットFigmaの初心者 画像をトリミングしたい方 画像を好きな形にくり抜く（クリッピングマスク）方法が知りたい方 画像の余分な部分をトリミング（クロップする）方法クロップは、インポートした画像から必要な部分に絞り込んで四角く切り取る方法です。手順は以下の通りです。 切り抜く画像を選択する 右プロパティの「Fill」の「Image」の左側の□をクリックする ポップアップ上部の「Fill」をクリックし、「Crop」を選択する 切り抜きたいエリ