マガジンのカバー画像

Figma のまとめ

291
デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。
運営しているクリエイター

#デザイン

【Figma講座】デザインスピードが上がるショートカット5選!

【Figma講座】デザインスピードが上がるショートカット5選!

こんにちは!and factoryマンガアプリの担当デザイナーのリリです。
Figmaのデザイン作業を効率よくする為に欠かせないのが、ショートカットの活用。
今回は、Figmaのデザインスピードが上がるショートカットを5つ紹介します。

1.複数画像をまとめて差し替える【Command/Ctrl+Shift+K】複数の画像をシェイプ内に挿入する際、一枚ずつ追加していませんか?
Figmaでは複数画

もっとみる
Figma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話

Figma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話

Findyでプロダクトデザインとデザインシステム構築に取り組んでいる🐰です。前回はFigma Slot記事を沢山の方に読んでいただきありがとうございました。

今回はFigma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話について自分用メモ含め残しておきたいと思います。

デザインシステムのトークンとはそもそもトークンとは色、フォントスタイル、余白等の値を表

もっとみる
【Figma】料金周りの変更:日本円で支払いができる、開発モードの料金

【Figma】料金周りの変更:日本円で支払いができる、開発モードの料金

「Figmaの2022年夏〜23年夏の新機能を扱うシリーズ」、今回は料金編です。

この記事は、2022年に自費出版で発売した『ちょっとできる人向けFigma本』のための追加コンテンツです。
この記事単体で読んでもらえるようにもしています!

※2023年8月末時点の変更点や新機能を扱っていますが、間違い・アップデートなどありましたらお知らせください!

現地通貨での支払いができるように『ちょっと

もっとみる
エンジニア直伝!デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

エンジニア直伝!デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

こんにちは、@ShikiCheriです。
現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。

デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…!?クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サ

もっとみる
最小公倍数のプロダクト戦略(FigJamフォーマット公開)

最小公倍数のプロダクト戦略(FigJamフォーマット公開)

プロダクト戦略をたてる際に活用できるフレームワークはこの世に無数に存在します。

時代や業種やフェーズやプロダクトの性質に応じて最適なフォーマットが異なるため、どういったフォーマットを選びとって進めていくか迷う人も多いでしょう。

そこで、私がいままで数々の新規事業立ち上げとプロダクトグロースをおこなってきた経験から、プロダクト戦略をたてる際にほとんどの場合で使っているオレオレFigJamフォーマ

もっとみる
みんなFigmaの運用どうやってる? REALITYの運用方法を公開しちゃうよ!2023年度版

みんなFigmaの運用どうやってる? REALITYの運用方法を公開しちゃうよ!2023年度版

お久しぶりです、デザイナーの超簡単です。最近はイタリアンにハマっており、パスタばかり作っています。推しパスタはカッチャトーラです。

全然noteを更新してなかったんですが、超簡単がマネージャーになったり、チームメンバーが増えたり(パートナー入れて総勢8人!でかい!)、デザインのフローが変わったりと、REALITYのデザインチームにも色々な変化がありました。

今回は、Figmaの運用方法が2年前

もっとみる
Figmaでここまで!?ゼロからはじめるUIアニメーションデザイン

Figmaでここまで!?ゼロからはじめるUIアニメーションデザイン

クックパッド デザイナーのよーた(@yotaszk)です。突然ですが、あなたは「Figma」にどんなイメージをもっていますか?

UIデザインツール?、プロトタイプングツール?・・・もしそのイメージだけに留まっているなら、めっちゃ勿体無い。めっちゃ勿体無いです(本当に勿体無いので2回)。

もちろん基本的な機能は、UIデザインやプロトタイピングです。ただし、Figma Communityのプラグイ

もっとみる
Figma で作る、アイコン

Figma で作る、アイコン

突然ですがアイコン作ってますか🤤
最近は Material Symbols やその他無料のアイコンセットも多いので、イチから作ることも少なくなったように思います。そのせいか、まとまった記事が観測できなかったのでまとめてみました。
本記事の作り方については必ずしも正解とは限りませんが、書いてある操作を大体覚えとけば一通りのアイコンが作れるようになる、的なものを目指します。
アイコンの品質の上げ方

もっとみる
Figma Library外科手術

Figma Library外科手術

フリーランス&Goodpatch Anywhereで、グラフィックやUIデザインなど見た目周りを専門にデザインしているハマダナヲミと申します。文字とビールが好きです。(フェスではハイネケンに乾杯し、W杯では自宅からバドワイザーを応援し、ご飯を食べに行ったお店にモレッティがあれば迷わず注文します。)

みなさまFigma使ってますか!かつてPhotoshopと添い遂げるんやとばかり思っていたAdob

もっとみる
Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

Figmaのプラグインを使って、ノーコードでHTMLメールを生成する

こんにちはフロントエンドエンジニアの峯です。

HTMLメール用の作成をHTMLコードベースで作成する場合、想像以上に課題が多くあります。通常のWeb上で利用するマークアップ手法では、デザイン崩れなどが発生してしまいます。

また、デザイナーがデザインしたものをエンジニアマークアップするため、もちろんその分の工数が発生します。

主な課題Tableレイアウトを使ったレイアウトが基本

通常のWeb

もっとみる
Figmaで再利用しやすいアイコンライブラリを作成する方法

Figmaで再利用しやすいアイコンライブラリを作成する方法

ここ最近、Figmaファイルのリファクタリングに取り組む機会が何度かあり、再利用しやすいデザインづくりを試行錯誤してきました。
その中で得られた知見を記事にまとめいきたいと思います。
今回は再利用しやすいアイコンライブラリの作成方法について説明します。

ライブラリとは何か?そもそもライブラリとはなんでしょうか?
Wikipediaで「ライブラリ」を調べると以下のように説明されます。

元々はプロ

もっとみる
Figmaの共同デザイン手法

Figmaの共同デザイン手法

最近、アプリのデザインを二人で行う機会があった。
その時に作ったルールを紹介する記事。

前提プラン:無料

デザイナー:複数人

ページ構成

DesginSystem:デザインシステム

Layout:画面デザイン

Other:元のデザイン、ロゴ、Prototypeなど

この手法のメリット

タスクの担当を明確にできる

デザインを評価し合える

素材の処理方法などに一定のルールを持てる

もっとみる
AdobeがFigmaを約200億ドルで買収ーAdobeとFigmaのシナジーを特許情報中心に検討

AdobeがFigmaを約200億ドルで買収ーAdobeとFigmaのシナジーを特許情報中心に検討

9月15日にAdobeがFigmaを買収したというニュースから、今回の買収によりどのようなシナジーがあったのか?を考察したいと思い、特許情報を中心に分析を行った。
なぜ、Illustratorやphotoshop等、デザインに関するツール・プラットフォームで強者であるAdobeが買収を行ったのか?

本記事は、個人の見解である。本記事の利用者自身の責任において、記事の活用を行って頂くようお願い致し

もっとみる
Figmaで大きな画像を張り付けると画質が悪くなる(4096pxの限界)のを超える方法

Figmaで大きな画像を張り付けると画質が悪くなる(4096pxの限界)のを超える方法

Figmaで4096pxを超える画像を張り付けるときに限界突破するプラグイン紹介します。

Figmaを利用してると誰もがぶつかる問題、4000pxの縦長の画像、おもにブラウザのキャプチャーを張り付けて修正指示書やワイヤーを作成する際に、「あれ?画質汚くない?」ってなったことありますよね。

これはFigmaの仕様上、縦幅や横幅の画像サイズの最大値が4096pxとなっていてそれ以上はそれを上限に圧

もっとみる