マガジンのカバー画像

Figma のまとめ

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

#UI

FigmaのAutoLayoutで折り返しできる「Wrap」と「Min/Max」の使い方

今回は2023年6月22日に開催されたFigmaが主催するイベント「Config 2023」で発表された。今週のデザトレ(弊社のデザイン部で毎週行われているデザイン勉強会)でチームと一緒にFigmaのオートレイアウトについての新機能ついて学んでみました。

Wrap(折り返す): フレームを縮小すると、オートレイアウト(Auto layout)という自動的にコンテンツを整列させる。

Min/Ma

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

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

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

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

もっとみる
XDユーザーのお困りごと6選 - Figmaを使えるようになろう! vol.2

XDユーザーのお困りごと6選 - Figmaを使えるようになろう! vol.2

こんにちは。デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage(くらげ)株式会社のデザインチーム、Figmaをバリバリ使ってきたガッキー🙋‍♀️と、XDからFigmaに乗り換えたナンシー🙋🏻‍♀️ です。

crageでは今までメインツールとしてXDを利用してきました。今は徐々にFigmaに移行中です。

そんなcrageでは、Fig

もっとみる
Figma Library外科手術

Figma Library外科手術

フリーランス&Goodpatch Anywhereで、グラフィックやUIデザインなど見た目周りを専門にデザインしているハマダナヲミと申します。文字とビールが好きです。(フェスではハイネケンに乾杯し、W杯では自宅からバドワイザーを応援し、ご飯を食べに行ったお店にモレッティがあれば迷わず注文します。)

みなさまFigma使ってますか!かつてPhotoshopと添い遂げるんやとばかり思っていたAdob

もっとみる
アップデート分も含めて、FigmaのAutoLayoutを完全に理解する

アップデート分も含めて、FigmaのAutoLayoutを完全に理解する

Figma config 2022でも発表、アップデートされた新機能をちゃんと理解するために使ってみて、個人の主観も入れつつ内容をまとめてみます。

adobeに買収後にFigmaとXDの関係がどうなるかは気になりますが、もし将来統合されたとしてもFigmaのAutoLayoutは残ってほしいし、XDのリピートグリッドも残ってほしい(line-heightまわりはXDさんはちょっかい出さないで)。

もっとみる
Figma Organization Planはじめました

Figma Organization Planはじめました

タイトル通りではありますが、2022年8月にFigmaのプランをProからOrganization に変更しました。その過程で検討したこと・今も模索してることを書き記したメモです。
いろいろ漁ってみたもののなかなか契約してる会社さんが少なかったりしたので、どこかのだれかに役立てば幸いですし、検討してる会社さんとかで聞きたいことあればぜひお話しましょー!

あと、使いこなしてる会社さんいらっしゃった

もっとみる
Figma Component Properties 、最強に噛み砕いてみた

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

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

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

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

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

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

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

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

iOS/iPadOS 13 Design UI Kit

Material3 Design Kit

Materia

もっとみる
実装しやすいFigmaファイルの作り方

実装しやすいFigmaファイルの作り方

こんにちは。UIデザイナーのカヒブンです。

UIデザイナーとして、見た目が綺麗、ユーザーの使いやすい画面を設計するだけではなくて、実装のしやすさ・工数も考えた上で設計するのが大事です。今回は実装しやすいデザインデータの作り方ついて話したいと思います。

ここでは、私がFigmaを使う際、実装側の立場に立って考える癖を説明します。

実装しやすいデザインデータ・レイヤーがGroupだらけではない。

もっとみる
コラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips

コラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips

私が所属している Goodpatch Anywhere はフルリモートのチームなので、メンバー同士は実際には会ったことがない場合がほとんど。でも Figma を使って、実際に隣の席にいる以上に、お互いの作業を共有しながらデザイン制作を進めていきます。

今回はそんなコラボレーションを加速させる Figma にさらにターボがかかるかもしれない Tips を書きたいと思います!

※記事中の表記は M

もっとみる
はじめから丁寧に! ノンデザイナーのためのFigma説明書

はじめから丁寧に! ノンデザイナーのためのFigma説明書

Figmaでできることを、はじめから丁寧にご紹介したいnoteです。

私界隈でFigma需要が高まりつつある昨今、勉強手段があまり多くなくまとまった情報も少ないので、なにか取っ掛かりになればと思い立ちました。

簡単な図を作成したいだけなんだけど使い方がわからない、デザイナーじゃないけどある程度Figmaを使えるようになりたい、という方の参考になればうれしいです。

画面の見方まずは画面の見方に

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

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

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

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

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

もっとみる
勉強になったFigmaのデザインシステム8選

勉強になったFigmaのデザインシステム8選

おひさしぶりです🔅

最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました....
(toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....)

先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...!そして、Twitterなどで各社、各サービスがF

もっとみる
プロダクトデザイナーがオススメするFigmaプラグインまとめ

プロダクトデザイナーがオススメするFigmaプラグインまとめ

こんにちは。Sansanでプロダクトデザイナーをしているごあんです。
最近、チームでより快適にFigmaを運用するためにあれこれ整備を進めています。その1つとして、各メンバーがよく使うプラグインを共有し合い、

💡 より多くのメンバーが使っている
💡 業務効率がアップする(弊社の場合)
  ex) 仕様検討やデザインパターンの量産など

といった視点で、簡単な概要や「新入社員に対するオススメ度

もっとみる