マガジンのカバー画像

Figma のまとめ

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

#UIデザイナー

Figmaでつくるデザインシステム設計#1 Atoms作成まで

Figmaでつくるデザインシステム設計#1 Atoms作成まで

まずは、figmaを開く前に要件整理を行います。

デザインシステムを作る目的デザインの一貫性を担保し、デザイナーがユーザーが期待する機能性やユーザビリティを素早く提供できるようする。また、デザインシステムを実行した結果として迅速にKPIを達成できるツールとして機能することを目指している。

メリットと留意点サービスをまたいで一貫したUXデザインを実行することができる。
コンポーネントが標準化され

もっとみる
Figmaでつくるデザインシステム設計#2 Atoms〜Moleculesの作成

Figmaでつくるデザインシステム設計#2 Atoms〜Moleculesの作成

はじめに前回の記事で、デザイン設計に関しての準備や作り方の概念及び、Figmaのアセットを利用したAtomsの作り方を書きました。今回は、その続きとしてアセットの作り方の補足と、Atoms同士の組み合わせで生成されるMoleculesの概念、実際のFigmaでの作り方まで解説します。

前回の記事は下記からご覧いただけます。

Figmaでのアセット管理の特徴前回は、Atomsフレームを作り、At

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

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

はじめに今回はFigmaのアセット利用して、Molecules〜Organismまでを作成します。Atomic Designについて、また各要素について引き続き解説します。
#1 Figmaでつくるデザインシステム Atomsまでの解説はこちらから
#2 Atoms〜Moleculesまでの解説はこちら

MoleculeのおさらいMoleculeとはAtomとAtomを組み合わせたものです。

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

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

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

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

Templateについて
Templ

もっとみる
【Figma】無料プランのデザイン運用ルール

【Figma】無料プランのデザイン運用ルール

こんにちは、株式会社PentagonでCDO / デザイナーをしている水谷です。

本日のnoteは、最強のUIデザインツール「Figma」のデザイン運用について考えてみましたので、ご紹介したいと思います。

Figmaって?FigmaはUIデザインやワイヤーフレーム作成の際に使用するデザインツールです。UIデザインツールは他にもAdobe XDやSketchなどがメジャーですが、Figmaはイン

もっとみる
Auto layoutとVariantsの効果的な使い方

Auto layoutとVariantsの効果的な使い方

こんにちは。
株式会社アジケでUIアシスタントデザイナーをしている山本です。

Figmaをメインツールとして使い始めて半年経ち、基本的な操作に慣れてきました。
そんな中、1ヶ月前くらいにFigmaのAuto layoutとVariants機能を使うことになり、最初は「難しそう…できるかな…」と不安だったのですが、
やっていくうちに「こんなに便利なの…?使うの楽しい…!」となり
今では、この2つの

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

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

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

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

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

figmarkを作りました。

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

もっとみる
SaaSデザイナーがすすめる、業務が効率化するFigmaプラグイン8選

SaaSデザイナーがすすめる、業務が効率化するFigmaプラグイン8選

こんにちは。アルプのデザイナーの大澤(@Tadaki)です。

サブスクリプションの契約や請求の管理を SaaS として提供する Scalebase というプロダクトのデザイナーをしています。

Scalebase もそうですが、SaaS プロダクトだと実データを用意するのが大変だったり、細かなデータの修正・整形が多くプラグインなしで作業するとかなり労力が必要かと思います。

もうすでに使っている

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

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

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

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

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

もっとみる
NewsPicks UIデザイナーのFigma利用フロー大公開!

NewsPicks UIデザイナーのFigma利用フロー大公開!

自己紹介NewsPicksでUIデザイナーをしております。つづく(ひらい) ともこと申します!

初note投稿なので、本題に入る前に軽く自己紹介をさせていただきますm

2016年に武蔵野美術大学デザイン情報学科卒業後、ヤフー株式会社に新卒デザイナーとして入社しました。
ヤフーでは広告管理ツールのUIデザインやCtoCサービスアプリのデザインなどに携わりました。

そして今年の6月末でヤフーを退

もっとみる
Figma信者なデザイナーが『Figma for UIデザイン』を読んだら新たな学びがあった話

Figma信者なデザイナーが『Figma for UIデザイン』を読んだら新たな学びがあった話

こんにちは!NewsPicks プロダクトデザイナーのつづくです!
今回は2022年6月10日に発売された『Figma for UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ』を拝読しての新たな学びをまとめました。

拝読しての感想拝読してのざっくりの印象は、全体的にFigmaビギナー寄りの内容としてわかりやすくまとまっている本だと思いました。
Figmaの名前を界隈でよく聞く

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

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

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

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

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

もっとみる
Figmaのライブラリー機能を使う

Figmaのライブラリー機能を使う

株式会社アンドパッドでUIデザイナーをしている、よつくらです。

デザインシステムの構築などにあたって、Figmaのライブラリー機能をすでに活用されている組織も多いとは思います。しかし実はライブラリー機能のヘルプページはまだ日本語に翻訳されておらず、完全に理解せずなんとなく利用しているメンバーも多いのではないでしょうか。
ライブラリーの作成は有識者が行っている場合も多いのではないかと思い、今回は「

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

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

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

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

もっとみる