マガジンのカバー画像

figma

54
本
運営しているクリエイター
megumi_s

#デザインシステム

FigmaではじめるUI（Web）デザイン｜Part1

Figma 3.0が発表されてから半年ほど経ち、実際にプロジェクトでFigmaを使用した際の知見や、tips的なものまで日本でも散見されるようになってきました。 そんな感じで良い具合に枯れ始めているデザインツールではあるのですが、まだまだ日本での記事は、経験者向けに「Figmaに乗り換えるメリット」とか「他のUIデザインツールとの比較」のような内容の記事が多く（人のこと言えないですが......）、初心者にはUIデザインのツールとしてはまだまだ馴染みの薄いツールなのかなと思

Nao Komura

Atomic Design と Figma の組み合わせでデザインが便利になる｜デザインシステムの作り方

スマートキャンプデザインブログ、デザイナー/エンジニアのhaguriです。 ユーザー体験の統一化のために大切な「デザインシステムの作り方」について紹介します。（スマートキャンプでもまだまだ模索中......） スマートキャンプでは、インサイドセールスに特化したCRM「Biscuet（ビスケット）」という新サービスを発表をしました。 まだ開発中のサービスですが、このBiscuet（ビスケット）のデザインシステムの考え方を紹介していきます。 上記のランディングページ（LP

スマートキャンプ　デザ…

【まずやること編】 #Sketch から #Figma にお引越し

すでにお引越しした方、もう少し深く知りたい方は 【チームライブラリ活用編】デザインシステムをFigmaでもっと強くする もあわせてドウゾ〜 ・・・ ノゾエ（@conoito）です。 今日は、みてねのデザインデータが移行されるまでをご紹介します。 移行完了までのイメージを掴むための参考にどうぞ！ ・・・ 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 あれから半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができて

nozoe | con…

【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする

【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう もあわせてドウゾ ・・・ ノゾエ（@conoito）です。 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。 今日は、Figmaに移行してから行なった、 コンポーネントの整備からスタイルの最適化、 さらには、最適化したデザインシステムをアプリに適用するまでを、もりっとお話

nozoe | con…

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

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

Hiroki Tani

【永久保存版】 デザインシステム「カラーパレット」を徹底調査しました

サービスのカラーパレットをバージョンアップさせるべく、デザインシステム「カラーパレット」を調べることになりました。 開発チームからの要望としては「どうせ新しくするなら、漏れのない状態を目指したいね」ということで、iOS/Androidのガイドラインから始めて、話題になっていたAmebaスピンドル、さらに他社のデザインシステムも含めて徹底的に調査しました。 先に調査結果ですが、大枠でまとめるとこのような形となりました。 ・色は、明度差も含めたトーンをパレットとして持ってお

Akinosuke

モバイルアプリ日本語UIキットの公開

この記事では、三菱UFJフィナンシャル・グループの戦略子会社であるJapan Digital Design（JDD）において、体験デザインを担うExperience Design Team（デザインチーム）の研究活動で作成したFigma用日本語UIキットについて紹介します。 JP + UI Kit とは？JP + UI Kitは、iOSとAndroidのモバイルアプリに対応したFigma用日本語UIキットです。AppleのHuman Interface Guidelines

Japan Digit…