マガジンのカバー画像

Figmaとデザイン

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

記事一覧

【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 Organization Planの課金モデル

Figma Organization Planの課金モデル

Hello World! プログラミングをかじっているわけでもなく、ただただタコ釣りをして4連休を過ごしたちゃんあべことあべです。

たまたまあるデザイナーさんと話していたときに、「Figma Organization Planの課金形態めっちゃ知りたいです!」と言われたので、この記事を書いてみることにしました。

正直、導入前はここら辺の知見が全くなく、そういった記事も見かけなかったので、めっち

もっとみる
Figma日本語化 Chrome拡張ベータ版のお知らせ

Figma日本語化 Chrome拡張ベータ版のお知らせ

こんにちは、junkawa です。

Figma のメニューを日本語化する Chrome 拡張を作ってみました。
とりあえず動作するベータ版ですが、多くの人にテストしていただいて改善していきたいです。

文言の変更、追加などのご希望があれば、下記フォームからご連絡ください。

また、下記 GitHub でも要望を受け付けております。

インストール方法Chrome Web ストアで公開しました。

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

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

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

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

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

もっとみる
実装時の生産性が下がるFigmaデザインの作り方

実装時の生産性が下がるFigmaデザインの作り方

あまり意識されないことかもしれませんが、デザインファイルの作りは地味〜〜〜に実装者の生産性に影響を与えます。なので、私の経験ベースで「こういうのは嫌なので、こうなっていると嬉しい」というのを書きためてみました。

基本的には「デザインの意図が分かりづらい」と「スタイルの具体的な値をよしなに考えてあてる手間が増える」のをなるべく避けたいというスタンスです。

1. 異なるテキストが改行やline-h

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

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

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

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

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

もっとみる
Figmaの使い方を紹介|ショートカットキーリスト無料配布中

Figmaの使い方を紹介|ショートカットキーリスト無料配布中

スマートキャンプでは、Figma(フィグマ)というビジュアルコラボレーションツールを使用しています。

Figmaは素早く作れて、すぐにコラボレーションできるツールです。
その恩恵をさらに受けるために、効率化のためのショートカットキーリストを作りました!🎉

このショートカットキーリストを見ることでFigmaの使い方を学ぶことができるので、ぜひ使い始めの方も見てください。

自分用に作ったものだ

もっとみる
開発初期のチームでFigmaをおすすめする理由

開発初期のチームでFigmaをおすすめする理由

こんにちは、ZERO TO ONEの石井です。

今回は、現在のnori-na開発チームで使っているデザインツールに関するお話。

開発チームというよりは、私が好んで個人的に利用しているツールになりますが。

新サービス立ち上げやプロダクト開発初期チームのPMで、まだパワポでワイヤーフレーム作成している方には参考になるかと思います。

プロジェクトチームの背景・開発体制おすすめ理由説明の前に、まず

もっとみる
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 ボタンを同じ位置におきたい

もっとみる