マガジンのカバー画像

FigMAGAZINE

85
本
Figmaに関する記事をまとめています。
運営しているクリエイター
saitokensuke

#UIデザイン

BASE流、Figmaの付き合い方【Figmaをチームでワークさせるための方法】

こんにちは。BASEのデザインチームです。 2023年11月から2024年3月にかけて計4回にわたり、BASEのデザイナー2名が「BASE流、Figmaの付き合い方」をCreatorZineさんに寄稿させていただきました。 この連載を通じて、オウンドメディア以外でアウトプットをするという貴重な経験をさせていただきました。 今回は、CreatorZineさんへ寄稿させていただいた連載記事がそれぞれどのような内容だったのか、かんたんにご紹介します。 また、CreatorZin

BASE DESIGN…

実案件におけるFigmaでのデザインデータの作り方・運用方法

日々更新されるFigmaのデザインデータ。 どのように作り、管理・運用するのが良いのか、まだこれがベストとは言えないが、現在やっている方法をまとめてみる。 （※2024年1月に開催されたFoF Okinawa #3 Figma LT＆交流会で発表したものを記事化した） 僕はいま株式会社バックムーンさんと地域の情報をシェアするSNS「Memii」というアプリのデザインをお手伝いしており、今回はこのアプリのデザインデータの運用方法を紹介する。 ページ分けまずはページ分け。 F

きぬ

エンジニアが嬉しいアイコンファイルの作り方[Figma]

FigmaでUIデザインをする際に使うアイコンファイルの作り方に関して、エンジニア目線で見た時に「こういう作り方だったら助かる🙏」というポイントをまとめています。 アイコンコンポーネントを作成するアイコンはすべてコンポーネント化します。コンポーネント化することで、どんなアイコンが存在するのかがわかりやすくなり、一覧性が高くなります。 コンポーネント化しておくことで、デザイン作業時にも、アイコンを変更したい時はアイコンコンポーネントを切り替えるだけでいいですし、Instan

kiiita

Chat GPTを使ってFigmaの面倒な作業を自動化する

この記事は、Figma Advent Calendar 2023の11日目の記事です。 最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。 きっかけエンジニアとの振り返りMTGで、こんな相談を受けました。 解決策はいくつか考えられます。 目視でカウントする Figmaのデザインシステムアナリティクス機能を使う 既存のプラグインを使ってカウントする プラグ

鈴木慎吾 / TSUM…

もう迷わない！Figmaのマスターデータ管理の最適解

参考記事：Figma｜Team, project, and file organization はじめにマスターデータをうまく管理できるFigmaのファイル構造は、長い間、私の大きな悩みの種でした。 マスターのデータ更新作業は時間がかかったり、更新タイミングを延ばしてしまったり...「正解はいったい何だろう？」と常に探していました。 しかし、その方法は見つからず、まるで手の届かない夢のように思えました… そんな中、Figmaの記事「Team, project, and f

荒川洋人 / hiro…

【Figmaプラグインを60個試した結果...】 本気で使えるプラグイン8選 !

こんにちは！Link-UのUIチームです！ いよいよ夏が始まりそうでワクワクしています！梅雨は終わったのかな？ 今回の記事の内容は….. 60個の様々なFigmaのプラグインを試した結果、実際に私が日常の業務に取り入れているプラグインをご紹介します！ あまり他の紹介記事では見かけない、とても便利なプラグインを選抜しております。使いこなせると便利かも!? という番外編もありますので、最後までお楽しみください〜！ 01 : Contrastコントラスト比を判定してくれるプラグ

Link-U Crea…

【Figma】開発モード：できること総まとめ

「Figmaの2022年夏〜23年夏の新機能を扱うシリーズ」、今回は開発モード編です。 この記事は、2022年に自費出版で発売した『ちょっとできる人向けFigma本』のための追加コンテンツです。 この記事単体で読んでもらえるようにもしています！ ※2023年8月末時点の変更点や新機能を扱っていますが、間違い・アップデートなどありましたらお知らせください！ 『ちょっとできる人向けFigma本』の該当箇所……p27 「開発モード」はFigmaの歴史の中でもけっこう大きな追

相原典佳

Figmaの「バリアブル機能」を使ってリアルなECサイトを作ってみる

こんにちは！メグリアのUIデザイナーの石井です。 Figmaユーザーの皆さんはFigmaの新機能に触れてみましたか？今夏2023年6月21‐22日にConfig 2023が3年ぶりに開催され、Figmaの大幅なアップデートが発表されました。 既存機能のアップデートであるオートレイアウトやフォントの選定など、やっとキター！という思いで早速恩恵を受けることができました。 ところで、バリアブル機能ってなに？ 中でも話題を呼んでいる「バリアブル機能」。実際どうやって使用するの

メグリア株式会社

エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法

こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェク

ShikiCheri/…

Figma の Variants をベースコンポーネントでメンテナンスしやすくする

Variants は大変便利な機能ですが、コンポーネントの状態が増えてくると組合せ爆発が起こり、ものすごい数になっていきます。 そうやって頑張って作ったコンポーネントの Variants に変更が入った時に一つ一つ変更を加えていくのは中々の苦行ですし、変更漏れが起こる可能性もあります。 そんな時に便利なのが「ベースコンポーネント」です。 発想は至極シンプルで Variants で定義されるコンポーネントのデフォルト状態ものをコンポーネントとして作り、Variants の一

seya

Figmaを使ったダークモードの対応プロセス

こんにちは、stand.fm デザイナーの加藤です。今回はver.1.77.0でダークモード機能をリリースするにあたってどのように設計したか紹介しようと思います。 なぜダークモードを提供するのかstand.fmはこれまでライトモードのみアプリを提供してきました。しかし深夜帯にアプリを利用するユーザーも多く「白ベースのデザインは眩しいのでダークカラーで提供して欲しい」との要望が多く届いていました。 音声アプリや音楽アプリの中にはダークカラーでのみをアプリを提供しているアプリも

stand.fm テッ…

Figma Organization Planはじめました

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

J

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

こんにちは、NewsPicks UIデザイナーの早河です。 GWはいかがお過ごしでしたか？ 私は Figma プラグインの整理をしていました。 とりあえずインストールしてみたものの、使わなかったり / 存在すら忘れていたものを削除して、浮かび上がったいつもお世話になっている選りすぐり10個のプラグインをこの機会に紹介させていただければと思います。 普段の業務やワークフローによって、必要となるプラグインは違うと思いますが、Figma を使って UI デザインする上で必要不

hayakawa yu

Figmaがもっと楽しくなる！プロトタイプでアコーディオンUIを表現する方法

こんにちは。 株式会社アジケでUIデザイナーをしているやまもとです。 約2ヶ月ぶりにnoteを書いていますが、今回はFigma How to記事になります！ 少し前にプロトタイプを制作する機会があり、その時習得したプロトタイプでアコーディオンUIを表現する方法を書いていきたいと思います。 約1年前にFigmaの記事を書いた時はAuto layoutとVariantsについて書きましたのでそちらも是非読んでみてください！ 今回のゴールこのような開閉するアコーディオンをF

Kotoko Yama…