Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA
アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？ そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると
細かすぎ…？FigmaやWebで文字の表示位置がズレる問題を知っておこう - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2023 15日目の記事です。 株式会社グッドパッチでエンジニアをしているちげと申します。Strap というオンラインホワイトボードサービスの開発に携わっています。最近は小学生時代にハマっていたレゴを触って懐かしさと構造設計の奥深さに浸っています。 product.strap.app 今回はFigmaやWebで文字の表示位置がズレるいくつかの問題について取り上げて解説したいと思います。 時間がない人向けサク読み ハーフリーディングを削ることで、文字をぴったり上揃えできる。※(行間の高さ - フォントサイズ) ÷ 2 = ハーフリーディング Figmaのトリミング機能は現状Webでは実装できない。 Figmaが小数点以下のピクセルを四捨五入する影響で、Webの実装と 0.Npx 分ズレたり、完璧に中央に揃わなかったりする。 上記の
デザインの公共性 | Figma Blog
デジタル技術をユーザーフレンドリーにするためには、デザインの力が欠かせません。表層的な部分のみならず、サービス全体のデザインから携わり、さらにそのナレッジを共有していくことでよりスマートな課題解決に結びつけられます。 デジタル庁では、Figmaのデザインプラットフォームなどの各種ツールを導入し、誰一人残されない、人にやさしいデジタル化に取り組んでいます。ここでは、Figmaが主催「デザイン経営2023」カンファレンスから、デジタル庁 サービスデザインユニットのマネジャーを務める鈴木伸緒氏講演内容を抜粋し、行政におけるデザインの役割についてご紹介します。 イントロダクション日本の行政サービスのデジタル化を推進する組織として、2022年に発足した『デジタル庁』。そのミッション「誰一人取り残されない、人に優しいデジタル化を。」のもとに、省庁や自治体をまたいだデータ連携や、デジタル技術を用いた安全
カラーパレット設計ツールのJSONをFigmaのVariablesに取り込むプラグインをつくりました｜Hiroki Tani
このFigmaプラグインは何？このプラグインはメジャーなカラーパレット設計のツールからExportできるJSONを、FigmaのVariablesに取り込むプラグインです。 2023年11月11日時点で対応しているのは下記です。 Primer Prism Huetone それぞれのツールの補足も一応書いておきます。 Primer Prism PrismはGitHubのデザインシステムであるPrimerのチームが開発したツールです。HSLの値あるいはカーブを操作して色を決められます。また同じ色相の組み合わせをWCAG 2系のコントラスト比を元に評価できます。彼らの設計に基づくツールなので、柔軟性はないですがシンプルなツールと言えます。 Exportする方法Exportは画面の右上にあるExportからできます。表示されるJSONをクリップボードにコピーしてください。 Figma Variab
エンジニア直伝！デザイン&実装の両観点で最適な「積むUIレイアウト」の制作方法｜ShikiCheri/C-C-C
こんにちは、@ShikiCheriです。 現在フリーランスのUIUXデザイナーをやっており、単発案件ではなく長期的に組織や事業にコミットするような形で、サービス開発のデザインを中心に担当しています。 デザインシステム構築を担当したことでUIデザインの最適解について目から鱗が落ちた…！？クックパッドは25年のサービスの歴史があり、特にWeb版は今でも現役で活用されているサービスです。私はこの長寿サービスWeb版クックパッドのUIのリニューアルを行いました。 またこのプロジェクトと同時に、webに限らずアプリも含めたサービス全体の体験を統一するためのデザインシステムの構築を担当しました。 Apron - Figma Community これらのプロジェクトを推進する際、デザイン×開発の架け橋的存在であるUXエンジニアのむーさん、実装もできるデザイナーのけんけんさん、TOFUWORKSさんと共に
FigmaのPaddingやカーソル移動のデフォルト値を設定する方法 | wentz-design.com
今回はFigmaでオブジェクトをカーソル移動するときや、Auto layout使用時にPaddingに設定される値（10px）などの初期値を変更する方法を紹介します。デザインシステムなどを利用していて4や8の倍数を基準にしたい場合などにおすすめです。 この記事のターゲットFigmaのカーソル移動の初期値を変えたい方 Auto layoutのPaddingの初期値を変えたい方 「Nudge amount」のデフォルト値を変更するカーソル移動やAuto layoutのPaddingに適用される初期値は「Nudge amount」で設定された値が参照されます。設定の変更方法は以下の通りです。 ツールバーの一番左のFigmaアイコンをクリック メニューの「Preference」から「Nudge amount...」を選択する Nudge amountのダイアログで値を設定する Small nudg
FigmaでInstance内の画像を入れ替える。
UI（ユーザーインターフェース）デザインツールというと、SketchやAdobe XDの他に、Figmaというツールもよく名前が上がります。 改めて、UIデザインツールのシェアについて調査中！ご協力お願いします！（その他が多ければ集計し直します） 【あなたはどのUIデザインツールを使っていますか？】 — Web Design Trends (@TrendWebDesign) 2018年7月12日 トライデントコンピュータ専門学校Webデザイン学校では、「Webデザイン」の授業で利用するパソコンのOSがまだWindows7だったりします。 Photoshop, Illustratorを使用するには問題ないのですが、UIデザインツールといえば上位に上がるSketchもAdobe XDも利用できません。 そこで、2018年度はこのFigmaでUIデザイン＆プロトタイピングを学習しました。 導入当
Figma のデータ、少し楽になるかもしれない作り方 - Qiita
この記事の概要 variants や component properties など、Figma でのデータ作りには様々なテクニックがあります。 この記事では、少しニッチなシチュエーションにおいて、楽にデータを作れる方法を紹介します。 フォーカスリング付きの UI 以下の画像のように、通常時のボタンと、フォーカスが当たったときのボタンを作成したいとします。 このとき、アウトラインのオフセット表現は、通常の Stroke では実現できません。 そこで Absolute position と Constraintsを使います。 まず通常時のボタンはこのような構成です。 至って普通の作り方です。 次に、フォーカスリング付きのボタンの構成です。 元のボタンよりもひとまわり（ここでは上下左右それぞれ 3px ずつ）大きい四角形を作り、Absolute position で配置しました。 そして Co
イラストレーション・アイコン素材｜デジタル庁
素材集の活用で、行政手続きをもっとわかりやすく専門的でわかりにくい行政手続きの改善へマイナンバーに関連するデジタル手続は専門用語が多く、イラストレーションやアイコンなどを活用して、ひと目でわかりやすく伝える必要があります。しかし、これまでは政府として公式に配布する専用の素材がありませんでした。 そのため、地方自治体や民間サービスの方々が独自に作成する必要があり、表現が伝え手によってバラバラになる課題を抱えていました。 コストを抑えて、わかりやすい表現が可能にイラストレーションやアイコン素材の作成には、専門的な知識と多くの時間が必要です。視認性が高く保たれているか？ 日本に暮らす人、訪れる人が理解しやすい表現になっているか？ など、さまざまな検討事項があります。どなたでもご利用できる素材を配布することで、別々の機関が同じものを制作したり、検討する時間を省くことができます。 また同時に、素材制
Token StudioとTailwindを導入しているプロジェクトでFigma Variablesをどう使っていくか｜kiiita
こんにちは。UIデザイナーとフロントエンドエンジニアとしてフリーランスでお仕事をさせていただいている北國です。 今携わっているプロジェクトが複数ありますが、以下のようなプロジェクトが多いです。 FigmaにToken Studioプラグインを導入している Webフロントエンド開発にTailwind CSSを導入している 双方において、デザイントークンをベースとした設計・管理をしている 2023年6月のFigma Configにて発表された新機能の中にVariablesという機能があります。Token Studioを使っているプロジェクトでは、Token StudioとVariablesの役割分担を考える必要が出てきました。 今後の方向性の候補は3つです。 このままToken Studioを基幹としてデザイントークンを管理する Variablesにすべて移行する Token StudioとV
Figma によるデザインシステム入門
本書は Figma によるデザインシステムコースの日本語訳になります。デザインシステムに興味がある人や構築しようとしている人もチェックしてみてください。デザインシステムに縁のないデザイナーや開発者のためにプロダクトと向き合った最適なデザインシステムを探求するための材料になれば嬉しく思います。 (原文 : https://help.figma.com/hc/en-us/sections/14548397990423-Course-Introduction-to-design-systems) この記事は、Figmaから許可を得た上で翻訳され、Brand Guidelineに則った内容となっております。(Brand Guideline: https://www.figma.com/ja/using-the-figma-brand/) ## 更新情報 [2023/7/1] - 表紙画像に、このコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tokyo Watch Party | Figma
Typography variables starter kit | Figma
https://frameworkjp-irl.splashthat.com/
デザインと開発の生産性向上: Figma APIによる自動化とプラグイン開発
https://twitter.com/AmebaSpindle/status/1749966947683594370
OkColor | Figma Community
JSON to Color Variables | Figma Community
The Figma Store
UI2: Figma's Design System | Figma