FigMAGAZINE｜saitokensuke

4年ぶりにデザインシステムを大幅改善した話

こんにちは、10X プロダクトデザイナーの日比谷（@suuminbot）です。2週間前、人生で初めて梅干しを食べ、梅干しの美味しさに目覚めました。スーパーで買えるおすすめの梅干しがあったら教えてください。 🍙 🍙 🍙 2020年のStailerのサービスイン当初から使われている「Stailer デザインシステム」。入社して数年たち自分がそのデザインシステムを使う中で課題が複数あり、今後のより良いUXの実現のためにもなんとか改善できないか…とずっと考え機を伺っていました。

Figmaでバナータスクの工数を75%減らしてみた！

こんにちは！ロイヤル顧客プラットフォーム「coorum（コーラム）」を提供する、株式会社AsobicaのブランドデザインGrpに所属しています、町屋光成と申します。普段はコミュニケーションデザイナーとして、マーケティングコンテンツ領域をメインに、ブランドサイトやLP、バナーなどのWebコンテンツの作成や、展示会周りの印刷物などのデザイン業務を行なっております。 Asobicaでは、顧客中心の経営をスタンダードにすることをビジョンに掲げ、顧客理解・顧客体験の向上をテーマに、

Figmaマスターファイル運用をやめてみた

株式会社ダイニーでデザインマネージャーをやっている川上です。ダイニーのデザインチームでは、この師走の時期に一つの意思決定を行いました。それは、マスターファイルの運用をやめたことです。そこに至った経緯について書いていきます。マスターファイルを運用していた理由ダイニーでマスターファイルの運用をしていた理由は大きく3つありました。プロダクトの全画面を一望することで、全体像を俯瞰的に把握し、一貫性を保ちながら車輪の再発明を防ぎやすくなるため。新規デザインを作成する際に、

Why・What・HowをつなぐFigmaファイルの作り方

デザインファイルが分かりにくく、エンジニアにデザイン意図や仕様について質問されることはありませんか？デザインはただの中間産物で、実装して初めてoutputになり、ユーザーにデリバリーして初めて価値があります。プロダクトを一緒に作るメンバーにデザイン意図と仕様を正しく、分かりやく、伝えることがとても大事です。この記事では現場で実践しているデザインファイルの作り方を言語化してみました。少しでもデザインと開発のコミュニケーションで悩む方の助けになれれば嬉しいです。この記事は

デザインと開発の連携を支えるFigmaテンプレートの運用

2023〜2024年にかけて、社内のデザインと開発プロセスにおける課題解決に継続的に取り組みました。この記事では、その具体的な施策やFigmaテンプレートを使ったプロセスの改善について紹介します。同じようにデザインと開発プロセスの課題に取り組む方の助けになると嬉しいです。この記事は Figma Advent Calendar 2024 の12日目の記事です。背景と課題Figmaの導入社内では2021年ごろにSketchからFigmaに移行しました。 Figmaを

デザインファイルにおける命名規則を策定した話【Figma】

こんにちは、ほぼフルタイムのフリーランスとして株式会社mikanでデザイナーをしています、三上蒼太(@sota_mikami)です。英語アプリmikanは、もうすぐ10歳になる長寿アプリです。アプリ自体はシンプルさを保ち続けていますが、多くの実験が積み重ねられてきた歴史があります。ただその歴史ゆえに古い画面のデザインデータが一部なかったり、設計意図や当時の背景がわからず評価の難しい画面があったりと、デザインデータと意図を管理するための標準化が一つの重要な課題となっていま

ファイルが重くなりがちな長期プロジェクトでのFigmaファイル管理

Japan Digital Designの久行です。三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（以下JDD）でExperience Design Div.（以下XDD）に所属し、体験設計やUI・ビジュアルデザインのリードを担当しています。この記事では、XDDが取り組むプロジェクトの中で発生した困りごとを基に取り組んだFigmaファイル管理の改善活動についてご紹介します。デジタルプロダクト開発でお馴染みのデザインツールであ

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

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

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

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

【2023年】私的ベストFigma Plugins

こんにちは！デザイナーのトリバコです。以前「【2019年】私的ベストFigma Plugins」という記事を書きましたが、それから長いこと時間が経ち、私のプラグイン環境も変化してまいりました。今回は、現在使用しているプラグインを新たにご紹介していきたいと思います。 2019年の記事で取り上げたプラグインも多く使い続けていますが、今回は前回の記事で取り上げていないものに焦点を当ていきたいと思います。ぜひ、以前の記事と合わせご覧いただければ幸いです。また、有料前提の

Figmaでのフォントファイルによるアイコン管理のススメ

普段デザインツール上で「アイコン」を扱う際、多くの方がSVG形式のアイコンをインポートして作業を行っているのではないでしょうか。特にUIデザインをする場合は大量のアイコンを扱う必要があるため、作業を行う上でSVGファイルは必要不可欠な存在です。 SVGファイルは画像としての性質とテキスト (DOM) としての性質を併せ持っているため、様々なロールのクリエイターにとって扱いやすい形式のファイルです。一方でSVGファイルは誰でも簡単に書き換えることができるような扱いやすいデ

STUDIOで働くデザイナーの "Figma to STUDIO" 活用方法 | Design Journal vol. 26

これはなに？Figma Advent Calendar 2023 21日目の記事です。「Figma to STUDIO」とは、FigmaのデザインデータをSTUDIOにインポートできるFigmaプラグインです。2023年8月にベータ版、11月に正式リリースされました。ノーコードWeb制作プラットフォーム「STUDIO」を提供するSTUDIO株式会社のデザインチームが、実際のプロジェクトでどのように「Figma to STUDIO」を使っているかを解説しながら、使い方

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

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

¥150

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

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

FigMAGAZINE

フォローしませんか？

記事一覧