Figmaリンク集まとめ！【Figma】

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# Figmaとは？
### 1. [公式ページ](https://www.figma.com)
>A better way to design.
Design, prototype, and collaborate all in the browser—with Figma.

要するに、ブラウザ上でデザインして、プロトタイプして、チーム開発をするのに向いている`デザインツール`です。
[<img width="800" alt="スクリーンショット 2019-06-07 1.06.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/ef98840e-a9e4-29f5-a192-52d62308c220.png">](https://www.figma.com)

### 2. [Sketch はもういらない？ デザインツール Figma の紹介](https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d)
こちらの記事は、わかりやすく要点だけ抑えていて、最初は読みやすいと思います！
[<img width="800" alt="スクリーンショット 2019-06-07 1.05.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/384f5388-92f6-d4b9-f578-60ae50855ff8.png">](https://qiita.com/hikaru_tayama/items/49373412ec1a515ff05d)

# 入門編！
### 3. [サクッと始めるウェブデザイン【Figma】](https://zenn.dev/umi_mori/books/d1ea181264ebb3)
こちらの本では、一冊のウェブ本として無料で配布しているチュートリアルになります。
実際に業務委託などの仕事の現場でFigmaを使ってきた私自身の知識と経験を活かして、作成しています。

[<img width="800" alt="saku-design.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/20a78570-5280-0fca-9ae3-1ffab2c68e3e.png">](https://zenn.dev/umi_mori/books/d1ea181264ebb3)

### 4. [Figmaの基本【これからはじめるFigma】 - bagelee](https://bagelee.com/design/figma/the_basics_of_figma_figma_beginner_series/)
こちらの記事は、入門者向けの記事をブログ形態で可愛くまとめています！

[<img width="800" alt="bagelee.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/b6bcae2f-d0c1-a079-f905-b746aa58eef6.png">](https://bagelee.com/design/figma/the_basics_of_figma_figma_beginner_series/)

### 5. [UI/UXデザインツール『Figma』入門 - chot.design](https://chot.design/figma-beginner/)
こちらの記事も、可愛くわかりやすく機能ごとに紹介されています！
[<img width="800" alt="chot_design.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/d9036cf4-60b8-de4b-9748-8baae5e17c55.png">](https://chot.design/figma-beginner/)

# 動画編！
### 6. [公式Youtube](https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA)
[<img width="800" alt="スクリーンショット 2019-06-07 1.12.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/f4a9768f-201c-9a64-0abe-c8e943c0edd3.png">](https://www.youtube.com/channel/UCQsVmhSa4X-G3lHlUtejzLA)

# 細かくまとめてたリンク集！
### 7. [これからFigmaを始める人にオススメの記事まとめ](https://blog.tsubotax.com/n/n4986ea044c94)
この記事では伝えきれない良記事を紹介してくれています！
[<img width="800" alt="スクリーンショット 2019-06-07 1.29.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/1ccc6761-0dbe-df9d-4ff3-f6a242cdb54f.png">](https://blog.tsubotax.com/n/n4986ea044c94)

# プラグイン編
### 8. [私が手放せないSketchプラグイン11選](https://bagelee.com/design/sketch/11_sketch_plugins_i_cannot_live_without/)
プラグインを使うとよりリッチなツールに早変わりします！
[<img width="800" alt="私が手放せないSketchプラグイン11選.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/d57199de-0a87-f761-a1f0-1bfe1b7cb56e.png">](https://bagelee.com/design/sketch/11_sketch_plugins_i_cannot_live_without/)

# その他の Qiita記事 （随時更新）
- [Figma使おうよ](https://qiita.com/KazukiTakeuchi/items/04368317e74ddb1d96e0)
- [Figmaで資料作成するときに便利なプラグイン「Paginate」](https://qiita.com/kaneaki/items/b68b0efa2d6dc96abb92)
- [オブジェクト指向UIデザインのワークアウトをするための環境構築](https://qiita.com/mitsuaki1229/items/8a008d057063694374b0)
- [Nuxt.js＋Figma＋Storybookでデザイン重視なチーム開発を！](https://qiita.com/dcm_kumakawa/items/b2d8e83582070a2b5189)
- [デイトラ　Webデザインコース　DAY1〜8](https://qiita.com/azarashi_ay/items/bd90e84adee6045bc156)
- [Figmaのプラグイン開発事始め](https://qiita.com/yoh_n/items/294cf6055bf2b4b9d4c6)
- [Figma vs AdobeXD〜脱・Officeで画面設計！〜](https://qiita.com/Yukaaaah/items/0d50fe64f337d8418838)
- [FigmaのAutoflowを使って画面遷移図を書く](https://qiita.com/daa01/items/04e0347548b8cea2027f)
- [業務SEなあなたにFigmaのススメ](https://qiita.com/kaku3/items/215dbabf8b72f8fd60a1)
- [Figma Webhooksを使ってLibrary Publishを検知してDesign Opsを捗らせる方法](https://qiita.com/xrxoxcxox/items/9f7ce7131cd1778850e0)
- [FigmaのデザインをSwiftUIのコードに変換してくれる無料プラグインがあるらしい？？？](https://qiita.com/shira-shun/items/4a0da180c7e117f836e5)
- [Figmaで角を丸くする方法(border-radius)](https://qiita.com/OKALOG_info/items/7aae36f023dedaf91dac)
- [Figamaで可変のボックスを作る方法](https://qiita.com/OKALOG_info/items/3536601a6927108c64ed)
- [Figmaで要素の距離を一定にする方法](https://qiita.com/OKALOG_info/items/f7642a28815eeb4ea474)
- [デザイナーが1人でGatsbyを使ってサイトを作ったよ #2](https://qiita.com/xrxoxcxox/items/c27b92e763f3833af6dd)
- [アプリ制作時に使って良かったツール](https://qiita.com/yama3104/items/7675f4b746be19afd96b)
- [【買付代行サービス個人開発 - No.009】会社の切替とデザインをFigmaでもう少しつめる](https://qiita.com/sakusakupg/items/41b09c7efeb324d98fa7)
- [【買付代行サービス個人開発 - No.006】組織の管理画面とログインのおおまかなデザイン](https://qiita.com/sakusakupg/items/2d6f060f22ea2ee94e8d)
- [【前編】MENTA使ってメンターと開発なう　](https://qiita.com/heyjun33/items/f5f505c8f2aee8c1683d)
- [Figma で San Francisco / SF Pro を使いたい時に Missing Fonts となる場合](https://qiita.com/Statham/items/baf776c8016627aecf4b)
- [Figma デザインデータ作成メモ](https://qiita.com/toooy/items/5fa25a0966869b4e52c0)
- [Figmaの使い方](https://qiita.com/Hrioaki/items/d428d8318780a47f87ff)
- [Figmaとは](https://qiita.com/kotatsufujiwara/items/763d1b4bc9c716a92e41)
- [【Figma】#1 便利コマンドまとめ](https://qiita.com/toooy/items/1680c6c7f5d1622db526)
- [Figmaプラグイン"Artboard Creator"をリリースするまでの流れ](https://qiita.com/yasuhiro-y/items/16da3a0c02adc7894ea6)
- [Figmaの使い方備忘録](https://qiita.com/seicd_b_tako/items/9aa8960f9f0d67956738)
- [初心者がFigmaを使う](https://qiita.com/himasyufu/items/11a1f37e2d36c872b861)
- [Kritaで描くSVGペン画](https://qiita.com/tksh/items/b31c742a9f6f70851103)
- [【情報共有】XDでは外部リンクを設置する機能がない(2020年4月時点)](https://qiita.com/tomokei5634/items/51fb49242b28f2d63105)
- [FigmaのプラグインのUIをReact+TSで作る](https://qiita.com/seya/items/cb1a1a5350311549d41f)
- [figmaでアプリのデザインをつくってみる](https://qiita.com/ampersand-dev/items/143f7265c73ac41ad2ba)
- [自分のfigmaの作業テンプレートを公開するよ[モバイルアプリ向け]](https://qiita.com/ampersand-dev/items/847e149794aaeb20ce12)
- [Figmaで作ったデザインをDartで吐き出してくれるFigma to Flutterを使ってみた](https://qiita.com/haruusagi/items/994052bb2f866d6056b5)
- [初めてFigmaを使う時にエンジニアが押すボタン](https://qiita.com/_simarina/items/4e4653ed7089aac7c8fa)
- [Figmaとコードのテーマを統一する](https://qiita.com/ehika/items/e9f83fd0358609676c01)
- [Figma UIデザイン](https://qiita.com/TakeshiNakamoto/items/3b058a0da3ea0e3dac89)
- [エンジニアが最低限押さえておくべきFigmaについてのTips](https://qiita.com/shinnoki/items/eef99dc6ff97c394f458)
- [figmaを使って既存ホームページをデザインに起こすンゴよ〜](https://qiita.com/Ancient_Scapes/items/bc9c362decca93f0a780)
- [ProtoPieでFigmaのフレームをインポートしたら崩れてしまった](https://qiita.com/spring_i/items/2d99140b9757f4c6fa98)
- [Figmaのプロトタイプツールでドロップダウンメニューを表現する方法](https://qiita.com/kaneaki/items/6ab4cc5096583c4b022f)
- [SwiftUIでiOSのAppStoreアプリのUIを表現してみる](https://qiita.com/hytkgami/items/571f9df782e6ba1056c0)
- [忙しい人のためのFigma Plugin開発手引](https://qiita.com/kgsi/items/54b569a64568db36d68a)
- [色を置き換えるFigmaプラグインを作ろう ~後編~](https://qiita.com/310ma3/items/4e961e0e58df49b3f536)
- [Illustratorの段組設定機能をFigmaで再現してみた。](https://qiita.com/maeshiiii/items/9fe6b25f45b169c6abba)
- [色を置き換えるFigmaプラグインを作ろう ~前編~](https://qiita.com/310ma3/items/da41da464a856db4c42c)
- [Instanceを全て選択するFigmaプラグインを作ろう](https://qiita.com/310ma3/items/10759ec404f9e1ecdd23)
- [Figma で透過 PNG にカラーオーバーレイをかけるには](https://qiita.com/tscp/items/1656d9f6ac3bd2731e54)
- [Themebetaでchromeテーマを作った](https://qiita.com/miiina016/items/64100de6f63b94298fd3)
- [FigmaのPrototypeで横スクロールをさせる方法](https://qiita.com/masaya2019/items/86e0a5359c79a325b6e0)
- [Figmaデスクトップアプリでプラグインが使えなくなった時に試したこと](https://qiita.com/310ma3/items/198fe44b57f65a550c93)
- [最近便利だった開発ツール](https://qiita.com/arene-calix/items/61b8745d098a30a622e0)
- [Figma ✕ React Storybook で作るプロトタイピング & スタイルガイド](https://qiita.com/stranger1989/items/65d6ed0668ac717917a2)
- [Figmaプラグイン開発のデバッグ方法](https://qiita.com/maeshiiii/items/a54e0bc8396e902b2a51)
- [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その２ figma準備編](https://qiita.com/ampersand-dev/items/0bbe2de76b39db70551f)
- [WEBデザインに使えるツール参考記事のまとめ](https://qiita.com/dribbler/items/c1fe4f0ecc0b34f5d266)
- [デザインを何もしらないエンジニアがDailyCocoda！を3ヶ月かけて完走したので、1日目の自分にアドバイスする その１ 概要編](https://qiita.com/ampersand-dev/items/e0768faf4b7260fc28d6)
- [Figmaのすすめ〜ワイヤーフレームをExcelで作る情弱エンジニアがイキるためにFigmaを使った話〜](https://qiita.com/vedokoy/items/06434adc157930d89587)
- [「Drama」リアルなプロトタイプを最速で作れるUIデザインツール](https://qiita.com/MeLonadeCider/items/43fc3ff73d367769edc0)
- [Figma PluginをVue.js + TypeScript + Sass + Bulmaで開発する](https://qiita.com/hosopy/items/7967af20649e5db8e4b5)
- [Figmaでアートボードを拡大縮小するときに中身を拡大縮小しないようにする](https://qiita.com/sngazm/items/ff9335c693d779363410)
- [エンジニアでも出来る！Figmaを使って自作アプリをリニューアル](https://qiita.com/wheatandcat/items/a1a8122b3a7edadfe477)
- [AEUXを使ってFigmaのデザインデータをAfter Effectsに移動する方法](https://qiita.com/rmlabo/items/d7524287051dff4e263d)
- [Figmaで一番下のレイヤーを選択する方法](https://qiita.com/ToshioAkaneya/items/15646f4f6054f629d4e5)
- [figmaの吐き出すjsonがsketchのそれより数倍も見やすかった件](https://qiita.com/mito_log/items/26c0ac1adf486681b34d)
- [Figma操作方法](https://qiita.com/akito_tameto/items/2ec115ce33e4a9104945)
- [デザインしながらコンポーネント名とか変数名とか考える時のルール](https://qiita.com/nibushibu/items/0207ad608f16fbbc5bb5)
- [Figma Web APIについて](https://qiita.com/atsumo/items/dc024f2811457b85886d)
- [Figma Missing Fontsの対処法](https://qiita.com/ryotax/items/0623d412be31efe103d5)
- [エンジニアが無料で使える画像編集ツールとしてのAdobe XD入門](https://qiita.com/furitahiroshi/items/7affdb748eb10e65dbce)
- [FigmaでFont Awesomeを使えばいいことが待っている、きっと……](https://qiita.com/muuuuminn/items/8f1a51f9895522bbb22f)
- [【初心者向け】Atomic Design っぽい、Figma の使い方](https://qiita.com/hikaru_tayama/items/c8d9310d5a4e4cca7a68)
- [仕掛けのあるクリスマスカードをfigmaで作ってみた](https://qiita.com/takuya_kawabata/items/4d12e03975bd42b487c1)
- [クライアントワークにおけるデザインツール導入と主観的おすすめツール 〜2018 冬〜](https://qiita.com/Shoesk/items/f7f26eea9bc71c5a1b38)
- [プログラマでも「Figma」ならレイアウトやロゴが簡単にデザインできる](https://qiita.com/piacere_ex/items/5ae09887b3dfd9c01b80)
- [細かすぎて伝わらないかもしれない、Figmaの良いところ](https://qiita.com/nibushibu/items/aba3375047eb6cb79cf8)
- [MacアプリがMove to Applications folderと出てが起動出来ない問題を解決](https://qiita.com/AsagiriDesign/items/1c3926876230ab9971bd)
- [Figma使うのに便利なTips](https://qiita.com/nibushibu/items/a4e02e60936ebffb7c5a)
- [Figmaで日本語を使う](https://qiita.com/sakapun/items/07577ac325aae3db44ba)
- [UI案、イラレやパワポで作るくらいなら、『Figma』](https://qiita.com/ZOOSHIMA/items/651d6ff193b282c5fae7)

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)