マガジンのカバー画像

Figma のまとめ

320
デザインツール Figma の使い方、勉強になる記事などを独断と偏見でまとめたマガジンです。 (人力なので漏れてたらすみません🙏)
運営しているクリエイター

#WEBデザイナー

【2020年 総復習】Figmaに関するツイートまとめました!

【2020年 総復習】Figmaに関するツイートまとめました!

今年はFigmaに関するツイートやコンテンツをいっぱい発信しました!一気にまとめて見たいというお声もチラホラもらっていたので、2020年のうちに記事としてまとめてみました。是非年末年始の空いた時間に復習がてら見てもらえると嬉しいです♪

⭐2020年リアルに使いまくったプラグイン10選⭐figmaのショートカット早見表(完全版DLリンク付き)

▼完全版のDLはこちらからどうぞ!

⭐figmaの

もっとみる
アイミツのデザインデータをXDからFigmaへ1ヶ月で移行した話

アイミツのデザインデータをXDからFigmaへ1ヶ月で移行した話

株式会社ユニラボでUIデザイナーとして働く、二児の母のぐーちかです。

昨年末から開始したデザインデータ移行のプロジェクトですが、webサイトUIと管理システムUI、およそ20ファイル80画面を1ヶ月で移行完了させました!!

(コンポーネント数は数えられなかったちーん・・)

今現在のプロダクトの優先順位を鑑みて、必要な順番で移行しているので、本来デザインデータとして持っておくべきUIは、実はま

もっとみる
Figmaを使った謎解き風練習ファイル!Figma World 第1章 旅に出よう

Figmaを使った謎解き風練習ファイル!Figma World 第1章 旅に出よう

久々投稿のタクトです!

今回の記事では
Figmaの練習ファイルについてご紹介しようと思います。

webデザインをするにあたって、いまは色んなツールが出てますね!
自分がいま勤めている会社でもPhotosohpやXdなどでやってきてましたが、
Figmaに徐々に移行することになり、新たに勉強しはじめました。

そんな折、Figmaは英語のUIだったりして
始めるまでのハードルが若干高いといった

もっとみる
Figmaのブックマークプラグインを作ってみた

Figmaのブックマークプラグインを作ってみた

最近Figmaのプラグイン、figmarkを作ったので紹介させてください。

大規模になったFigmaのデータを触っていて、こんなことありませんか?
・ページの行き来が多くて迷子になる
・よく確認する場所をよく見失う

そうだ、コンポーネントをブックマークできるプラグインを作ろう。

figmarkを作りました。

使い方は簡単!1. 公式からfigmarkをインストール
2. Figmaの何もな

もっとみる
知識で差をつけろ!Figmaがもっと便利になるTips集 〜便利機能・ショートカット編〜

知識で差をつけろ!Figmaがもっと便利になるTips集 〜便利機能・ショートカット編〜

こんにちは、i3DESIGN デザイナーチームです。

私たちi3DESIGNではFigmaの使用頻度が最も高くチームメンバー全員が愛用しています。そこで普段私たちがFigmaを使用する際に活用している便利機能やショートカットをご紹介したいと思います。

-便利機能Fill、Effects、Layout gridはコピーできる「ここで使ってるshadowを別のとこでも使いたいな🤔」と思うシーンは

もっとみる
【Figma】レイヤー検索を追加してコマンド+Fで呼び出せるようにした

【Figma】レイヤー検索を追加してコマンド+Fで呼び出せるようにした

こんにちは!しいのきです(@ShinokiDesign)

仕事でFigmaを使うようになり、分からないことだらけで、
色々調べたことを忘れないようnoteに書くことにしました。

今回#01は、Figmaにレイヤー検索機能がないため、
検索のプラグインを入れて、Macにショートカットキーを設定し、
「コマンド+F」で検索ができるようにした話です。

00_現状現在ブランドのECサイトをFigma

もっとみる
オススメのFigmaプラグイン

オススメのFigmaプラグイン

こんにちは、デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage(くらげ)株式会社のデザインチームのKです!

今回はcrageデザインチームのメンバーから聞いた、オススメのFigmaプラグインをご紹介いたします。

現状、crageではFigmaとXDの2つのデザインツールを使っています!
チーム内でもXDをメインに使っていてFigmaはま

もっとみる
デザイン作業をもっと快適にするFigmaのテクニック集

デザイン作業をもっと快適にするFigmaのテクニック集

はじめにこんにちは!i3DESIGNデザイナーチームです。 今回は、チームでFigmaを使ってデザインしている方に向けた実務で活かせるFigmaのノウハウをお届けします!ポイントを押さえて、作業のスピードをアップしましょう!

1. ComponentVariant properties と Component propertiesの使い分け
FigmaのComponentには「Variant p

もっとみる
便利すぎる!おすすめFigmaプラグイン7選!

便利すぎる!おすすめFigmaプラグイン7選!

こんにちは!
大阪でUI/UXデザイナーとして働いているミヤザワです。

今回は、Figmaの実務で使えるプラグインをご紹介します。
便利に使用できるプラグインばかりなので、是非最後まで見てみてください〜!

01.SkewDat
SkewDatは、文字や図形を斜めにできるプラグインです。

「このコピーを目立たせたい!」や「画像全体を斜めにして勢いを感じさせたい!」時などにおすすめです。

02

もっとみる
LottieFiles for Figma プラグインでアニメーションとプロトタイプを追加する方法

LottieFiles for Figma プラグインでアニメーションとプロトタイプを追加する方法

Figmaを使っている方なら、Figmaが、パワフルなデザイン機能と効率的なワークフローを兼ね備えていることをご存知でしょう。我々LottieFilesも、同じ思いを共有しています。だからこそ、Figmaユーザーのためにそれを実現するプラグインを作りたかったのです。

LottieFiles for Figmaプラグインは、Figmaにアニメーションやモーションデザインの要素を簡単に追加する方法を

もっとみる