Figma｜Hiroki Tani

デザインシステムイベント Framework by Figma開催！

今週からFigma主催のデザインシステムイベントであるFramework by Figmaが開催されます。知る人ぞ知る、2022のSchema以来のデザインシステムをテーマとしたイベントです。今回のFrameworkでは、各社のデザインシステムの取り組み、デザイナーとエンジニアの連携などのベストプラクティスや、そしてFigmaからの新しいお知らせがあります。このお知らせは、Figmaを使っている皆さんにとって待望のアレかもしれません（？） Frameworkは各国で開

Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α

Figmaはデザイナー向けのUIデザインツールのように思われがちですが、Figmaを使ったプレゼンテーションスライドの作成や、デジタルホワイトボードツールのFigJamを活用したアイデア出しやプランニングなど幅広い用途があります。そして2月1日から正式版となったDev Mode（開発モード）は、デザインデータやその仕様を元にプロダクトを構築するための機能が備わっています。 Dev Modeは主にはコードを書く開発者にとって便利な機能があります。コード生成や、デザインの差分比

デザイン仕様が伝わるFigmaのデザインの作り方

FigmaでUIデザインをおこし、それを実装する人にハンドオフ（デザインデータを共有する）ときに、どのようなことに気をつけると良いかを書いてみます。多くの方がこの手の「実装者にやさしいデザインデータの作り方」のような記事を書いてくれていると思いますが、この記事ではFigmaに特化した内容となります。 Frame + Auto Layoutで構造的につくる実装を意識したデザインにおいては「構造化」というのは重要なポイントです。下記に並んでいるヘッダーは一見どちらも同じものです

カラーパレット設計ツールのJSONをFigmaのVariablesに取り込むプラグインをつくりました

JSON to Color VariablesこのFigmaプラグインは何？このプラグインはメジャーなカラーパレット設計のツールからExportできるJSONを、FigmaのVariablesに取り込むプラグインです。 2023年11月11日時点で対応しているのは下記です。 Primer Prism Huetone それぞれのツールの補足も一応書いておきます。 Primer PrismPrismはGitHubのデザインシステムであるPrimerのチームが開発したツー

UXデザインやUXリサーチに活用される『KA法』に使える『KAカード』のFigmaウィジェットをつくりました

タイトルの通りなのですが、KA法という定性調査の分析やモデリングに使われる手法で使われるアイテムをFigmaのウィジェットにしてみました。 KA法とは例えば「英語学習にお金や時間をかけている」人たちにユーザーインタビューを実施し、それらの記録から印象的・特徴的なことを抽出するにあたり、ユーザー調査により得た出来事ユーザーの心の声心の声に基づいた価値といった雛形にしたがって書き出します。例として適切な抽出かわからないですが、次のようなものです。インタビュー

FigJamのTableをSticky notesに変換するプラグインをつくりました

このプラグインはFigJamに新しく登場したTableをSticky notesに変えるというシンプルなプラグインです。プラグインを作った背景たまたまTwitterを見ていたときに次のようなTweetを見かけました。このFigJamのTableの登場によって、SpreadsheetなどのセルをコピーしてFigJamに貼り付けるとSticky notesになるという仕様が変更され、Tableになるようになりました。そこから色々とユーザーの声を探ってみると、という

10 Days of Figma Tips: FigmaのAdvocateによる10のTips

12月といえばアドベントカレンダーが盛んですが、FigmaからはTipsをFigmaのAdvocateの皆さんが10日間にわたって紹介するコンテンツを公開していました。 TipsはちょっとずつFigma Communityに公開され、プロトタイプでプレゼントを開封するようなアニメーションで演出しています。中身は紹介メッセージ付きの動画になっていますが、このFigmaのプロトタイプ上でじっくりみるのは難しいので、すべてYouTubeでも公開されています。この記事では各Ti

Figmaファイルのサムネイル表示をハックする

この記事は、Figmaを使ったコラボレーションUPの方法（社内・チーム内等）by Figma Advent Calendar 2022の12/6の記事です。 FigmaファイルのThumbnail表示はどうつくるのがいい？Figmaファイルのサムネイルというのは、ダッシュボードやプロジェクトに並べられるFigmaの各ファイルのサムネイル表示のことです。このサムネイルの表示はひと目みて「何のファイルか」を識別するのに重要なのですが、この表示部分を上手く利用する例がいくつか

Figmaで使えるやや高機能な付箋Widgetを作りました

そもそもWidgetって？Figma WidgetはFigmaのホワイトボードツールであるFigJamで使えてた機能です。Pluginとは異なり、Figmaのファイル上にコンポーネントのひとつのように表示することができ、自分以外のユーザーからみても閲覧・操作ができるものです。このWidgetがFigJamでしか使えなかったのですが、2022年6月からFigmaでも使えるようになりました。 Annotation Sticky Notes今回つくった『Annotation

FigmaプラグインによるFigmaのハックとワークフローの強化

この記事は2022年5月11日に開催されたFigmaのカンファレンス『Config 2022』のセッション内容を記事として再編集した内容ものです私は医療系テックスタートアップのUbie株式会社でデザインエンジニアをしている谷（@hiloki）です。この記事では「デザイン業務を少し楽にしたい」そのために自らFigmaプラグインを作ってみたいと考えてもらえるような話をします。 Figmaの特長FigmaにはAuto LayoutやコンポーネントのVariants、チームで

色のコントラスト比をグリッド表示で一覧化できるFigmaプラグイン「Contrast Grid」をつくりました

ダウンロードはFigma Comminityから。どういう動作をするものかは下記の動画でご覧ください。このプラグインの元はEightShapes社が数年前につくったContrast Gridです。背景色と前景色を入力すると、それらの組み合わせとそのコントラスト比をグリッドで表示してくれるツールです。 WCAGの達成基準1.4.3にある4.5:1というコントラスト比を保てる色の組み合わせを探すのに使えるひとつの方法とツールではあるんですが、Figmaでの作業で効率的に

色とテキストスタイルのスタイルガイドを一発で生成するFigmaプラグインつくりました

FigmaのColor StylesとText Stylesをそれっぽいスタイルガイドとして生成するプラグインをつくりました。それぞれ別のプラグインで、Colorのほうは Color Styleguide、TextのほうはTypography Styleguideという名前で公開しています。動作は下記の動画から。デザインシステムやガイドラインをつくるときに、この手のカタログのようなものを手作業でつくることがそれなりにあるので、それを自動化したく作りました。利用方法

キャンバスの要素からVariablesを一括で登録するFigmaプラグイン、Variables generatorをつくりました

キャンバスに展開したRectangleの色をVariablesを一括に登録するプラグインです。動作はこんな感じです。プラグインはこちら。プラグインの利点通常Variablesは一つずつCollectionとして登録するか、あるいは既存の要素の塗りの色などから登録することになります。このプラグインではキャンバス上で視覚的にカラーパレットをRectangleでつくり、それらを選択してプラグインを実行すればそれがVariablesとして登録されるようなイメージです。特長と

Figma

記事一覧