マガジンのカバー画像

Figmaとデザイン

35
運営しているクリエイター

#UIデザイン

【2020年版】リアルに作業を超効率化してくれたFigmaの必須プラグイン10選!!

【2020年版】リアルに作業を超効率化してくれたFigmaの必須プラグイン10選!!

今回は年末ということもあり、2020年に仕事でリアルに使い倒しまくったFigmaのプラグインを10個に絞ってまとめてみました!

こちらの記事はデザインの制作スピードをあげたい人向けに書いています。そのため一見面白そうだし革新的だけど実際コレどこで使うの?みたいなプラグインは今回あえて紹介してません。全てリアルに仕事の中で使い倒しているスタメンのプラグインのみに絞っています。

では早速紹介してい

もっとみる
Figmaのframeとgroupの違い

Figmaのframeとgroupの違い

前回のFigmaに関するnoteがバズったので調子に乗ってまたFigma関連の記事を書きたいと思います。

前回の記事↓

私がSketchからFigmaに切り替えた時に最初に「ファッ?」ってなったのが、frame(フレーム)とgroup(グループ)の違いです。

みなさん、なんとなくでやってませんか?
実は似て非なる機能を持つ、frameとgroup。今回はこの二つの違いについて徹底的に解説して

もっとみる
Figmaにおけるコンポーネントとバージョンの管理について考える

Figmaにおけるコンポーネントとバージョンの管理について考える

まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。

相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏

1.命名規則とコンポーネントの単位につい

もっとみる
チームみんなでFigmaを使うための基盤整備(基礎編)

チームみんなでFigmaを使うための基盤整備(基礎編)

こんにちは。ファンズ株式会社デザイナーの @suuminbot こと日比谷です。

当社は「未来の不安にまだない答えを」というミッションを掲げ、「Funds」という資産運用サービスを提供するFinTechスタートアップです。

Fundsはプロダクト開発の最初期からインターフェースのデザインにFigmaを使ってきましたが、フルタイムのデザイナーはずっと自分一人ということもあり、コンポーネントの整備

もっとみる
【Figma】入れておくと便利なアセットまとめ

【Figma】入れておくと便利なアセットまとめ

こんにちわ!現在大学3年でモスティープレイスという会社でデザイナーのインターンをしています、田島美鈴 @abcmisuzuです。

この記事では、Figmaというツールで使える便利なデザインのアセットを紹介していきます。

最近UIツールをSketchからFigmaに移行し、情報収集をしていたのですが、日本語のプラグインなどのまとめ記事はあってもアセットの記事は見つけられなかったのでまとめてみまし

もっとみる
Figmaを使って開発チームの生産性をあげるプロダクトマネジメント

Figmaを使って開発チームの生産性をあげるプロダクトマネジメント

開発現場に Figma を導入してチームの生産性が上がった話です。

デザインドリブンで、プロセスを可視化しながら進める僕の開発スタイルと相性が良いので、最近はクライアントワークでも啓蒙しています。

Figmaは平たく言うとデザインコラボレーションツールですが、こちらのリンクから動画をみると雰囲気が伝わると思います。

https://www.figma.com/

UIデザインツールのリッチ化

もっとみる
Figmaを使った 『ペアデザイン』 という革命

Figmaを使った 『ペアデザイン』 という革命

Figmaは同一のデータを複数人で編集したり閲覧できたりするので、デザインデータ作成も複数人で出来るとめっちゃいいじゃん?と思い、ペアデザインという手法を考えて試してみました。結論から言います。めちゃくちゃ手応えが良かった。一人でデザインする時代は終わった。これはデザインフローの革命だ!

ペアデザインに適している要件サービスや管理ツールなどの、コンポーネントベースのUIデザインに適しています。逆

もっとみる
これからFigmaを始める人にオススメの記事まとめ

これからFigmaを始める人にオススメの記事まとめ

最近よく聞かれるのと、ニーズがありそうだったので、Figmaのおすすめ記事をまとめました

Figmaの概念、考え方の記事Figmaを使った 『ペアデザイン』 という革命
https://note.mu/oathkite/n/na255d4557fbc

Figmaを使って開発チームの生産性をあげるプロダクトマネジメント
https://blog.tsubotax.com/n/n58b33ccee

もっとみる
Figma FAQ 、 よくある質問  #02

Figma FAQ 、 よくある質問 #02

どうもです、Figma が気になるみなさん。
Figma コミュニティでの質問 & 回答まとめシリーズ 2 本目です。
今回は『知ってると便利 10 選』です。

#01 の『意外と知らないこと 10 選』も合わせてどうぞ。

Q1. 同じ位置にオブジェクトをコピペしたい

・オブジェクトをコピー
・ペースト先のFrame を選択
・ペースト

資料のタイトルや、UI ボタンを同じ位置におきたい

もっとみる
Figma FAQ 、 よくある質問  #01

Figma FAQ 、 よくある質問  #01

どうもです、Figma が気になるみなさん。

Figma コミュニティで色々質問 & 回答いただきました。
なんと約 60 種類!知らなかった解決策とか発見できて楽しいですね。
Slack だと流れていってしまうので、よくある質問や便利と思った解決策をまとめていこうと思います。

今回のテーマは始めたてに引っかかる『意外と知らないこと 10 選』です。

Q1. オブジェクトとオブジェクトの隙間

もっとみる
Figmaのオートレイアウトを完全に理解した話

Figmaのオートレイアウトを完全に理解した話

どーもーUI/UXデザイナーのうっくんです。
 ちょっと前にFigmaにオートレイアウトという機能が追加されました。

最初は、「おー、ボタンの長さがテキストに追従して変えられるのかー」としか思ってなかったのですが、実際に使ってみると実はもっと強力な機能でした。

オートレイアウトの基本機能。コンテンツの大きさに応じて、コンテナの大きさが変わる。今までは、いちいち赤い背景の部分もデザイナーがリサイ

もっとみる
Figmaでできる、UIデザイン。-ワークショップ編-

Figmaでできる、UIデザイン。-ワークショップ編-

こんにちは、Goodpatch Anywhereのささやんです。
先日はFigmaに恋してる!特に共同作業にぴったりだよ!というご紹介をしました。
じゃあ具体的にどんなことができるの?について今回はお話できればと思います。

第一弾はUIワークショップについて、です。
ワークショップというとUXデザイナーがやってるものじゃないと思われがちですが、UIでもできるんですワークショップ。しかもリモートで

もっとみる
Figmaの使い方、全力でまとめました。

Figmaの使い方、全力でまとめました。

最近、figmaを社内でも始めたのですがその魅力にドンドン引き込まれています。自身の学習も含め、これからfigmaを導入しようとする方の参考になればと思い使い方のまとめを作ってみました。
私はsketchをベースに開発することが多いのでsketch→figma視点で語ってる所が多いです。全力と言いつつ、まとめ切れていない所も多いので、不足しているところは随時更新していきます。

導入編アカウント登

もっとみる
FigmaではじめるUI(Web)デザイン|Part1

FigmaではじめるUI(Web)デザイン|Part1

Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。

そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く(人のこと言えないですが......

もっとみる