Figma

Figmaは、チームでのWebサイトやアプリケーションのUI/UXのデザイン制作や開発でのコミュニケーションに特化した、オンラインコラボレーションツールです。パスや画像を使って制作したデザインやグラフィックアートをURLで簡単にシェアしたり、様々な形式のファイルにアウトプットできます。


figma-text-bold-underline-shortcuts

Figmaのフォントスタイル内で部分的に太字や下線を適用するショートカット

2024.07.12
figma-config-2024-updates

Figma Config2024で発表された新機能・改善のダイジェスト

2024.06.27
figma-bottom-fixed-sticky-animation-prototype

Figmaでオブジェクトを画面下部に固定して追従させる(プロトタイプ)

2024.06.14
figma-file-management-tips

Figmaのファイル管理がちょっと便利になるTips集

2024.06.07
figma-how-to-change-screen-size-on-preview

Figmaのプレビューで画面サイズの縦横比を維持する方法

2024.05.31
figma-how-to-add-page-divider

Figmaでページを分ける区切り線を追加する方法

2024.05.17
figma-how-to-separate-tabs

Figmaで画面タブを分割して2画面表示する方法

2024.05.03
figma-figjam-how-to-change-cursor

FigmaやFigJamでカーソルを変更して遊ぶ

2024.04.12
figma-figjam-how-to-make-ranged-comments

Figmaで範囲指定してコメントをする方法

2024.04.05
figma-how-to-hide-comments

Figmaでコメントのバッジを非表示にする方法

2024.03.22
figma-multi-edit-mode

Figmaで複数要素を一括選択して同時編集する方法

2024.03.08
2024- figma-dev-mode-release

Figmaの開発モード(Dev mode)のリリース情報のまとめ

2024.02.09
figma-overlay-dialog-prototype

Figmaでダイアログをオーバーレイで表示させる(プロトタイプ)

2024.01.26
figma-how-to-create-dialog

Figmaでシンプルなダイアログ・コンポーネントを作る方法

2024.01.12
figma-auto-layout-tips

Figmaのオートレイアウトで使える便利なテクニック集

2023.12.22
figjam-how-to-use-mindmap

FigJamのマインドマップの基本的な使い方

2023.12.15
figma-figjam-generative-ai

FigmaとFigJamの生成AIに関する機能まとめ

2023.12.08
figma-google-meet-addon

Google Meetの参加者でFigJamを共同編集する方法

2023.12.02
figma-little-big-updates-2023-11

Figmaの「Little Big Updates」で公開された機能(2023年11月分)

2023.11.24
figma-color-wheel-palette-generator-plugin

Figmaで補色やグラデーションを自動補完で作成できるカラーパレットの使い方

2023.11.17
figma-figjam-text-list-style

Figmaのテキストを階層のある箇条書きリストにする方法

2023.11.03
figma-how-to-use-canvas-stacking

Figmaでオートレイアウト上の要素の重なり順を逆転する方法

2023.10.27
figma-little-big-updates-2023-10

Figmaの「Little Big Updates」で公開された機能(2023年10月分)

2023.10.20
figma-how-to-use-absolute-potision

Figmaでオートレイアウトを無視して要素を自由に配置する方法

2023.10.13
figma-little-big-updates-2023-09

Figmaの「Little Big Updates」で公開された機能(2023年9月分)

2023.10.06
figma-how-to-use-alignment

Figmaでオブジェクトを整列・均等配置する方法

2023.09.29
figma-layout-design-tips

Figmaの画面レイアウトや配置に関する機能のまとめ

2023.09.15
figma-mindmap-widget

Figma・FigJamで使える「Mindmap(Beta)」ウィジェットの紹介

2023.09.08
figma-how-to-setting-prototype-with-mockup

Figmaでモックアップ付きのプロトタイプを作成する方法

2023.09.01
figma-studio-plugin

FigmaのデザインデータからSTUDIOのサイトを作成する方法

2023.08.25
figma-components-tips

Figmaのコンポーネント機能の使い方まとめ

2023.08.18
figma-ai-image-generator-plugin

Figmaでテキストから画像生成できるプラグイン「AI image generator」

2023.08.11
figma-how-to-setting-scroll

Figmaのプロトタイプのスクロール制御に関する設定

