FigMAGAZINE｜saitokensuke

デザインファイルにおける命名規則を策定した話【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

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

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

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

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

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

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

Figma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話

Findyでプロダクトデザインとデザインシステム構築に取り組んでいる🐰です。前回はFigma Slot記事を沢山の方に読んでいただきありがとうございました。今回はFigma Variablesを活用したらエンジニアとのコミュニケーションがスムーズになった話について自分用メモ含め残しておきたいと思います。デザインシステムのトークンとはそもそもトークンとは色、フォントスタイル、余白等の値を表すキーと値のペアになっており、デザインシステムを構成する要素です。トークンで管理す

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

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

【Webデザイン】PhotoshopとFigmaで作り比べ

「いつかはFigma、そろそろFigma」遅ればせながら、Figmaの波にやっと真っ向から向き合う決意をしました。 PhotoshopとWebデザイナーの道を歩んではや○年… 「どっぷりフォトショ信者のWebデザイナーがFigmaを使ってみた！」感想がこちらです。まずは学ぶ「感覚でなんとかなるだろ〜」と、Adobe製品を触るテンションでFigmaでの制作を試みましたが、XDをすっ飛ばしてのFigmaというのもあり、その安直な姿勢は即打ち砕かれました（笑）画面構成を見て

FigMAGAZINE

フォローしませんか？

記事一覧