FigmaのVariableの使い方
Figmaの新しい機能Variableについて、作成方法や適応のしかた、スコープ、モードなど基本的な使い方をまとめました。 Variableとは Variableはスタイルのように再利用可能な定義で、色、数値、文字列などのさまざまなデザイン属性に割り当てることができます。 Variableのタイプ Variableには、以下の4つのタイプがあります。 ColorNumberStringBoolean Color Colorは値に色を設定でき、オブジェクトの塗りやストロークに適用できます。 Number Numberは値に数値を設定でき、幅や高さ、間隔、パディング、角丸などに適用できます。 String Stringは値に文字列を設定でき、テキストレイヤーに適用したり、バリアントに使うことができます。 Boolean Booleanは値にtrueまたはfalseを設定でき、レイヤーの表示非表
Figma Config 2022で大幅アップデート 新機能を全てまとめてみた
チームでの共同デザインプロジェクトに最適なツールとして呼び声の高い、デザインアプリ Figma（フィグマ）。 はじめてでも迷わない簡単なFigmaの使いかたはもちろん、用途に合わせて自分好みにアプリの使いやすさを便利プラグインも人気の理由でしょう。 先日、Figmaのアップデートイベント Config 2022 が開催され、数多くの新機能が追加、発表されました。これまでFigmaによるデザインで気になっていた多くの点を解消してくれる大型アップデート。 今回は、Figmaに追加された新機能について詳しくみていきましょう。 コンテンツ目次 1. ダークモードの導入 2. より使いやすくなった Auto Layout 3. コンポーネントのプロパティ 4. 他のユーザーに追尾してもらうスポットライト機能 5. Figjam ウィジェットの追加 6. 可変フォントが利用可能に 7. ポヨンとしたバ
FigmaのVariants入門 - さらにコンポーネントを使いこなそう - ICS MEDIA
ウェブ制作の現場で定番となってきたデザインツール「Figma」。前回の記事『デザインの管理と効率化が行える FigmaのComponents入門』では、デザインパーツの管理や柔軟な変更が可能になる「Components」機能を紹介しました。 本記事ではComponentsをまとめ、検索性を保ちつつ、さらに柔軟な変更と管理が行える「Variantsバリアンツ」を紹介します。 Variantsを使うと、複雑なコンポーネントの切り替えや管理が行いやすくなり、堅牢なデザインファイルが作成できます。また、コーディング時に近い思想でデザインを組めるので、実装時に破綻が起こりにくくなります。 Variantsは規模感に関わらず小さな単位でも活用できます。 「使いこなせていない」、「自分の制作の規模感では不要」と考えているデザイナーにも、手軽に導入できメリットを実感できるはずです。本記事で使い方を説明する
FigmaのAutoLayout入門 - エンジニアに伝わるデザインを作ろう - ICS MEDIA
徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは
最新版で比較するAdobe XDとFigmaの違い - プロトタイプ機能編 - ICS MEDIA
この記事は『最新版で比較するAdobe XDとFigmaの違い - デザイン機能編』の後編です。 前編ではAdobe XDとFigmaのデザインに関する主要な機能を比較しながら紹介しました。それぞれのツールでデザインを行う上での得意、不得意について理解いただけたかと思います。 後編では作成したデザインに画面遷移やインタラクションを追加できる「プロトタイプ機能」と、ユーザーテストやデザインのフィードバックが行える「共有リンク機能」について紹介します。最後に、各ツールに用意されている「学習手段」についても紹介します。 プロトタイプ機能の比較 プロトタイプ機能とは、デザインに画面遷移やインタラクションを追加して実際の動きを試作できる機能です。これによって、早期のユーザーテストや仕様のチェック、インタラクションのイメージ共有が容易になります。 トリガーとアクション トリガーとはユーザーが行う「クリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