2023.08.04
figma-useful-text-tips

Figmaでテキストを使った便利なテクニック集

2023.07.28
figma-pull-down-button-prototype

Figmaでクリックするとメニューが開くプルダウンボタン

2023.07.21
figma-turncate-text

Figmaでテキストを行数で自動的に省略表示(…)する方法

2023.07.14
figma-auto-layout-wrap

Figmaのオートレイアウトで折り返しできる「Wrap」の使い方

2023.07.07
figma-config-2023-updates

Config 2023で発表されたFigmaの新機能まとめ

2023.06.23
figma-resource-ios17-and-ipados17

FigmaでiOS 17・iPadOS 17のUIキットを利用する方法

2023.06.09
figma-header-sticky-animation-prototype

Figmaでヘッダーを画面上部に固定して追従させる(プロトタイプ)

2023.06.02
how-to-convert-figma-animations-to-lottie-files-by-plugin

Figmaで作成したアニメーションをLottieFilesに書き出す方法

2023.05.26
figma-figjam-simple-graph-plugin

Figma・FigJamでシンプルなグラフを生成するプラグイン集

2023.05.19
figma-simple-radar-chart-plugin

Figmaでシンプルな多角形グラフ(レーダーチャート)を作成する方法

2023.05.12
figma-simple-line-chart-plugin

Figmaでシンプルな線グラフを生成するプラグインの紹介

2023.04.21
figma-interactive-components

Figmaで作れるインタラクション付きコンポーネント集

2023.04.14
figma-simple-bar-chart-plugin

Figmaでシンプルな棒グラフを生成するプラグインの紹介

2023.04.07
figma-little-big-updates-2023-03

Figmaの「Little Big Updates」で公開された32の機能(2023年3月)

2023.03.31
figjam-how-to-edit-table-and-csv

FigJamで表形式のテーブル(CSV)を追加・編集する方法

2023.03.24
figma-integration-tips

Figmaとの連携で便利な外部ツールの使い方

2023.03.17
small-start-design-system

「ちいさくはじめるデザインシステム」の執筆に共著で参加しました

2023.03.10
figma-simple-pi-chart-plugin

Figmaでシンプルな円グラフを生成するプラグインの紹介

2023.03.03
figma-how-to-insert-icons-into-text

Figmaでテキスト内にアイコンを挿入する方法

2023.02.24
figma-how-to-use-auto-layout

Figmaのオートレイアウトの基本的な使い方

2023.02.17
figma-noisy-gradients-plugin

Figmaで簡単にメッシュ・グラデーションをランダム生成する方法

2023.02.10
figma-delete-component-and-variants

Figmaのコンポーネント化を解除・削除する方法

2023.01.27
figma-icons8-background-remover-plugin

Figmaで複数の画像素材から一括で背景を透過する方法

2023.01.20
figma-insert-big-image-plugin

Figmaで幅が4096pxより大きい画像を高解像度で取り込む方法

2023.01.13
notion-figma-figjam-integration

NotionでFigma/FigJamを連携する方法

2023.01.06
figma-google-calender-addon

GoogleカレンダーのイベントにFigma/FigJamのリンクを同期する方法

2022.12.16
figma-notioin-efficiency-of-meeting-minutes

FigmaとNotionで会議をなめらかに進行するための議事録Tips

2022.12.09
figma-how-to-emmbed-preview-at-external-site

Figmaのデザインデータを外部ツール上でプレビューする方法

2022.12.02
summary-of-schema-by-figma-2022

Schema2022で公開した登壇資料のまとめ

2022.11.18
figma-how-to-create-objective-model

Figmaで効率的にオブジェクトモデルを設計する方法

2022.11.11
report-of-schema-by-figma-2022

Schema by Figma 2022の登壇の振り返り

2022.11.04
figma-pitchdeck-presentation-studio-plugin

Figmaで作成したスライドをkeynoteやpowerpoint形式で出力する方法

2022.10.28
figma-simple-components-series-202210

シンプルなコンポーネントシリーズの人気ランキング

2022.10.22
Schema by Figma 2022

Schema by Figma 2022で登壇します

2022.10.14
figma-text-find-and-replace-in-file

Figmaでファイル内のテキストを検索・一括置換する方法

2022.10.07
figma-plugin-text2image

