FigMAGAZINE｜saitokensuke

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

こんにちは！UXデザイナーのトリバコです。以前「【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というのもあり、その安直な姿勢は即打ち砕かれました（笑）画面構成を見て

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

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

FigmaのDev Modeは2024年以降、誰がいくらで使えるのかまとめてみた

魅力的すぎるDev Mode…自分が開発する際にも使いたいし、日頃一緒に開発しているエンジニアの皆さんにも幸せになってもらいたい…！会社で使えるように布教するぞ！と思い立ったのですが、どうやら2024年からは無料では使えなくなるとのことで、結局どのプランでいくらで使えるのか、布教する際にお金周りのこともきちんと説明できる必要がある！これを機にきちんと把握しよう！ということで、現時点でわかっている情報を説明する資料兼自分の覚書用にまとめてみました。この記事を読んでも

FigMAGAZINE

記事一覧