マガジンのカバー画像

Figma のまとめ

254
デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。
運営しているクリエイター

記事一覧

Figma の Component Properties を学ぶ

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で新しく追加された Component Properties によって UI コンポーネントをより再利用しやすい形で作ることが可能になりました。

この記事では Figma の Component Properties を使った UI コンポーネントについて、使い方とメリットなどについてまとめたいと思います。

もっとみる
😊最高に嬉しいです!

非デザイナーのためのFigma勉強会

こんにちは。HENNGEデザイナーのSaraです。
HENNGE Design Magazine第二弾では、社内で非デザイナー向けに開催したFigma勉強会の様子をご紹介します。

Figma勉強会の目的今回の勉強会ではチーム全員がFigma上でワイヤーフレームの作りかたを習得することを目的としました。ワイヤーフレームはチーム内の認識合わせに役に立ち、複雑な仕様が伴う機能の議論を効率よく進められま

もっとみる

小さな組織でのFigma活用 - Figma導入phase3

「デザイナー組織が整っていない環境で、Figmaをどのように活用していこう?」
「そもそもデザインチームで働いたことないし、どこから始めたらわからない!」

弊社では半年ほど前にFigmaを導入して、こんな悩みを抱えながら少しずつ整備を進めてきました。まだまだ絶賛常時模索中ですが、今回その模索から一旦ここ数ヶ月色々と試してようやくある程度型ができてきました。

(これまでの模索)

今回これらの模

もっとみる
嬉しいです!ありがとうございます😊🙌🏻

FigmaプラグインによるFigmaのハックとワークフローの強化

この記事は2022年5月11日に開催されたFigmaのカンファレンス『Config 2022』のセッション内容を記事として再編集した内容ものです

私は医療系テックスタートアップのUbie株式会社でデザインエンジニアをしている谷(@hiloki)です。
この記事では「デザイン業務を少し楽にしたい」そのために自らFigmaプラグインを作ってみたいと考えてもらえるような話をします。

Figmaの特長

もっとみる

「エンジニアに愛される Figma デザインの作り方」文字起こし

先日 Figma Config にて「エンジニアに愛される Figma デザインの作り方」というタイトルで発表をしました。

せっかくなのでもっと多くの人に内容をお届けできればなと思い立ったので文字起こししてみます。

「エンジニアに愛されるデザイン」とは?私は二つ大きい基準があると思っていて、それは

デザインの意図を掴みやすい

デザインが変わった時の変更が容易

があります。そして前者は S

もっとみる
ありがとうございます!

フロントエンドの開発を少し楽にするFigmaでのコンポーネントデザイン

こんにちは。
株式会社Caratでロボキャリアアドバイザーアプリ「GLIT」のUIデザインとフロントエンド開発を担当している北國です。

プロダクトを成長させる過程で日々機能の追加・変更・削除があるわけですが、UIデザイナーとしてはそれらの変更に強いFigmaファイルを作り、できるだけ無駄なUIデザインの工数(※1)を削減したいという想いがあります。

また、UIデザイナー目線だけではなく、フロン

もっとみる

Figma Config 2022 で新登場した機能のショートカット・テクニックまとめ

Figma Config 2022 でも様々な機能が出ました。
Individual Stroke, Absolute positioning, Component Properties…

これに付随してチュートリアルを見ただけでは分からない隠れたショートカットなどもたくさんあります。
この記事ではそんなテクニックたちをガッと紹介していきます。

パディングを昔ながらの一つの入力欄で操作する方法

もっとみる
ありがとうございます!

Figma Component Properties 、最強に噛み砕いてみた

どうも Figmate のみなさん。アプデで便利になった Component Properties、不慣れなせいかイマイチ分かりづらかったので完全に理解するまでのメモを共有したいと思います。

2022.6.21追記
より良い記事を見つけたのでこちらのほうがオススメです🥳

そもそも Properties って?とかフロントエンドとの垣根やその意義については有識者におまかせしつつ、小難しい話を置

もっとみる
ありがとうございます!

Figma Config 2022 で便利になった機能のおさらい

こんにちは、ふじけん(@kenshir0f)です。
Figma Config 2022 で大きめのアップデートが来て、何がどう機能が変わったのか追いきれなかったのでざっくりまとめたいと思います。

ダークモードの切り替えFigma でデザインするときのサイドバーなど、画面全体をダークモードにする機能が追加されました。白い画面の面積が大きいと少し目がつらかったので普通に嬉しいですね。

画面左上のメ

もっとみる
😁次もまた読んでください!

Figma に欠かせないプラグイン10選

こんにちは、NewsPicks UIデザイナーの早河です。

GWはいかがお過ごしでしたか?
私は Figma プラグインの整理をしていました。

とりあえずインストールしてみたものの、使わなかったり / 存在すら忘れていたものを削除して、浮かび上がったいつもお世話になっている選りすぐり10個のプラグインをこの機会に紹介させていただければと思います。

普段の業務やワークフローによって、必要となる

もっとみる
ありがとうございます!!!

Figma:editorが見る世界とviewerが見る世界の違いを知ろう

今日はFigmaで意外と忘れがちなこと、権限である「editor」と「viewer」でファイルの見え方が違うことのお話です。

Figmaはよく"コラボレーションツール"と紹介されることがあるくらい、他者との協働を意識しているデザインツールです。が、上記のような権限によってユーザーごとにできること・できないことが設定されています。

ここまでは皆さん十分ご存知だと思うのですが、ではeditorとv

もっとみる
いいんですか!

みんなとCreativeゲーム

こんにちは。デザイナーのティエンです。
今回は、チームで絵描きも練習できるクリエティブで面白いゲームを3つご紹介します。

今回はFigma上で行うので、リモートでもプレーできます。

ちなみに、ご紹介するゲームはDomestikaでのコースを参考にしました。
Domestikaというのはオンラインの有料コースで勉強できるサイトです。
UIデザインや3D、Animation、ビデオ、撮影、Make

もっとみる

FigmaのCommunityで参考になるデザインシステムまとめ

UIの勉強を進める中で、スタイルガイドの作成例からコンポーネントのまとめ方をまなぶべく、Figmaでチェックできるデザインシステムをリサーチしました。
大規模システム用のデザインシステムと、小規模のものとに分けてご紹介します。

👇大規模アプリ・詳細なコンポーネント群を作りたい

iOS/iPadOS 13 Design UI Kit

Material3 Design Kit

Materia

もっとみる

Figmaのslack通知を再びチャンネルに流せるようになったので導入してみた

本日2022年3月9日、Figmaからこんなお知らせが出ました。

Figma notifications, now in Slack channels
Figmaの通知をチャンネルで受け取れるようになりました

やったーーーーー!!!

Da Vinci Studio デザイン部では昔のインテグレーションの時代に「すべてのファイルについたコメントを流すチャンネル」を用意していまして、それによって

もっとみる
いいんですか!