Figmaで使える画像生成AIプラグイン「Text2Image」

2022.09.30
figma-nested-instance-property-setting

Figmaでコンポーネントに内包されたインスタンスのプロパティを効率的に変更する方法

2022.09.23
figma-useful-settings

Figmaの使いやすさを向上する設定のヒント

2022.09.16
figma-how-to-save-local-file

Figma・FigJamのファイルをローカルに保存する方法

2022.09.09
figma-table-cell-animation-prototype

マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)

2022.09.03
SmartHRのプロダクトデザイングループのFigmaの運用を大公開!第1弾:デザインデータに対する考え方

2022.09.01
figma-figjam-how-to-setting-language-japanese

FigmaとFigJamを日本語に言語設定する方法

2022.08.05
figma-how-to-design-ui-components

Figmaで汎用的なUIコンポーネントを作る方法

2022.07.29
figma-figjam-collaboration-tips

Figmaを使って複数人で円滑にコラボするためのTips

2022.07.15
figma-set-small-and-big-nudge-values

FigmaのPaddingやカーソル移動のデフォルト値を設定する方法

2022.07.08
figma-how-to-use-widget

FigmaやFigJamで使えるウィジェット機能の使い方

2022.07.01
figma-how-to-set-as-thumbnail

Figmaのファイルのサムネイルを設定・解除する方法

2022.06.24
figma-how-to-save-local-file

Figmaファイルをローカルに書き出し・保存する方法

2022.06.17
figma-how-to-use-flip-horizontal-and-vertical

Figmaでオブジェクトを上下左右に反転する方法

2022.06.10
figma-how-to-use-local-fonts

FigmaでWindows・Macのローカルフォントを使う方法

2022.06.03
figma-partially-apply-border

Figmaで枠線(Stroke)を部分的に適用する方法

2022.05.27
figma-component-properties-vs-variants

FigmaのComponent propertiesとVariantsの使い分けの考察

2022.05.20
figma-config-2022

FigmaのTokyo Config Watch Party2022の参加レポート

2022.05.13
figma-how-to-use-scale

Figmaでテキストごとオブジェクトを拡大・縮小する方法

2022.05.06
figma-how-to-use-color-styles

FigmaでColor Stylesをカスタマイズする方法

2022.04.29
figma-clean-docment-plugin

Figmaでレイヤーやグループを自動整理できる「Clean Document」の使い方

2022.04.22
figma-toggle-switch-with-slide-animation-prototype

スライドするアニメーション付きのスイッチ(プロトタイプ)

2022.04.15
figma-notification-in-slack-channel

Slackの特定チャンネルにFigmaのコメントを通知する方法

2022.04.01
figma-how-to-create-tooltip

Figmaでシンプルなツールチップ・コンポーネントを作る方法

2022.03.25
figma-funny-images-tips

Figmaでネタ画像を作るためのTips

2022.03.18
figma-button-with-fill-animation-prototype

Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)

2022.03.11
figma-how-to-create-side-menu

Figmaでシンプルなサイドメニュー・コンポーネントを作る方法

2022.03.04
figma-outline-to-single-stroke-plugin

Figmaでアウトラインをパスに変換・復元する方法

2022.02.25
figma-how-to-use-comment

Figmaのコメント機能の使い方

2022.02.18
figma-path-and-curve-tips

Figmaでおすすめの直線・曲線パスを使ったTipsまとめ

2022.02.11
figma-how-to-create-radio-button

Figmaでシンプルなラジオボタン・コンポーネントを作る方法

2022.02.04
figma-how-to-create-checkbox

Figmaでシンプルなチェックボックス・コンポーネントを作る方法

2022.01.21
figma-ruler-and-grid-view-tips

Figmaでグリッドやガイド(ルーラー)を表示・非表示する方法

2022.01.14
figma-font-viewer-plugin

Figmaでフォントのプレビューを表示する方法

2022.01.07
figma-how-to-use-component

Figmaのコンポーネント機能の基本的な使い方

2021.12.17
figma-plugins-for-image-processing

Figmaでおすすめの写真・画像加工のTipsまとめ

2021.12.10
figjam-confetti-plugin

Figmaで紙吹雪(パーティクル)を均等に散らす方法

2021.12.03
figma-how-to-export-webp

