マガジンのカバー画像

Figma のまとめ

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

#Webデザイン

デザイン共有ツールZeplinとプロトタイピングツールFigmaがアップデート! 2018/06/21のProduct Hunt

デザイン共有ツールZeplinとプロトタイピングツールFigmaがアップデート! 2018/06/21のProduct Hunt

WebデザイナーdorimiがProduct Huntの人気プロダクト+気になったものを紹介する連載です。本日は4プロダクトです🐸🐸

・Zeplin 2.0(今日の1位)
- デザイン共有ツールZeplinのバージョンアップ
・Figma 3.0(今日の2位)
- プロトタイピングツールFigmaのバージョンアップ
・Founders Belt(今日の3位)
- UI

もっとみる
Figma3.0リリースでFigmaがDOPEなデザインツールになった|SketchでもAdobe XDでもない選択肢

Figma3.0リリースでFigmaがDOPEなデザインツールになった|SketchでもAdobe XDでもない選択肢

みなさんはFigmaというデザインツールをご存知でしょうか。

正直な所、Adobe XDやSketchなどと比べると知名度も低いし、それらのツールと比べても機能は充実しているのですが使い所が微妙。
(ちなみに、Figmaの公式サイトにもXD、Sketch、Invision Studio、Framerと比較したページはあるのですが全部同じ内容で肩透かしをくらいます。)

という具合に個人的に推して

もっとみる
Figmaのプランを理解せずに契約すると多分困るので解説

Figmaのプランを理解せずに契約すると多分困るので解説

2019/02/26 追記
Figmaのプラン内容少しづつ更新されています。この記事の内容は現行プランとは少しズレている部分があるので、公式サイトでの内容の確認は必須です!
例えば、フリープランでは2メンバー以上招待できない(editor/viewer関係なく)とこの記事にはあるのですが、現行のプランだとeditorが2名以上招待できないだけで、viewerは制限なく招待できます。

こちらの記事

もっとみる
プロトタイピングツールFigma対応のデザインシステムが気になる! 2018/09/06 #今日のProductHunt

プロトタイピングツールFigma対応のデザインシステムが気になる! 2018/09/06 #今日のProductHunt

WebデザイナーdorimiがProduct Huntの人気プロダクト+気になったものを紹介する連載です。本日は3プロダクトです🐸🐸

・Design System in Figma by Design+Code(今日の1位)
- プロトタイピングツールFigma対応のデザインシステム
・Readwise(今日の2位)
- 電子書籍や記事のメモが取れるアプリ
・TrafficT

もっとみる
デザインツール「Figma」をデザイナーがさわってみた件

デザインツール「Figma」をデザイナーがさわってみた件

こんにちは、SONICJAMデザイナーの濱川です。

昨今、プロトタイプやUI制作に関わるツールが賑わってますね。

SketchやXDや最近のinvisionStudioなど、画面を描くツールは色々とありますが、Figmaというツールが個人的に便利だったので、ご紹介したいと思います。

Figmaについて少し触って見たところ、SketchやXDに使用感は似ています。
できることもそこまで大きく違

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

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

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

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

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

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

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

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

もっとみる
デザインツール「Figma」のいいところ、苦手なところ。

デザインツール「Figma」のいいところ、苦手なところ。

こんにちは!

最近、駄菓子にハマっておかしのまちおかに入り浸ってるモエコです。
(パチパチパニックがおすすめ。)

今回はツール紹介第二弾、「Figma」についてです!

「Figmaってあのフィギュアの…??」
って思った方、惜しいです。

あのFigmaではありません。
こっちのFigmaです。

WEBベースのデザインツールです。

今回はFigmaの細かい機能説明はせず、
私が個人的にす

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

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

Part1ではUIデザインの下準備として簡易的にデザインシステムを作りました。

ただ、前回作ったものはデザインシステムの空箱でしかありません。

空箱という言葉が示すように、変数的に定義したカラーやタイポグラフィをどのように意味づけていくかが残りのPartの目的の1つでもあります。

そして、そのデザインシステムを真に活用していくには横断的な組織が必要不可欠になってきます。
どうすれば横断的な組

もっとみる
【まずやること編】 #Sketch から #Figma にお引越し

【まずやること編】 #Sketch から #Figma にお引越し

すでにお引越しした方、もう少し深く知りたい方は
【チームライブラリ活用編】デザインシステムをFigmaでもっと強くする
もあわせてドウゾ〜

・・・

ノゾエ(@conoito)です。

今日は、みてねのデザインデータが移行されるまでをご紹介します。
移行完了までのイメージを掴むための参考にどうぞ!

・・・

今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。

もっとみる
Figmaを使って模写コーディングしよう!

Figmaを使って模写コーディングしよう!

こんにちは!いちくん(@ichikun0000)と申します。

普段は都内のWEB制作会社でエンジニアとして勤務しており、デイトラというオンラインスクールのメンターもやらせていただいております。
また、最近MENTAも始めました。
ご興味ありましたら是非相談してください:)

今回紹介するのはFigmaというツールです。

まずはこれを使ったらどんなことができるのか知るために以下の僕のツイートを見

もっとみる
Figmaを導入して変わった5つのこと|使い方・事例・記事まとめ

Figmaを導入して変わった5つのこと|使い方・事例・記事まとめ

スマートキャンプデザインブログ、Designer / Engineer のhaguriです。

スマートキャンプでよく使用するデザインツールにFigma(フィグマ)というツールがあります。過去にも数回、Figmaに関する記事を書いてきました。

Figmaの導入後からしばらく経ち、会社全体で5つの変化が生まれました。
今回はFigmaによるコラボレーションやデザインワークの変化について、スマートキ

もっとみる
Figmaでつくるデザインシステム設計#4 Organisms〜Templates

Figmaでつくるデザインシステム設計#4 Organisms〜Templates

はじめに
今回は、Organism〜Templateの作成について解説します。要素を集めて整形するフェーズとなります。また作成してきたコンポーネントに対して具体的な機能を付与することができるフェーズでもあります。UXデザインにおいても重要なポイントとなります。

Atom/Molecule/Organismについては前回の記事を参照していただければ幸いです。

Templateについて
Templ

もっとみる
【全12問】エンジニア向けFigma検定|上級まで解けたらFigmaマスター!

【全12問】エンジニア向けFigma検定|上級まで解けたらFigmaマスター!

スマートキャンプ デザインブログ デザイナーの髙松です。

今回は、社内でエンジニア向けの「Figma検定」というものを作ったので、なぜ作ったのか、どういう検定なのかについてお伝えします。

なぜ「Figma検定」を作ったのかスマートキャンプでのWebデザインの実装は、共同作業も含みますが、
①デザイナーがFigmaでデザイン
②エンジニアがFigmaを見ながら実装していく
という流れになっていま

もっとみる