All Posts
デジタルプロダクトに携わるデザイナーがFigmaなどのデザインツールの使い方や便利なテクニックなど、デザイン業務で役立つTipsを紹介しています。
![wsd41-report4](https://images.ctfassets.net/ubv4j9m3121x/5G1v2ulK6TthUCR1EHPx8G/779e0256b97eeed40fb417904ba425ce/wsd41-report4.png?w=1203&h=632&q=50&fm=png)
WSDレポート④:ワークショップの背景理論
2024.07.26
![wsd41-report3](https://images.ctfassets.net/ubv4j9m3121x/1mMv9C72OwPVQbxnUOg7Iz/efb116b3aacbb293c8dbd6d924c03a89/wsd41-report3.png?w=1203&h=632&q=50&fm=png)
WSDレポート③:ワークショップの背景理論
2024.07.19
![figma-text-bold-underline-shortcuts](https://images.ctfassets.net/ubv4j9m3121x/3AAm3PMvNlMwMiEibuFyVk/6afab1b2716261a79e431f1934d96659/figma-text-bold-underline-shortcuts.png?w=1200&h=630&q=50&fm=png)
Figmaのフォントスタイル内で部分的に太字や下線を適用するショートカット
2024.07.12
![wsd41-report2](https://images.ctfassets.net/ubv4j9m3121x/5lTqdupl6wlzFaQkhrPEHJ/dc26b4c81422843f56d0b0ded5045dd9/wsd41-report2.png?w=1202&h=632&q=50&fm=png)
WSDレポート②:ワークショップを学習として捉える
2024.07.05
![figma-config-2024-updates](https://images.ctfassets.net/ubv4j9m3121x/6iNtHX1QtYgnxrqPzgXeRB/9b6950cf075de64a4adb3679e5d2855e/figma-config-2024-updates.png?w=1200&h=630&q=50&fm=png)
Figma Config2024で発表された新機能・改善のダイジェスト
2024.06.27
![wsd41-report1](https://images.ctfassets.net/ubv4j9m3121x/3U0qi68Op7Sta56JKdAAfU/e758c4a9d0e89f76c31e4bcdb68ce3d9/wsd41-report1.png?w=1202&h=632&q=50&fm=png)
WSDレポート①:ワークショップの定義を考える
2024.06.21
![figma-bottom-fixed-sticky-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/4Q1VCcpsx74MFLqMyYHZdx/12eab8b67a2c6cb04d7896b4872499eb/figma-bottom-fixed-sticky-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでオブジェクトを画面下部に固定して追従させる(プロトタイプ)
2024.06.14
![figma-file-management-tips](https://images.ctfassets.net/ubv4j9m3121x/13kq5eYj0nYVWVqUeyIi7w/9894bee661b0dda6ead61bfda22b9d73/figma-file-management-tips.png?w=1200&h=630&q=50&fm=png)
Figmaのファイル管理がちょっと便利になるTips集
2024.06.07
![figma-how-to-change-screen-size-on-preview](https://images.ctfassets.net/ubv4j9m3121x/7sLrspCYUK9ZltgbsaOJir/2932fd1e676bbc7561c925416d3d6b4a/figma-how-to-change-screen-size-on-preview.png?w=1200&h=630&q=50&fm=png)
Figmaのプレビューで画面サイズの縦横比を維持する方法
2024.05.31
![pc-gamers-best-buy-2024](https://images.ctfassets.net/ubv4j9m3121x/52UhmK8MC3mNyYoPSdfKYx/33c638e16276759c60033b68f20858a4/pc-gamers-best-buy-2024.png?w=1200&h=630&q=50&fm=png)
PCゲーマーがデスク環境で買ってよかったもの2024
2024.05.24
![figma-how-to-add-page-divider](https://images.ctfassets.net/ubv4j9m3121x/3XTfUdqEn9vgxZBwA3gQ3H/273abab719033f877bc54e510228aa7d/figma-how-to-add-page-divider.png?w=1200&h=630&q=50&fm=png)
Figmaでページを分ける区切り線を追加する方法
2024.05.17
![今更聞けない「労務領域」のデザインって何をしているの?](https://images.ctfassets.net/ubv4j9m3121x/4p8aXe4Ubrjv6w8q4eSfrB/8bd65d9fe46209f8a64a5ad1f4271887/Design_in_Labor_Domain.jpeg?w=1280&h=670&fl=progressive&q=50&fm=jpg)
今更聞けない「労務領域」のデザインって何をしているの?
2024.05.10
![figma-how-to-separate-tabs](https://images.ctfassets.net/ubv4j9m3121x/7ntkw2cOst3vqKjHB2GcMB/7be8a337bc907396359009c39e94c888/figma-how-to-separate-tabs.png?w=1200&h=630&q=50&fm=png)
Figmaで画面タブを分割して2画面表示する方法
2024.05.03
![mhlw-career-consulting-2024](https://images.ctfassets.net/ubv4j9m3121x/6jGCAizJDK2ZWWYYyQ3806/b0a5d7c1fea03c213d3afc89cf8f4628/mhlw-career-consulting-2024.png?w=1200&h=630&q=50&fm=png)
専門実践教育訓練給付金を申請してみた:訓練前キャリアコンサルティング編(2024)
2024.04.26
![goods-useful-for-moving-2024](https://images.ctfassets.net/ubv4j9m3121x/5a0Oxic1NYsyZjj5kRCvXX/9220950b5aa697282f5d761ca3ec73e8/goods-useful-for-moving-2024.png?w=1200&h=630&q=50&fm=png)
新居への引っ越しで役に立った便利なグッズ・ガジェット2024
2024.04.19
![figma-figjam-how-to-change-cursor](https://images.ctfassets.net/ubv4j9m3121x/56uAuFNzswljlYpQlYaqG9/5447362f8b81120b82cc2b2e8b4add8f/figma-figjam-how-to-change-cursor.png?w=1200&h=630&q=50&fm=png)
FigmaやFigJamでカーソルを変更して遊ぶ
2024.04.12
![figma-figjam-how-to-make-ranged-comments](https://images.ctfassets.net/ubv4j9m3121x/5XCYyuDVJTbEiaDEUHDSCL/295d953ed99dc15b08036a9397bdfbf1/figma-figjam-how-to-make-ranged-comments.png?w=1200&h=630&q=50&fm=png)
Figmaで範囲指定してコメントをする方法
2024.04.05
![mhlw-how-to-create-job-card-2024](https://images.ctfassets.net/ubv4j9m3121x/4Dsft8pNV7k5yW1Ov83K7w/441975a8fa06b6c62fb4e7c4dc4f588c/mhlw-how-to-create-job-card-2024.png?w=1200&h=630&q=50&fm=png)
専門実践教育訓練給付金を申請してみた:ジョブカード準備編(2024)
2024.03.29
![figma-how-to-hide-comments](https://images.ctfassets.net/ubv4j9m3121x/1doMlbw2k3u7dBBQ4l86wu/1e49700e47c84027eec29d0fe22fae1b/figma-how-to-hide-comments.png?w=1200&h=630&q=50&fm=png)
Figmaでコメントのバッジを非表示にする方法
2024.03.22
![mhlw-professional-practice-education-and-training-2024](https://images.ctfassets.net/ubv4j9m3121x/7h6c4zWcIqp5SeNDAlVOgf/d0554c9bdb67b99285671ac8b23d8180/mhlw-professional-practice-education-and-training-2024.png?w=1200&h=630&q=50&fm=png)
専門実践教育訓練給付金を申請してみた(2024)
2024.03.15
![figma-multi-edit-mode](https://images.ctfassets.net/ubv4j9m3121x/5IkvjQ6TmHbVYGR7zNB3UM/6e34415bcd52eccd58b879e40784a974/figma-multi-edit-mode.png?w=1200&h=630&q=50&fm=png)
Figmaで複数要素を一括選択して同時編集する方法
2024.03.08
![デザインシステムを積み上げた先には何が待っているのか?](https://images.ctfassets.net/ubv4j9m3121x/6e62AUzv0EZ5cSVyvyXftS/4b6d302267c4c928e166e20564c8b8a0/rectangle_large_type_2_f8a5b11cdcf6b8f77a8693009029e576.png?w=800&h=419&q=50&fm=png)
デザインシステムを積み上げた先には何が待っているのか?
2024.02.29
![workshop-designer-training-program-2024](https://images.ctfassets.net/ubv4j9m3121x/2rS17p3qMJDUvDF6uEvjD6/1e313d431e005477144201ca69a76456/workshop-designer-training-program-2024.png?w=1200&h=630&q=50&fm=png)
2024年度第1期ワークショップデザイナー育成プログラム(青山学院大学大学院)を受講します
2024.02.23
![経済圏に自分の経済活動を支配されないために](https://images.ctfassets.net/ubv4j9m3121x/iwb874mnMQh3HGk7JQbGz/79d99f48b410bfe62ae00cec7f6c4f23/01._______________________.png?w=1920&h=1080&q=50&fm=png)
経済圏に自分の経済活動を支配されないために
2024.02.16
![2024- figma-dev-mode-release](https://images.ctfassets.net/ubv4j9m3121x/5hGwVaPDqsph2OT9dnxntE/9df90cd44c443908fe12f66585b4cf0d/2024-_figma-dev-mode-release.png?w=1200&h=630&q=50&fm=png)
Figmaの開発モード(Dev mode)のリリース情報のまとめ
2024.02.09
![how-to-import-from-miro-to-figjam](https://images.ctfassets.net/ubv4j9m3121x/5eiyiKDRl2iYTI371MacKh/7292bda599dff7c8627e74fa1ee63d8c/how-to-import-from-miro-to-figjam.png?w=1200&h=630&q=50&fm=png)
Miroのデータをなるべく壊さずにFigJamに取り込む方法
2024.02.02
![figma-overlay-dialog-prototype](https://images.ctfassets.net/ubv4j9m3121x/kf3tqzF3X445h7mrnjKj9/0c1a71a7ae22c05eed9fefedb9157791/figma-overlay-dialog-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでダイアログをオーバーレイで表示させる(プロトタイプ)
2024.01.26
![travelers-best-buy-2024](https://images.ctfassets.net/ubv4j9m3121x/5aNClQIZAHIsqWCyDl3SHQ/25d0bc5066c0f676fb5c7f2138257b48/travelers-best-buy-2024.png?w=1200&h=630&q=50&fm=png)
旅行やワーケーションで便利だったおすすめのガジェット2024
2024.01.19
![figma-how-to-create-dialog](https://images.ctfassets.net/ubv4j9m3121x/5s9jOUuNjrlVAQD806c1XV/fd7f75f7ca50a2e5bfce88f57cbd6bd3/figma-how-to-create-dialog.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなダイアログ・コンポーネントを作る方法
2024.01.12
![popular-articles-2023](https://images.ctfassets.net/ubv4j9m3121x/3WwPiF03pmVQrTQUpYRxic/7a15838eae16adabbfbce79c171912d1/popular-articles-2023.png?w=1200&h=630&q=50&fm=png)
2023年に最も人気だった記事ベスト10
2024.01.05
![remote-workers-best-buy-2023](https://images.ctfassets.net/ubv4j9m3121x/2QqkXuNs8FDPMTHXeLMoh1/87dfaceceecb260636fcc2fe9a903e7e/remote-workers-best-buy-2023.png?w=1200&h=630&q=50&fm=png)
リモートワークで買ってよかったもの2023秋冬
2023.12.29
![figma-auto-layout-tips](https://images.ctfassets.net/ubv4j9m3121x/2dwHW5YmGhyr9fudAa4lJG/6e186b364724257a3c63e4a4e8455e0b/figma-auto-layout-tips.png?w=1200&h=630&q=50&fm=png)
Figmaのオートレイアウトで使える便利なテクニック集
2023.12.22
![figjam-how-to-use-mindmap](https://images.ctfassets.net/ubv4j9m3121x/14ETIRLSj8P9xjXbklI11M/65742c0059ac1c3538d4f6ddaf15f0d9/figma-how-to-use-mindmap.png?w=1200&h=630&q=50&fm=png)
FigJamのマインドマップの基本的な使い方
2023.12.15
![figma-figjam-generative-ai](https://images.ctfassets.net/ubv4j9m3121x/4V45bBRf1tSSpQfY8mTDsw/0d3f83fda12f82bed45ea198c9526b71/figma-figjam-generative-ai.png?w=1200&h=630&q=50&fm=png)
FigmaとFigJamの生成AIに関する機能まとめ
2023.12.08
![figma-google-meet-addon](https://images.ctfassets.net/ubv4j9m3121x/5bjK5Xpz1zcBMmOntD87Pm/779637fce63cbbe31c9b3ffed4496793/figma-google-meet-addon.png?w=1200&h=630&q=50&fm=png)
Google Meetの参加者でFigJamを共同編集する方法
2023.12.02
![figma-little-big-updates-2023-11](https://images.ctfassets.net/ubv4j9m3121x/3S03Rw7dglXsZizbTHy3KV/29f644ac1d04be16e3c3aece670acd4e/figma-little-big-updates-2023-11.png?w=1200&h=630&q=50&fm=png)
Figmaの「Little Big Updates」で公開された機能(2023年11月分)
2023.11.24
![figma-color-wheel-palette-generator-plugin](https://images.ctfassets.net/ubv4j9m3121x/5JCNoZ6iRGNDGgJm9yFGeP/69b5516e8d4f46789bba12e0b73ce444/figma-color-wheel-palette-generator-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで補色やグラデーションを自動補完で作成できるカラーパレットの使い方
2023.11.17
![figma-how-to-use-figjam-ai](https://images.ctfassets.net/ubv4j9m3121x/5KtyBPHVjVZnXjmWIn9Ska/3d9032e64ee731aa47e048d1d29d7a3d/figma-how-to-use-figjam-ai.png?w=1200&h=630&q=50&fm=png)
FigJam AIの基本的な使い方
2023.11.10
![figma-figjam-text-list-style](https://images.ctfassets.net/ubv4j9m3121x/53o3tWY5VviXEzFaF6Tza9/4989dc796227581ffb3d17ac8fdc05be/figma-figjam-text-list-style.png?w=1200&h=630&q=50&fm=png)
Figmaのテキストを階層のある箇条書きリストにする方法
2023.11.03
![figma-how-to-use-canvas-stacking](https://images.ctfassets.net/ubv4j9m3121x/1WZ7papXMsXi5GdCiGfKNQ/b2d702cf47f56c2f743df68ee621ca33/figma-how-to-use-canvas-stacking.png?w=1200&h=630&q=50&fm=png)
Figmaでオートレイアウト上の要素の重なり順を逆転する方法
2023.10.27
![figma-little-big-updates-2023-10](https://images.ctfassets.net/ubv4j9m3121x/cS7TNFmwpG8qru7X10v9H/577f7713ee30da6028b948cc5935204c/figma-little-big-updates-2023-10.png?w=1200&h=630&q=50&fm=png)
Figmaの「Little Big Updates」で公開された機能(2023年10月分)
2023.10.20
![figma-how-to-use-absolute-potision](https://images.ctfassets.net/ubv4j9m3121x/23X8zHRn2ynr1IJiuxDhBA/a26ae883ba5081181a2ce12fa131a4db/figma-how-to-use-absolute-potision.png?w=1200&h=630&q=50&fm=png)
Figmaでオートレイアウトを無視して要素を自由に配置する方法
2023.10.13
![figma-little-big-updates-2023-09](https://images.ctfassets.net/ubv4j9m3121x/1P0zwin5HDnQHcsWbxmZwZ/b6bd9c6f035ae6f75cc40ee3928e6bcc/figma-little-big-updates-2023-09.png?w=1200&h=630&q=50&fm=png)
Figmaの「Little Big Updates」で公開された機能(2023年9月分)
2023.10.06
![figma-how-to-use-alignment](https://images.ctfassets.net/ubv4j9m3121x/7lCRZ8XrpnJRVvhGxrWlqB/fdb6fe70e53c76445f9538ab90a9f9ee/figma-how-to-use-alignment.png?w=1200&h=630&q=50&fm=png)
Figmaでオブジェクトを整列・均等配置する方法
2023.09.29
![figjam-how-to-use-jambot](https://images.ctfassets.net/ubv4j9m3121x/2aVe9QX1bAUFeSu9D8jw9a/371409cf2066d0ccde61bd2398530883/figjam-how-to-use-jambot.png?w=1200&h=630&q=50&fm=png)
FigJamでのブレストをAIで支援する「Jambot」の使い方
2023.09.22
![figma-layout-design-tips](https://images.ctfassets.net/ubv4j9m3121x/43z3W7vRwUyfR36GVl9Jqm/b4b8523f686044bf604272bf3875ab96/figma-layout-design-tips.png?w=1200&h=630&q=50&fm=png)
Figmaの画面レイアウトや配置に関する機能のまとめ
2023.09.15
![figma-mindmap-widget](https://images.ctfassets.net/ubv4j9m3121x/fHw6XawUPeXxBMmitNa5L/cf5dff333b90ad4b4f50a42962fa942e/figma-mindmap-widget.png?w=1200&h=630&q=50&fm=png)
Figma・FigJamで使える「Mindmap(Beta)」ウィジェットの紹介
2023.09.08
![figma-how-to-setting-prototype-with-mockup](https://images.ctfassets.net/ubv4j9m3121x/5zYVEuBUqIXiYjFxv3Q34I/a634b2a41ccaab791d2f838c701219da/figma-how-to-setting-prototype-with-mockup.png?w=1200&h=630&q=50&fm=png)
Figmaでモックアップ付きのプロトタイプを作成する方法
2023.09.01
![figma-studio-plugin](https://images.ctfassets.net/ubv4j9m3121x/3LbQeBP5REumIMauBVwebn/3698ceebe0df379dd55b79d50b8aabf8/figma-studio-plugin.png?w=1200&h=630&q=50&fm=png)
FigmaのデザインデータからSTUDIOのサイトを作成する方法
2023.08.25
![figma-components-tips](https://images.ctfassets.net/ubv4j9m3121x/27mtGPNVz4muIaM5MJjaLZ/c1b70d27a1e808f4676cccaab93c2da3/figma-components-tips.png?w=1200&h=630&q=50&fm=png)
Figmaのコンポーネント機能の使い方まとめ
2023.08.18
![figma-ai-image-generator-plugin](https://images.ctfassets.net/ubv4j9m3121x/4jx0dgjJWPR3Uu2JoyWHHK/1ff92557d67d7fc91a74d9dc4c557223/figma-ai-image-generator-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでテキストから画像生成できるプラグイン「AI image generator」
2023.08.11
![figma-how-to-setting-scroll](https://images.ctfassets.net/ubv4j9m3121x/7ihoGXh5toNxcrD5MrwO9J/8cf801f7c6c29cfebc7e377086c4c847/figma-how-to-setting-scroll.png?w=1200&h=630&q=50&fm=png)
Figmaのプロトタイプのスクロール制御に関する設定
2023.08.04
![figma-useful-text-tips](https://images.ctfassets.net/ubv4j9m3121x/1zEHxcsVaZvOp8BragBd5t/3af0468d81eae9dfbbb39bc98ffd1a97/figma-useful-text-tips.png?w=1200&h=630&q=50&fm=png)
Figmaでテキストを使った便利なテクニック集
2023.07.28
![figma-pull-down-button-prototype](https://images.ctfassets.net/ubv4j9m3121x/17JWkgqY4qWHfiYxP6XtyT/f3b822b9e42c1ba478ae829523c8b1f5/figma-pull-down-button-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでクリックするとメニューが開くプルダウンボタン
2023.07.21
![figma-turncate-text](https://images.ctfassets.net/ubv4j9m3121x/74myaQ0mbbMHmPm6wJzaYn/bf5b6cdac21b28641a47031fa1810192/figma-turncate-text.png?w=1200&h=630&q=50&fm=png)
Figmaでテキストを行数で自動的に省略表示(…)する方法
2023.07.14
![figma-auto-layout-wrap](https://images.ctfassets.net/ubv4j9m3121x/1JepWVan7udAsfPsmWAd3U/2c834905ec61238e048258c46f42c3b7/figma-auto-layout-wrap.png?w=1200&h=630&q=50&fm=png)
Figmaのオートレイアウトで折り返しできる「Wrap」の使い方
2023.07.07
![product-designer-1on1-trial-report-202305](https://images.ctfassets.net/ubv4j9m3121x/7HEg3SBmm45DjAFOLGaeIJ/5f03b15938615bec2a74acf5c2cc1ee2/product-designer-1on1-trial-report-202305.png?w=1200&h=630&q=50&fm=png)
駆け出しプロダクトデザイナー向けなんでも相談会の振り返り(2023年5~7月)
2023.06.30
![figma-config-2023-updates](https://images.ctfassets.net/ubv4j9m3121x/1pslens5vx6tlhTZqyuqVi/4f859880bbda7b3d1348ec4075b6cee0/figma-config-2023-updates.png?w=1200&h=630&q=50&fm=png)
Config 2023で発表されたFigmaの新機能まとめ
2023.06.23
![how-to-use-microsoft-designer](https://images.ctfassets.net/ubv4j9m3121x/71yUW8Pp58kyUh0oRUYX7j/90650c02397cf3e5e4d01bfd0c9904d7/how-to-use-microsoft-designer.png?w=1200&h=630&q=50&fm=png)
Microsoft Designerの基本的な使い方
2023.06.16
![figma-resource-ios17-and-ipados17](https://images.ctfassets.net/ubv4j9m3121x/4P57Op6zTjX77vZLO2cbBO/1174ac0636034c4750358c0a0c91ab51/figma-resource-ios17-and-ipados17.png?w=1200&h=630&q=50&fm=png)
FigmaでiOS 17・iPadOS 17のUIキットを利用する方法
2023.06.09
![figma-header-sticky-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/5EOD1wmBR6r3q5MkgKhPzK/d355574cb5e20f6a60560ff6aae4f208/figma-header-fixed-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaでヘッダーを画面上部に固定して追従させる(プロトタイプ)
2023.06.02
![how-to-convert-figma-animations-to-lottie-files-by-plugin](https://images.ctfassets.net/ubv4j9m3121x/7mZmpv8USfYSA5tbA2WaEx/f8e6f5558cdccb10ddc54eb00ac5d19a/how-to-convert-figma-animations-to-lottie-files-by-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで作成したアニメーションをLottieFilesに書き出す方法
2023.05.26
![figma-figjam-simple-graph-plugin](https://images.ctfassets.net/ubv4j9m3121x/6Oyrm0rMZ7la94Sq5eIVib/903eb0438794ba8a97df38f977be5def/figma-figjam-simple-graph-plugin.png?w=1200&h=630&q=50&fm=png)
Figma・FigJamでシンプルなグラフを生成するプラグイン集
2023.05.19
![figma-simple-radar-chart-plugin](https://images.ctfassets.net/ubv4j9m3121x/7CCTa6vdHnZYOtdukLKo7/7556a970a777fe165e3920afa9035e11/figma-simple-radar-chart-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルな多角形グラフ(レーダーチャート)を作成する方法
2023.05.12
![product-designer-1on1-trial](https://images.ctfassets.net/ubv4j9m3121x/3TifXp1qa5eVcynDM4TLyJ/a3149b3f0743326752fa478c5766bf05/product-designer-1on1-trial.png?w=1200&h=630&q=50&fm=png)
【募集終了】駆け出しプロダクトデザイナー向け「なんでも相談会」のおしらせ
2023.05.05
![ai-chatbot-builder-chatbase](https://images.ctfassets.net/ubv4j9m3121x/5Qsyrw24Mfz3s5aHUeEfF0/d8121c95354771ea9fdee74ec70506d2/ai-chatbot-builder-chatbase.png?w=1200&h=630&q=50&fm=png)
ウェブサイトへ簡単に組み込めるAIチャットボット「Chatbase.co」の使い方
2023.04.28
![figma-simple-line-chart-plugin](https://images.ctfassets.net/ubv4j9m3121x/wwaAJabHCprSljYCRWTHT/182fda1c5bab56692cb054f5fd28cd7e/figma-simple-line-chart-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルな線グラフを生成するプラグインの紹介
2023.04.21
![figma-interactive-components](https://images.ctfassets.net/ubv4j9m3121x/325n1JRAO3aqcUCBp0m7R8/82d2b6a6ea329da5f68cf7365f8c7456/figma-interactive-components.png?w=1200&h=630&q=50&fm=png)
Figmaで作れるインタラクション付きコンポーネント集
2023.04.14
![figma-simple-bar-chart-plugin](https://images.ctfassets.net/ubv4j9m3121x/2VcfEImqZuwSmOHLLCzsFl/9389934fc64ce10316d8b1d47e826a95/figma-simple-bar-chart-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルな棒グラフを生成するプラグインの紹介
2023.04.07
![figma-little-big-updates-2023-03](https://images.ctfassets.net/ubv4j9m3121x/70spoTR9CLNSO7rdr0ThBp/25422a132cdea0babfb2915f7369fb2a/figma-little-big-updates-2023-03.png?w=1200&h=630&q=50&fm=png)
Figmaの「Little Big Updates」で公開された32の機能(2023年3月)
2023.03.31
![figjam-how-to-edit-table-and-csv](https://images.ctfassets.net/ubv4j9m3121x/1gQm9iRDrYcdJkwsZdSIAs/e3c0e84bb148577e2883b951fef8fa7f/figjam-how-to-edit-table-and-csv.png?w=1200&h=630&q=50&fm=png)
FigJamで表形式のテーブル(CSV)を追加・編集する方法
2023.03.24
![figma-integration-tips](https://images.ctfassets.net/ubv4j9m3121x/2hTdskAuhts2UN4fbI63xr/be66a42da2fd32eff65711229690939b/figma-integration-tips.png?w=1200&h=630&q=50&fm=png)
Figmaとの連携で便利な外部ツールの使い方
2023.03.17
![small-start-design-system](https://images.ctfassets.net/ubv4j9m3121x/2vwmZHS75E9SZ5ajRzzyDp/9da46c685273044ec423395726ed650e/small-start-design-system.png?w=1200&h=630&q=50&fm=png)
「ちいさくはじめるデザインシステム」の執筆に共著で参加しました
2023.03.10
![figma-simple-pi-chart-plugin](https://images.ctfassets.net/ubv4j9m3121x/6OGI03uhxAKLTRhERZSMQe/32b2a5df649edee2ef9b5f8112130e14/figma-simple-pi-chart-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルな円グラフを生成するプラグインの紹介
2023.03.03
![figma-how-to-insert-icons-into-text](https://images.ctfassets.net/ubv4j9m3121x/5aJyLm1YNPUGxJueopvA4F/2afa7e3312e35c455733e63719357f5d/figma-how-to-insert-icons-into-text.png?w=1200&h=630&q=50&fm=png)
Figmaでテキスト内にアイコンを挿入する方法
2023.02.24
![figma-how-to-use-auto-layout](https://images.ctfassets.net/ubv4j9m3121x/N27WoAph2e6hLgn5rnxH4/b1736c479d11ef318de6b75e7596c642/figma-how-to-use-auto-layout.png?w=1200&h=630&q=50&fm=png)
Figmaのオートレイアウトの基本的な使い方
2023.02.17
![figma-noisy-gradients-plugin](https://images.ctfassets.net/ubv4j9m3121x/5PRWhZuBwLF0LhfRuasNpo/b2c173121c70565b161500fdda0eaf4d/figma-noisy-gradients-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単にメッシュ・グラデーションをランダム生成する方法
2023.02.10
![notion-import-content-iframe](https://images.ctfassets.net/ubv4j9m3121x/1z2kKuFsqnceWYj8hPJsXp/5217f50a11c83190519aba968f6c0740/notion-how-to-automatically-generate-recurring-notes.png?w=1200&h=630&q=50&fm=png)
Notionのページにiframeを埋め込み表示する方法
2023.02.03
![figma-delete-component-and-variants](https://images.ctfassets.net/ubv4j9m3121x/6jHLL1t6heV874pNA2OKws/10eb4a97ce852a3283fd860f520325ca/figma-delete-component-and-variants.png?w=1200&h=630&q=50&fm=png)
Figmaのコンポーネント化を解除・削除する方法
2023.01.27
![figma-icons8-background-remover-plugin](https://images.ctfassets.net/ubv4j9m3121x/2cNHvxQJ4UdLbIoWiFecqD/43be25ac5c79dd31657da531cc291650/figma-icon8-background-remover-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで複数の画像素材から一括で背景を透過する方法
2023.01.20
![figma-insert-big-image-plugin](https://images.ctfassets.net/ubv4j9m3121x/23wjvaC56Nm9fXPSr56fPG/fa081c8e18f6f0dc499d6b2c4a08e734/figma-insert-big-image-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで幅が4096pxより大きい画像を高解像度で取り込む方法
2023.01.13
![notion-figma-figjam-integration](https://images.ctfassets.net/ubv4j9m3121x/6NQzI4amYST01AifOoY6Ft/c74bfc5173ebb8fc76e36c1d23055746/notion-figma-figjam-integration.png?w=1200&h=630&q=50&fm=png)
NotionでFigma/FigJamを連携する方法
2023.01.06
![popular-articles-2022](https://images.ctfassets.net/ubv4j9m3121x/1Tsjvrgmpzgag4YU7QVy2k/524578880c839dcfe1b26c27644c4b80/popular-articles-2022.png?w=1200&h=630&q=50&fm=png)
2022年に最も人気だった記事ベスト10
2022.12.30
![mac-ios-freeform-freeboard-app](https://images.ctfassets.net/ubv4j9m3121x/l3Zozgnjhb88j3eyDW3P8/a7635ddafb30e96a55b6c07f010abc7f/mac-ios-freeform-freeboard-app.png?w=1200&h=630&q=50&fm=png)
家族やグループで掲示板のように情報共有できるアプリ「フリーボード」の使い方
2022.12.23
![figma-google-calender-addon](https://images.ctfassets.net/ubv4j9m3121x/3T3b9pAKXL3J7llXnK29IC/8e1c4fc723994c3d715f77119937f720/figma-google-calender-addon.png?w=1200&h=630&q=50&fm=png)
GoogleカレンダーのイベントにFigma/FigJamのリンクを同期する方法
2022.12.16
![figma-notioin-efficiency-of-meeting-minutes](https://images.ctfassets.net/ubv4j9m3121x/5wbjVthVGh09cxxrPwu8Cv/90e950eb1ab49effdc593f545958a98d/figma-notioin-efficiency-of-meeting-minutes.png?w=1200&h=630&q=50&fm=png)
FigmaとNotionで会議をなめらかに進行するための議事録Tips
2022.12.09
![figma-how-to-emmbed-preview-at-external-site](https://images.ctfassets.net/ubv4j9m3121x/4Ab3gGytyxks0d2LIZgONM/b256b7f22e7b4550167e300c16f08afc/figma-how-to-emmbed-preview-at-external-site.png?w=1200&h=630&q=50&fm=png)
Figmaのデザインデータを外部ツール上でプレビューする方法
2022.12.02
![notion-how-to-automatically-generate-recurring-notes](https://images.ctfassets.net/ubv4j9m3121x/2ZKntM4sZTbX8jVKHdOboy/728757bd6b4140c865c6d81441251244/notion-how-to-automatically-generate-recurring-notes.png?w=1200&h=630&q=50&fm=png)
Notionで定期的なTodoや議事録を繰り返し自動生成する方法
2022.11.25
![summary-of-schema-by-figma-2022](https://images.ctfassets.net/ubv4j9m3121x/6KjCFgH4hXMu4puY7ZY23r/97856e2e0e3f9ed1d6599cc45f26654b/summary-of-schema-by-figma-2022.png?w=1200&h=630&q=50&fm=png)
Schema2022で公開した登壇資料のまとめ
2022.11.18
SmartHRのプロダクトデザインの生産性を高める“デザイン”のためじゃないデザインシステムとは(Schema2022)
2022.11.15
![figma-how-to-create-objective-model](https://images.ctfassets.net/ubv4j9m3121x/6OZn4PjsG3gCMwD9XsQIJK/a9b518076bbaa31995d668e84efaab80/figma-how-to-create-objective-model.png?w=1200&h=630&q=50&fm=png)
Figmaで効率的にオブジェクトモデルを設計する方法
2022.11.11
![report-of-schema-by-figma-2022](https://images.ctfassets.net/ubv4j9m3121x/2onSY2wFbrqfo1iQjuu72l/c52412d1f18f9b583d04bbf7b0dbd979/report-of-schema-by-figma-2022.png?w=1200&h=630&q=50&fm=png)
Schema by Figma 2022の登壇の振り返り
2022.11.04
![figma-pitchdeck-presentation-studio-plugin](https://images.ctfassets.net/ubv4j9m3121x/7bGeUIBzXbQkHSsrS2iCrb/39429b5c997ff6d3cc7cc7e99bc2a741/figma-pitchdeck-presentation-studio-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで作成したスライドをkeynoteやpowerpoint形式で出力する方法
2022.10.28
![figma-simple-components-series-202210](https://images.ctfassets.net/ubv4j9m3121x/534rffYcSCf1RwXoskFrKW/d811a322ab22fd0550f043228f87f0b6/figma-simple-components-series-202210.png?w=1200&h=630&q=50&fm=png)
シンプルなコンポーネントシリーズの人気ランキング
2022.10.22
![Schema by Figma 2022](https://images.ctfassets.net/ubv4j9m3121x/49Yvl7AlXmzxoLJpxmCzM9/e664b7e68419be38e2912d050ef61c50/Schema_by_Figma_2022.png?w=1200&h=630&q=50&fm=png)
Schema by Figma 2022で登壇します
2022.10.14
![figma-text-find-and-replace-in-file](https://images.ctfassets.net/ubv4j9m3121x/16JfEFVD9PqBCD8kw8D0Wm/f38b43619ad2234e288cc080f2c95318/figma-text-find-and-replace-in-file.png?w=1200&h=630&q=50&fm=png)
Figmaでファイル内のテキストを検索・一括置換する方法
2022.10.07
![figma-plugin-text2image](https://images.ctfassets.net/ubv4j9m3121x/7LrlFsiWqgzwhDQANyJlfv/32b5aa18511621ac72773054c2e78c93/figma-plugin-text2image.png?w=1200&h=630&q=50&fm=png)
Figmaで使える画像生成AIプラグイン「Text2Image」
2022.09.30
![figma-nested-instance-property-setting](https://images.ctfassets.net/ubv4j9m3121x/3NBR5g0DgrzxoiwUOpNc45/fcdb8d0c92081a4577e92942dedda543/figma-nested-instance-property-setting.png?w=1200&h=630&q=50&fm=png)
Figmaでコンポーネントに内包されたインスタンスのプロパティを効率的に変更する方法
2022.09.23
![figma-useful-settings](https://images.ctfassets.net/ubv4j9m3121x/3WqJWq2IAGnTnWk2T0D1S8/6b818dcfc6d603385e0d20445fa84b0f/figma-useful-settings.png?w=1200&h=630&q=50&fm=png)
Figmaの使いやすさを向上する設定のヒント
2022.09.16
![figma-how-to-save-local-file](https://images.ctfassets.net/ubv4j9m3121x/16z7Uq6hhMaELHbAW10jdX/7c421d732c1da125fe0c2876bf39d05d/figma-how-to-save-local-file.png?w=1200&h=630&q=50&fm=png)
Figma・FigJamのファイルをローカルに保存する方法
2022.09.09
![figma-table-cell-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/51DedOPKQyEZ6nBeUY0irO/d8dc50a6b628bff64df3c5c391450bb6/figma-table-cell-animation-prototype.png?w=1200&h=630&q=50&fm=png)
マウスオーバー・クリックすると罫線スタイルが変わるテーブル(プロトタイプ)
2022.09.03
SmartHRのプロダクトデザイングループのFigmaの運用を大公開!第1弾:デザインデータに対する考え方
2022.09.01
![figjam-make-works-fun-tips](https://images.ctfassets.net/ubv4j9m3121x/196XmMLBZDbKIW7LyWWzZT/a5a0ec8103f70ba3846714685e280bce/figma-figjam-collaboration-tips.png?w=1200&h=630&q=50&fm=png)
FigJamでの議論を盛り上げるためのTips
2022.08.27
![figjam-stamp-sticker-emoji](https://images.ctfassets.net/ubv4j9m3121x/4Cw682XV24L8VISeZa8FBK/3e93e0e6983bd00cef3e2ab0e3006e62/figjam-stamp-sticker-emoji.png?w=1200&h=630&q=50&fm=png)
FigJamで絵文字やスタンプを使う方法
2022.08.19
![figjam-how-to-use-washi-tape-tool](https://images.ctfassets.net/ubv4j9m3121x/7CjBToq6HytC9oKcCr2wVF/294db25fecd74bd5d2b47e512ab9cb9f/figjam-how-to-use-washi-tape-tool.png?w=1200&h=630&q=50&fm=png)
FigJamでマスキングテープツールを使う方法
2022.08.12
![figma-figjam-how-to-setting-language-japanese](https://images.ctfassets.net/ubv4j9m3121x/74rlcRDDCZNM8BJiOn3WBe/6bddbe521e4cb3a0738de5d88f6d71f3/figma-figjam-how-to-setting-language-japanese.png?w=1200&h=630&q=50&fm=png)
FigmaとFigJamを日本語に言語設定する方法
2022.08.05
![figma-how-to-design-ui-components](https://images.ctfassets.net/ubv4j9m3121x/7njRVnBDtfgWjvv0sxSnKh/7859f5e2a654d6ddd869000d0166ebf9/figma-how-to-design-ui-components.png?w=1200&h=630&q=50&fm=png)
Figmaで汎用的なUIコンポーネントを作る方法
2022.07.29
![figJam-how-to-export](https://images.ctfassets.net/ubv4j9m3121x/3MhgvmbhWo33VjDu2pgQUR/60e2bf71159cab57b2c5f6004f68bcf9/figJam-how-to-export.png?w=1200&h=630&q=50&fm=png)
FigJamの付箋やフローチャートをまとめて書き出す方法
2022.07.22
![figma-figjam-collaboration-tips](https://images.ctfassets.net/ubv4j9m3121x/1NuWgpalmKqZLjrfY2ndYM/1797a4bd493c7f3d4ef64ba2f5e0f47f/figma-figjam-collaboration-tips.png?w=1200&h=630&q=50&fm=png)
Figmaを使って複数人で円滑にコラボするためのTips
2022.07.15
![figma-set-small-and-big-nudge-values](https://images.ctfassets.net/ubv4j9m3121x/68XotNqjjJSjOMtv0lR2b0/a465264c9bfb44d26dc3bceab8889df5/figma-set-small-and-big-nudge-values.png?w=1200&h=630&q=50&fm=png)
FigmaのPaddingやカーソル移動のデフォルト値を設定する方法
2022.07.08
![figma-how-to-use-widget](https://images.ctfassets.net/ubv4j9m3121x/NB0MzcDlebfskpZDaUbC9/bc40e92b05c7bdcc7ad3ce517b1b7f9d/figma-how-to-use-widget.png?w=1200&h=630&q=50&fm=png)
FigmaやFigJamで使えるウィジェット機能の使い方
2022.07.01
![figma-how-to-set-as-thumbnail](https://images.ctfassets.net/ubv4j9m3121x/gVOClBWxzXASnNCoU2EuG/fff0c38f244eeed3598290749f96a176/figma-how-to-set-as-thumbnail.png?w=1200&h=630&q=50&fm=png)
Figmaのファイルのサムネイルを設定・解除する方法
2022.06.24
![figma-how-to-save-local-file](https://images.ctfassets.net/ubv4j9m3121x/1Bm4Zxp6NnfHZVwkpBYulh/7704331d1999ae339c20896a149c0010/figma-how-to-save-local-file.png?w=1200&h=630&q=50&fm=png)
Figmaファイルをローカルに書き出し・保存する方法
2022.06.17
![figma-how-to-use-flip-horizontal-and-vertical](https://images.ctfassets.net/ubv4j9m3121x/3T7r2JDdORBMcSmP1hh9to/3068fd473929875f4d7edded047ed5c7/figma-how-to-use-flip-horizontal-and-vertical.png?w=1200&h=630&q=50&fm=png)
Figmaでオブジェクトを上下左右に反転する方法
2022.06.10
![figma-how-to-use-local-fonts](https://images.ctfassets.net/ubv4j9m3121x/487grVGGHCpu74zn513wwV/b216645dc34c221dff4df07332c6150f/figma-how-to-use-local-fonts.png?w=1200&h=630&q=50&fm=png)
FigmaでWindows・Macのローカルフォントを使う方法
2022.06.03
![figma-partially-apply-border](https://images.ctfassets.net/ubv4j9m3121x/MalcF1RE84Dlu8MmN2LWt/947429defa4f484eafb948551e150808/figma-partially-apply-border.png?w=1200&h=630&q=50&fm=png)
Figmaで枠線(Stroke) を部分的に適用する方法
2022.05.27
![figma-component-properties-vs-variants](https://images.ctfassets.net/ubv4j9m3121x/6JjTMgt9bKnq6xRYOmePLT/c4e796d41b55a5d75a7aa8fb305a2b78/figma-component-property-vs-variants.png?w=1200&h=630&q=50&fm=png)
FigmaのComponent propertiesとVariantsの使い分けの考察
2022.05.20
![figma-config-2022](https://images.ctfassets.net/ubv4j9m3121x/6CyDotJmnUAimPiRF4QX8a/52b4a706e7fa1102c090a8ad88978938/Notification_Center.png?w=1200&h=630&q=50&fm=png)
FigmaのTokyo Config Watch Party2022の参加レポート
2022.05.13
![figma-how-to-use-scale](https://images.ctfassets.net/ubv4j9m3121x/5xPsEYQWDOk8BvZNPpWP0S/85112569e89877e869c1419209619408/figma-how-to-use-scale.png?w=1200&h=630&q=50&fm=png)
Figmaでテキストごとオブジェクトを拡大・縮小する方法
2022.05.06
![figma-how-to-use-color-styles](https://images.ctfassets.net/ubv4j9m3121x/6iyPUofczmdyGGivvtKYQe/1590ddbe12970810afc8432e68ae2ca4/figma-how-to-use-color-styles.png?w=1200&h=630&q=50&fm=png)
FigmaでColor Stylesをカスタマイズする方法
2022.04.29
![figma-clean-docment-plugin](https://images.ctfassets.net/ubv4j9m3121x/1njjVsLQbNEV9WCSJMbfHm/695fcf656815fbc1e250c6a700cdad07/figma-clean-docment-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでレイヤーやグループを自動整理できる「Clean Document」の使い方
2022.04.22
![figma-toggle-switch-with-slide-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/2bXZYxsQNq24uD7b5i9sk8/48f490c4a6048d80efeeb4d385b6e52d/figma-toggle-switch-with-slide-animation-prototype.png?w=1200&h=630&q=50&fm=png)
スライドするアニメーション付きのスイッチ(プロトタイプ)
2022.04.15
![figjam-how-to-use-section](https://images.ctfassets.net/ubv4j9m3121x/2YTM4rkkOOghebD4T6d9LY/b49f87b5190d8a6e10aff39907de9805/figjam-create-section.png?w=1200&h=630&q=50&fm=png)
FigJamで付箋やオブジェクトをまとめる「Section」の使い方
2022.04.08
![figma-notification-in-slack-channel](https://images.ctfassets.net/ubv4j9m3121x/2Pylbg3UAmWL6Fw8yjCv5r/ecfced49ae2002c076bfca74f10383c2/figma-notification-in-slack-channel.png?w=1200&h=630&q=50&fm=png)
Slackの特定チャンネルにFigmaのコメントを通知する方法
2022.04.01
![figma-how-to-create-tooltip](https://images.ctfassets.net/ubv4j9m3121x/2MfJHBEivE5Vq7RiqbDi8L/18ec016ac3143a265116e4a42d062495/figma-how-to-create-tooltip.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなツー ルチップ・コンポーネントを作る方法
2022.03.25
![figma-funny-images-tips](https://images.ctfassets.net/ubv4j9m3121x/5M9gD2qJUvrOMRtIGnqrqd/ab522e06b2349e40aa517935b10788f2/figma-funny-images-tips.png?w=1200&h=630&q=50&fm=png)
Figmaでネタ画像を作るためのTips
2022.03.18
![figma-button-with-fill-animation-prototype](https://images.ctfassets.net/ubv4j9m3121x/5bM3Xobkx0BkEsS5RrXTVp/5af1f850fd1208ee316d635e8321b7fc/figma-button-with-fill-animation-prototype.png?w=1200&h=630&q=50&fm=png)
Figmaで塗りが円形に広がるアニメーションのボタン(プロトタイプ)
2022.03.11
![figma-how-to-create-side-menu](https://images.ctfassets.net/ubv4j9m3121x/3DSvo1Pj7ldaFpGloiZ0cj/c5d7358dd8f047969882e850df1a855a/figma-how-to-create-side-menu.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなサイドメニュー・コンポーネントを作る方法
2022.03.04
![figma-outline-to-single-stroke-plugin](https://images.ctfassets.net/ubv4j9m3121x/26F3hh5Yn8uns6Bjy5WN90/9258a91096c04ca1111eb4bd46886e64/figma-outline-to-single-stroke-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでアウトラインをパスに変換・復元する方法
2022.02.25
![figma-how-to-use-comment](https://images.ctfassets.net/ubv4j9m3121x/2LIe7Rjx3eXg5HEzntlStw/2dd5086ef1e90def3024a39e03322e8c/figma-how-to-use-comment.png?w=1200&h=630&q=50&fm=png)
Figmaのコメント機能の使い方
2022.02.18
![figma-path-and-curve-tips](https://images.ctfassets.net/ubv4j9m3121x/2PJENnRbUCKHWQH1FYnN8U/3db5060a7375ccd93e57d64c5cce54f1/figma-path-and-curve-tips.png?w=1200&h=630&q=50&fm=png)
Figmaでおすすめの直線・曲線パスを使ったTipsまとめ
2022.02.11
![figma-how-to-create-radio-button](https://images.ctfassets.net/ubv4j9m3121x/31nOUn6ZSA7N5xdZkW81xN/944b80d8c9f4157e9480fb3d0a497476/figma-how-to-create-radio-button.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなラジオボタン・コンポーネントを作る方法
2022.02.04
![figjam-beginners-tips](https://images.ctfassets.net/ubv4j9m3121x/4Ph3gEHHyX4KvgavGgIptL/74a188dc1bde1a1440bef42860dcf946/figjam-beginners-tips.png?w=1200&h=630&q=50&fm=png)
FigJamの初心者におすすめのTipsまとめ
2022.01.28
![figma-how-to-create-checkbox](https://images.ctfassets.net/ubv4j9m3121x/5WAylG8s1omEtQs83iJASD/25082df9026e60922d84ec17ccfcc2d7/figma-how-to-create-checkbox.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなチェックボックス・コンポーネントを作る方法
2022.01.21
![figma-ruler-and-grid-view-tips](https://images.ctfassets.net/ubv4j9m3121x/6XCkr0Wcm8K4PSlPQ0bIsa/0e497c227e947dce68bf01e66cbb328b/figma-ruler-and-grid-view-tips.png?w=1200&h=630&q=50&fm=png)
Figmaでグリッドやガイド(ルーラー)を表示・非表示する方法
2022.01.14
![figma-font-viewer-plugin](https://images.ctfassets.net/ubv4j9m3121x/4o5zIIInSENTjCK8aXHsa4/2f4bd1500f2db0caa7ac2b951430f1b8/figma-font-viewer-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでフォントのプレビューを表示する方法
2022.01.07
![2021-top-10-articles](https://images.ctfassets.net/ubv4j9m3121x/5WlCctPN2ht01WbNHH0yLB/a75ba95908222caa4b8ea1a30861ec0d/popular-articles-2021.png?w=1200&h=630&q=50&fm=png)
2021年に最も人気だった記事ベスト10
2021.12.31
![figjam-create-sticky-from-text-plugin](https://images.ctfassets.net/ubv4j9m3121x/3UHc45gWiijPb0oc2xTifT/7fbe393347d48a1d964a5a800ec4a9e5/figjam-create-sticky-from-text-plugin.png?w=1200&h=630&q=50&fm=png)
FigJamで箇条書きのテキストから複数の付箋に書き出す方法
2021.12.24
![figma-how-to-use-component](https://images.ctfassets.net/ubv4j9m3121x/2yKGXnTfkrSigj1SdaS1dT/cfaedb149eeafd59ac153ce5e80a92cb/figma-how-to-use-component.png?w=1200&h=630&q=50&fm=png)
Figmaのコンポーネント機能の基本的な使い方
2021.12.17
![figma-plugins-for-image-processing](https://images.ctfassets.net/ubv4j9m3121x/46SHNLgqYIv8yuFlJt8Q6V/86657e9dba558889d1a77938e43b7d62/figma-plugins-for-image-processing.png?w=1200&h=630&q=50&fm=png)
Figmaでおすすめの写真・画像加工のTipsまとめ
2021.12.10
![figjam-confetti-plugin](https://images.ctfassets.net/ubv4j9m3121x/6ONL7p5NpckcdqsVzq2w6w/d3ba4f7e9db8f56ff2fa7e68252d2d30/figjam-confetti-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで紙吹雪(パーティクル)を均等に散らす方法
2021.12.03
![figma-how-to-export-webp](https://images.ctfassets.net/ubv4j9m3121x/EvQCLG3fagqYI3h7XbNLn/834753c24001b341f09fcdc5ce02201e/figma-how-to-export-webp.png?w=1200&h=630&q=50&fm=png)
Figmaで画像を圧縮したりwebp形式で保存する方法
2021.11.26
![figma-how-to-create-form](https://images.ctfassets.net/ubv4j9m3121x/1HrmvRUBlEEviknjtRnT0v/ae8035e2a7d9e1186c5ff3e6af4f09f6/figma-how-to-create-form.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなフォーム・コンポーネントを作る方法
2021.11.19
![figma-brandfetch-plugin](https://images.ctfassets.net/ubv4j9m3121x/6FUXgpsU43PzAHniSDbTo4/8beedaa334f79c439c6789b3a9af25ca/figma-brandfetch-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで企業ロゴなどのブランド・アセットを検索できる「Brandfetch」の使い方
2021.11.12
![figma-filter-plugin](https://images.ctfassets.net/ubv4j9m3121x/qX2t7QhswpN6aA2ntENoo/b348f701c243ec7170634016019e87c4/figma-filter-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaのプラグイン「Filter」でPhotoshopのようなエフェクトを使う方法
2021.11.05
![figma-how-to-create-header](https://images.ctfassets.net/ubv4j9m3121x/28MQZsVcxlJxyTpi3gr3zU/040a10cadf35982a9cd9464d596a63eb/figma-how-to-create-header.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなヘッダー・コンポーネントを作る方法
2021.10.29
![figjam-widgets-collection](https://images.ctfassets.net/ubv4j9m3121x/6kJI8VCm51AXDqsPzk1LvS/73b73522d8bf1cf5709b8e920f0aac7b/figjam-widget-collection.png?w=1200&h=630&q=50&fm=png)
FigJamの作業が捗る便利なウィジェットの使い方
2021.10.22
![figma-how-to-create-tab](https://images.ctfassets.net/ubv4j9m3121x/7L0Edq4xwyRzr4Y6yHb94w/1796ca444fbc6a36e6c900e2793afaaa/figma-how-to-create-tab.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなタブ・コンポーネントを作る方法
2021.10.15
![figma-pixels-plugin](https://images.ctfassets.net/ubv4j9m3121x/1Gf7MDTC8L5EhxUxTJ76AK/94233f38c286938c1f386948da9e6213/figma-pixels-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで画像をドット絵のようなモザイクに変換する方法
2021.10.08
![figma-contrast-plugin](https://images.ctfassets.net/ubv4j9m3121x/7FLJTjhSjFp2wbYm3yxP6y/b757012e5eb0c1ada51cb0275a2843c1/figma-contrast-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単にコントラスト比を調べる方法
2021.10.01
![figma-how-to-use-icons](https://images.ctfassets.net/ubv4j9m3121x/7i4advQAd5sneF1dzfzyvp/3b698fd2de6ed95f5e25a6df12959209/figma-how-to-use-icons.png?w=1200&h=630&q=50&fm=png)
Figmaで無料のアイコン素材集を利用する方法
2021.09.24
![figma-how-to-create-button](https://images.ctfassets.net/ubv4j9m3121x/3BvQy2UDmpnNDsS9ehyCRN/9af12c0212cc37d0aeb4f205eb388b6f/figma-how-to-create-button.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなボタン・コンポーネントを作る方法
2021.09.17
![figma-skewdat-plugin](https://images.ctfassets.net/ubv4j9m3121x/2TyBFVZYfY1xQyfqH5OspZ/efce1daf97a13d2e6001d56e5d40120d/figma-skewdat-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単にテキストや図形を斜めに変形する方法
2021.09.10
![figma-how-to-create-table](https://images.ctfassets.net/ubv4j9m3121x/7rvXHCEd80oANRe0fidITF/ec16d85f8ff5d01d3ab6cda4ce9536bd/figma-how-to-create-table.png?w=1200&h=630&q=50&fm=png)
Figmaでシンプルなテーブル(表)を作る方法
2021.09.03
![figma-connect-with-arrows](https://images.ctfassets.net/ubv4j9m3121x/76LQi1H4GybdAtaEisqTxV/e9b25cddb9ef220197a2b0ddb95a7d79/figma-connect-with-arrows.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単にフローチャートや画面遷移図をつくる方法
2021.08.27
![figma-morph-plugin](https://images.ctfassets.net/ubv4j9m3121x/37cTolRQwLNG3I1YjotglU/22c92c23636378bfac5f60c2f299ec37/figma-morph-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaでネオンやガラスの質感を手軽に使えるプラグイン「Morph」の紹介
2021.08.20
![figma-how-to-mask](https://images.ctfassets.net/ubv4j9m3121x/1SxDI3KrLA1937nrP0mfBt/2ec930581c3411e9a3cbb197a388dbf1/figjam-how-to-mask.png?w=1200&h=630&q=50&fm=png)
Figmaでマスクを適用・解除する方法
2021.08.13
![figma-to-path-plugin](https://images.ctfassets.net/ubv4j9m3121x/7pYbzemsFifqH31bY2kTOH/1ce79834ad24207d0b92360c8198b3d9/figma-to-path-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで曲線パスに沿って文字やシェイプをはわせる方法
2021.08.06
![figjam-team-building-workshop-template](https://images.ctfassets.net/ubv4j9m3121x/2ysrL8gEgzQWtwEIFp7YjX/0eb91f00ed784ab703c0f72283a69ec3/figjam-team-building-workshop-template.png?w=1200&h=630&q=50&fm=png)
FigJamでチームビルディングするためのワークショップ集
2021.07.30
![figma-how-to-use-corner-radius](https://images.ctfassets.net/ubv4j9m3121x/4xHqfOWDbxJ42810VKi42P/f84526288c4dd52796d61447f6be185f/figma-how-to-use-corner-radius.png?w=1200&h=630&q=50&fm=png)
Figmaで角丸を使った便利なテクニック集
2021.07.23
![figma-slackbot-app](https://images.ctfassets.net/ubv4j9m3121x/8T2GQ8ALchN0Hib0lVfzh/a440ab7a1cf8e18f2b74a63b3da5909f/figma-slackbot-app.png?w=1200&h=630&q=50&fm=png)
Figmaのコメント通知をSlackで受け取る方法
2021.07.16
![figma-how-to-use-dropshadow](https://images.ctfassets.net/ubv4j9m3121x/4bCmtvrUvNul43IUidvPwI/0ec0d65fab19fc54a1c28d1101e97f10/figma-how-to-use-dropshadow.png?w=1200&h=630&q=50&fm=png)
Figmaで様々なドロップシャドウ(影)を適用する方法
2021.07.09
![figma-how-to-use-plugins](https://images.ctfassets.net/ubv4j9m3121x/4b6gqermuZrYcqaGkdm0wt/ffaba05aae3db023fbed1557801e0a53/figma-how-to-use-plugins.png?w=1200&h=630&q=50&fm=png)
Figmaのプラグインのインストール方法と使い方
2021.07.02
![figma-how-to-use-blur-effect](https://images.ctfassets.net/ubv4j9m3121x/39GmVw2csynCV2OVEXuevt/0bde0247e8435044cfe68a3b5cf6c27f/figma-how-to-use-blur-effect.png?w=1200&h=630&q=50&fm=png)
Figmaでオブジェクトや画像にぼかしを入れる方法
2021.06.25
![figma-how-to-create-pie-chart](https://images.ctfassets.net/ubv4j9m3121x/6ldpoLTQKoLbwDDNDQyfsy/3423e36d76fe83fed3842b07d6e48c2b/figma-how-to-create-pie-chart.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単に円グラフや棒グラフを作る方法
2021.06.18
![figma-how-to-edit](https://images.ctfassets.net/ubv4j9m3121x/txMZFu09nrm8QcoN1thV8/4a62dcf5a5454379c978b3396337ff89/figma-how-to-edit.png?w=1200&h=630&q=50&fm=png)
Figmaでテキストや図形を編集できない時に試すこと
2021.06.11
![figma-text-vertical-alternates](https://images.ctfassets.net/ubv4j9m3121x/5P3xpIuCK5ggGB2ztUtyvv/e91a5781af9344d931b183fa9e0f25a1/figma-text-vertical-alternates.png?w=1200&h=630&q=50&fm=png)
Figmaでテキストを縦書きに対応する方法
2021.06.04
![figma-how-to-crop-and-mask](https://images.ctfassets.net/ubv4j9m3121x/75csZHy55ckMV28tpmyT07/b87da5e6028b57f36128871fd9dfe1fa/figma-how-to-crop-and-mask.png?w=1200&h=630&q=50&fm=png)
Figmaで画像を○や□などの好きな形に切り抜く方法
2021.05.28
![figma-mobile-and-destop-mockup](https://images.ctfassets.net/ubv4j9m3121x/4mpVdv4UiXtfzmOU8f9iUT/08e9df6c144b8f749ce588bfa55e380e/figma-mobile-and-destop-mockup.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単にスマホやPCのモックアップに画像をはめ込む方法
2021.05.21
![figma-how-to-gradation](https://images.ctfassets.net/ubv4j9m3121x/7AE4eWQSoy3JhJ6EnpvflN/ed85279eaa6381cf572be9922eebea09/figma-how-to-gradation.png?w=1200&h=630&q=50&fm=png)
Figmaで図形やテキストのべた塗りとグラデーションの使用方法
2021.05.14
![mac-capture-by-gif-brewery-3](https://images.ctfassets.net/ubv4j9m3121x/bAnhXZVA1PFUeZZA7YkB5/e24b88220404f3603895189c169f2417/mac-capture-by-gif-brewery-3.png?w=1200&h=630&q=50&fm=png)
Macで簡単にGIF動画の画面キャプチャをとる方法
2021.05.07
![figma-how-to-edit-line-style](https://images.ctfassets.net/ubv4j9m3121x/6zNsJMflOlFpeVz8NH4VnX/705ae951a8d2854ae1d60c463ba35a85/figma-how-to-draw-dot-line.png?w=1200&h=630&q=50&fm=png)
Figmaで破線・点線や矢印がついたパスを作る方法
2021.04.30
![2021-figjam-release](https://images.ctfassets.net/ubv4j9m3121x/4AYuM9FPcKlmuQaB6mqeyO/1aff1b5de9174b994219279642505a9b/figma-export.png?w=1200&h=630&q=50&fm=png)
FigJamの機能と使い方の解説(動画付き)
2021.04.23
![figma-how-to-export](https://images.ctfassets.net/ubv4j9m3121x/5tjXsEoDwxt6EXXp9ktcMQ/73aa1ee7589b2ff6ee9d421633437e4b/figma-how-to-export.png?w=1200&h=630&q=50&fm=png)
Figmaでファイル形式を指定して画像に書き出す方法
2021.04.16
![figma-remove-bg-plugin](https://images.ctfassets.net/ubv4j9m3121x/5xxQgLxGoScWq2RKXYQCEa/c6872606b9176f0a44bf674ffa88d863/figma-remove-bg-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaで写真やイラストの背景を簡単に切り抜き・透過する方法
2021.04.09
![figma-beginners-tips](https://images.ctfassets.net/ubv4j9m3121x/5Ccz6amaHlOzglMRa1Km12/4b83850079bf44c03ad4675128203409/figma-beginners-tips.png?w=1200&h=630&q=50&fm=png)
Figma初心者が使い方に困った時に試してほしいTips
2021.03.29
![screenshot-tool-skitch](https://images.ctfassets.net/ubv4j9m3121x/1BjqDMTHZrs3PGLbNxEgg3/78e4c63130bef4ed7b6de847b4b1215c/mac-screenshot-skitch.png?w=1200&h=630&q=50&fm=png)
Macで簡単に注釈付きスクリーンショットを撮る方法
2021.03.26
![website-publish-system](https://images.ctfassets.net/ubv4j9m3121x/3oWU3ILu2747j3qAQVAI8j/d1575d258e930beceb60c153c2b3af69/website-publish-system.png?w=1200&h=630&q=50&fm=png)
Gatsby + Contentful + Netlifyでブログを構築するメリット
2021.03.20
![figma-noise-tool-plugin](https://images.ctfassets.net/ubv4j9m3121x/5xeHDXK3VsSyURlWsY8SE8/6c73463afea7a9e3f1bd75848bbf0a4c/figma-noise-tool-plugin.png?w=1200&h=630&q=50&fm=png)
Figmaの「Noise」でざらざらした質感を表現する方法
2021.03.12
![figma-basic-banner-design](https://images.ctfassets.net/ubv4j9m3121x/4I038ltODIOn0OHBH6mVhM/3c21b4ad6871d9693cfd2dd8a855b878/figma-basic-banner-design.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう
2021.03.08
![figma-wave-and-curve](https://images.ctfassets.net/ubv4j9m3121x/5akJbgjFHkqTKqZZ7rQhPO/2bbdb1fae8ffb0d2976f85fb7c50d41b/figma-wave-and-curve.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単に波線・ジグザグのパスを作る方法
2021.02.28
![figma-patern-design](https://images.ctfassets.net/ubv4j9m3121x/7ezQGM6JvYlx2nJWhayK1m/5db64ac696ba239ba706bc18b5e15426/figma-patern-design.png?w=1200&h=630&q=50&fm=png)
Figmaで模様や柄などの繰り返しタイルパターンを作る方法
2021.02.22
![figma-super-ellipse](https://images.ctfassets.net/ubv4j9m3121x/4zZ4hAd4UPDLTbh9nYC32Q/35892af26d34ca586e2289b845197e52/figma-super-ellipse.png?w=1200&h=630&q=50&fm=png)
Figmaで簡単になめらかな角丸の「スーパー楕円」を作る方法
2021.02.15
![figma-brend-mode-luminosity](https://images.ctfassets.net/ubv4j9m3121x/4GefMCtLFYiGIQvpdJEjAK/a09a385f5878338858637fd42cdd881c/figma-brend-mode-luminosity.png?w=1200&h=630&q=50&fm=png)
Figmaで画像の色をセピアや単色のモノクロに変換する方法
2021.02.11
![favorite figma plugins](https://images.ctfassets.net/ubv4j9m3121x/1oFk1Aes1HxD8YgGnbeBpF/e2e3e277c77747c9d30d93591a8c721d/No1_1.png?w=1200&h=630&q=50&fm=png)
UIデザインの作業を加速するFigmaプラグイン10選
2021.02.08