Figma Dev ModeとVariablesでデザイナーとエンジニアの連携を強化
✅ Dev Mode利用可 ❎ Dev Mode利用不可 2. Figma Variables Figmaで使える変数のことで、デザイン内で使用されるColor、Paddingなどの数値をVariablesとして定義し、一元管理が可能となります。Light/Darkに代表されるテーマ切替やコンポーネントのステータスやフォームのバリデーションなどを見越して、UIツールキット「Astro」にVariablesを取り込んでみました。 Variablesを取り込みたい理由 今までのFigmaの指定では、Figma上のColor指定と、CSS Variablesのネーミングにズレがあり分かりづらく困っていました。Figma側ではデザインシステムでStyles設定したカラーパレットを用い Thema/Primary という名前で登録していました。しかし、CSSではカラーに対して色の意味より具体的
Figmaの作業を効率化！ 知らないと損するショートカット集 - ICS MEDIA
ウェブ制作における定番になりつつあるデザインツール「Figma」。本記事では、Figmaの知らないと損するショートカットキーを紹介します。 よく使う便利な機能を呼び出すショートカットキーを覚えておくことで、作業効率が上がるのでしっかり覚えていきましょう。 本記事では基本機能のショートカットキーだけでなくマニアックなものまで紹介します。初心者はもちろん普段からFigmaを利用している方にも役立つ内容をまとめています。 ショートカットキー一覧の呼び出し（control+shift+?） Figmaでは、見やすいショートカットキー一覧をいつでも表示できます。ショートカットキーを忘れてしまった場合には、control+shift+?(macOS) /control+shift+?(Windows)を押しましょう。 画面下部にショートカット一覧が表示されます。使ったことのあるショートカットは色が付き
FigGPT | Figma
Write copy with ChatGPT in Figma or FigJam! 🎉 🚀 Quick actions: Easily change the style, length, or formatting of text in just one click.🎨 Custom actions: Create your own personalized quick actions.🌍 Multilingual output: Supports over 40 languages.✨ Magic Populate (Alpha): A magic button that fill...
Tokens Studio(Figma Tokens) で小さくはじめるデザインシステム
📝 はじめに こんにちは犬です。 デザインシステムをはじめる上で、 Figma の神プラグインを見つけたので共有します！ わたしが携わっているプロジェクトでは、エンジニアとデザイナーの双方向のコミュニケーションツールとして Figma Tokens を採用しています。 📝 Figma本体 だけでは実現が難しい色の管理手法 Figma と フロントエンド実装時の色の管理については以下のように取り決めました。 # 色の定義と利用方法 1. Primitive colors を定義 ここで定義した色をサイト全体で使用する。 ※ 定義はするものの、全ての色をサイト全体で利用するとは限らない。 基本色（赤、黄、青、、、など）からアルファ値や彩度、明度を機械的に算出して全カラーパレットを作成。機械的に出した色に微妙なものがあった場合は微調整する Primitive colors の例 red.10
Figma で メンテしやすいテーブルを作る
始めに 画面仕様を作る時に、プロダクトの将来の変更に強くなるように再利用性を高く作っていくことは重要です。最近は、Figmaを使って画面仕様を落とすことが多く、その中でも表形式のリストテーブルを作ることがよくあります。この記事では、自分なりのメンテ性の高いリストテーブルの作り方を紹介していきます。 今回つくった Figma ファイルは こちら メンテ性が高いとは? メンテ性が高い状態とは、将来の変更に強いこと だと自分は考えています。 今回作っていくリストテーブルについて言うと、 カラムの増減が容易にできる テーブルの行数の変更が容易である 埋め込んだ際自動でサイズ調整をしてくれる これらかなと考えています。 それでは、これらの特徴を踏まえたテーブルの作り方をみていきたいと思います。 作る物 今回は、Material Design の Data Table を真似て作っていきます 手順 テ
LAUNCHED: Wrap elements in Auto Layout to multiple lines
It would be really great if there was an option in an auto layout frame where the frame would wrap the objects to the next line. Like this. Objects would respect the padding set in the Auto layout. Update: 2021-11-02T04:00:00Z This is now the #2 most voted feature next to support for RTL language support. It would be nice if Figma had a feature to mark that a request like this is currently being d
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
デザインの管理と効率化が行える FigmaのComponents入門 - ICS MEDIA
ウェブ制作の現場で接する機会が増えてきているデザインツール「Figma」。前回の記事『FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう』では、デザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」機能を紹介しました。 本記事ではデザインパーツの管理や柔軟な変更が可能になる「Components」について詳しく紹介します。Componentsを使い、何度も出てくる要素を管理すると、制作が効率よく進められます。 この記事は、次のような方々にオススメの内容となっています。 デザイナー 同じグラフィックをいつもコピペで複製している方 Components機能の使い方やルールに不安のある方 エンジニア デザイナーから受け取ったデザインにComponents機能が使われいて、参照方法がわからない方 コーディングで、Componentsのル
FigmaのAuto layoutはspace betweenもできるよっていう話｜unotovive（おとべ）
こんにちは、おとべです。ゆめみでデザイナーに社内転職して気づけば半年が経過しました。 さて、Figmaヘビーユーザーのみなさま、Auto layoutはもちろん使っていると思うのですが、Auto layoutのココ、いじったことありますか？ あります。使いこなしています。という方はこの記事をTwitterに共有してそっと閉じてください。 無い！というかそんな選択しあったんか！！っていう方に向けてAuto layoutの「Space between」について紹介していきたいと思います。 Auto layoutおさらいSpace betweenの前に普通の（Packed）Auto layoutをおさらいしましょう。 FigmaのAuto layoutはフレーム内の子要素を縦横一定の向きに同じ隙間を開けて並べる機能です。その際の親要素の大きさは固定、もしくは中身の大きさに依存して可変となります。
Figmaで閲覧用URLをシェアするときにチェックするポイント｜OKOJO DESIGN
プロトタイプのURLをシェアするステップ①プロトタイプ画面を開く右上の「▶︎」からプロトタイプのプレビューを開きます。 ②右上の青いボタン「Share Prototype」をクリック ③こんな画面が出てきます。 このままでは、URLをシェアしただけでは、閲覧できない状態になっています。 セキュリティに注意する必要のあるデザインを共有する際は、 ・閲覧者のメールアドレスを招待（viewer設定） ・上記の共有設定が「Only people invited this file」の状態でURLを発行 ・閲覧者は招待メールからFigmaに会員登録（無料） することで、招待された特定の人しか閲覧できない状態にすることができます。 URLを送るだけで済ませたい！という場合には、続きをご覧ください。 簡単にできます。 ④「Only people invited to this file」を「Anyone
【FigmaのAuto Layoutをマスターしよう vol.4】 カード型記事リスト｜ミキ｜デザイナー
今回は記事一覧に使われることが多いカード型のリストを作りたいと思います。 第１回から今回まででAuto Latoutの基本的な設定をひと通りマスターできます！ 並び位置の基準（Alignment）の設定値について今回作っていくのはこのようなリストです。 サムネイルと本文は幅いっぱい、日付は左揃え、ボタンは右揃えになっています。 Auto Layoutでは子要素に対して並び位置の基準（Alignment）を指定することができます。 並び方向が縦並び（Vertical）のときは左揃え・左右中央揃え・右揃え・幅いっぱいの指定ができます。 並び方向が横並び（Horizontal）のときは上揃え・天地中央揃え・下揃え・高さいっぱいの指定ができます。 親要素の設定まず始めに以下のようなレイヤー構造を作ってみましょう。 「カード」に対してAuto Layoutを適用し、要素を縦に積みます。 次に以下のよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Instance Finder | Figma
FigGPT
seya on Twitter: "Figma の Variants -> React + TS と Storybook コンポーネントの一例の Figma を JSON 化したものと Variants 毎の差分(theme が primary の時は背景色が#00… https://t.co/mpqYc4EtMF"
6-2. バージョン管理の使い方 | UI/UXデザインツール『Figma』入門
https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
Genius by Diagram
フロントエンドエンジニア💻小林 秀樹 on Twitter: "え？XDからFigmaに移すのってSVGで書き出して読み込むだけでいいの？ ちゃんと構造も維持されてる。 複雑なものだと流石に情報に欠けは出そうだけど、すぐ試せるから一旦やってみて欲しい。 XDでのSVG書き出しは、 「ファ… https://t.co/dNRGDEXmyQ"
https://help.figma.com/hc/ja/articles/1500006206242-FigJam%E3%81%A7%E3%81%AE%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E3%82%B5%E3%82%A4%E3%82%BA%E5%A4%89%E6%9B%B4-%E5%9B%9E%E8%BB%A2-%E5%8F%8D%E8%BB%A2
Amazon.co.jp: Figma for UIデザイン アプリ開発のためのデザイン、プロトタイプ、ハンドオフ: 沢田俊介: Digital Ebook Purchas