Figmaで画像を圧縮したりwebp形式で保存する方法

2021.11.26
figma-how-to-create-form

Figmaでシンプルなフォーム・コンポーネントを作る方法

2021.11.19
figma-brandfetch-plugin

Figmaで企業ロゴなどのブランド・アセットを検索できる「Brandfetch」の使い方

2021.11.12
figma-filter-plugin

Figmaのプラグイン「Filter」でPhotoshopのようなエフェクトを使う方法

2021.11.05
figma-how-to-create-header

Figmaでシンプルなヘッダー・コンポーネントを作る方法

2021.10.29
figjam-widgets-collection

FigJamの作業が捗る便利なウィジェットの使い方

2021.10.22
figma-how-to-create-tab

Figmaでシンプルなタブ・コンポーネントを作る方法

2021.10.15
figma-pixels-plugin

Figmaで画像をドット絵のようなモザイクに変換する方法

2021.10.08
figma-contrast-plugin

Figmaで簡単にコントラスト比を調べる方法

2021.10.01
figma-how-to-use-icons

Figmaで無料のアイコン素材集を利用する方法

2021.09.24
figma-how-to-create-button

Figmaでシンプルなボタン・コンポーネントを作る方法

2021.09.17
figma-skewdat-plugin

Figmaで簡単にテキストや図形を斜めに変形する方法

2021.09.10
figma-how-to-create-table

Figmaでシンプルなテーブル(表)を作る方法

2021.09.03
figma-connect-with-arrows

Figmaで簡単にフローチャートや画面遷移図をつくる方法

2021.08.27
figma-morph-plugin

Figmaでネオンやガラスの質感を手軽に使えるプラグイン「Morph」の紹介

2021.08.20
figma-how-to-mask

Figmaでマスクを適用・解除する方法

2021.08.13
figma-to-path-plugin

Figmaで曲線パスに沿って文字やシェイプをはわせる方法

2021.08.06
figma-how-to-use-corner-radius

Figmaで角丸を使った便利なテクニック集

2021.07.23
figma-slackbot-app

Figmaのコメント通知をSlackで受け取る方法

2021.07.16
figma-how-to-use-dropshadow

Figmaで様々なドロップシャドウ(影)を適用する方法

2021.07.09
figma-how-to-use-plugins

Figmaのプラグインのインストール方法と使い方

2021.07.02
figma-how-to-use-blur-effect

Figmaでオブジェクトや画像にぼかしを入れる方法

2021.06.25
figma-how-to-create-pie-chart

Figmaで簡単に円グラフや棒グラフを作る方法

2021.06.18
figma-how-to-edit

Figmaでテキストや図形を編集できない時に試すこと

2021.06.11
figma-text-vertical-alternates

Figmaでテキストを縦書きに対応する方法

2021.06.04
figma-how-to-crop-and-mask

Figmaで画像を○や□などの好きな形に切り抜く方法

2021.05.28
figma-mobile-and-destop-mockup

Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法

2021.05.21
figma-how-to-gradation

Figmaで図形やテキストのべた塗りとグラデーションの使用方法

2021.05.14
figma-how-to-edit-line-style

Figmaで破線・点線や矢印がついたパスを作る方法

2021.04.30
2021-figjam-release

FigJamの機能と使い方の解説(動画付き)

2021.04.23
figma-how-to-export

Figmaでファイル形式を指定して画像に書き出す方法

2021.04.16
figma-remove-bg-plugin

Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法

2021.04.09
figma-beginners-tips

Figma初心者が使い方に困った時に試してほしいTips

2021.03.29
figma-noise-tool-plugin

Figmaの「Noise」でざらざらした質感を表現する方法

2021.03.12
figma-basic-banner-design

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

2021.03.08
figma-wave-and-curve

Figmaで簡単に波線・ジグザグのパスを作る方法

2021.02.28
figma-patern-design

Figmaで模様や柄などの繰り返しタイルパターンを作る方法

2021.02.22
figma-super-ellipse

Figmaで簡単になめらかな角丸の「スーパー楕円」を作る方法

2021.02.15
figma-brend-mode-luminosity

Figmaで画像の色をセピアや単色のモノクロに変換する方法

2021.02.11
favorite figma plugins

UIデザインの作業を加速するFigmaプラグイン10選

2021.02.08