IllustratorのTipsまとめ

Figma tips〜インポートしたインスタンスが壊れる〜

Figmaで外部ライブラリをインポートして使うことはよくあると思いますが、その際インポートしたインスタンスのレイアウトが崩れたり壊れていることがあります。 Figmaのバグらしいので、治ることを祈るしかないのですが、データの作り方で解消する方法もあるようなのでシェアしておきます。 よくあるケースで、テーブルのような上下のマージンがおかしくなっていて、Enterや編集をすると元に戻るけど、リロードするとまたマージンバグが起きているという現象が多発します。 このケースを回避

Figma tips〜コンポーネント一括解除〜

Figmaで作ったコンポーネントインスタンスでデザインを組んでいく際、古いデータと最新データを見比べたいときや、インスタンスに変更を加えたくない時があります。 そんな時は右クリックで「Detach instance」でポイント解除はできますが、ページ全体を一括で解除したいこともありますよね。 そんな時に使えるTipsを２つ紹介します。 Figmaの標準機能を使う ひとつめはFigmaに標準搭載されている機能。 ⌘＋/ でメニューを開き、そこから「Detach all

Figmaの使いやすいDesign Systemの作り方~Color,Font,Variants~

私ごとですが、ついにデザイナー歴が17年を超えてきました。 時代の変化とともにツールや常識も変わりつづけています。 現在はFigmaがUIツールとしては一強で、UIデザイナーの方はほとんどの方が使われているのではないかと思います。 とても使いやすく管理もしやすいツールですが、使い方を理解していないと混乱を招いたり、自分しか使えないコンポーネントも作り得てしまいます。 今回はUI,UXでいうと10年以上携わってきた私が経験を通して考える、使いやすいFigmaのVariant

ダイアログとモーダルの違

UIを作成していると「ダイアログ」や「モーダル」という言葉が飛び交うと思いますが、違いをしっかり説明できるでしょうか？ 違いがあやふやで気分で使うワードを変えたりしている人は多いのではないでしょうか？ というのも、私自身が固定概念で「ダイアログ」や「モーダル」と思い込んでいたものがどうやら認識が違いそうだぞ、、？と気づいたため改めて単語の意味を調べ直しました。 このワードへの認識違いで意図している内容が伝わらない可能性もあるため（失敗談から）違いを徹底解析します。 ダイ

iOS文字の拡大率(ダイナミックフォント)を考慮したUIデザイン

iOSのアクセシビリティではフォントサイズや画面の拡大などが可能です。 通常のアプリだと考慮しなくても大した問題にならないかもしれませんが、高齢者向けのサービスなどだと、利用ユーザーがフォントや画面の拡大率を設定している可能性があり、UIの崩れの原因となってしまいます。 逆に、フォントを大きくしたい大きく表示させたいユーザーに対して、その機能を制限してしまう場合もあります。 今回、この問題の仕様や対応策を考える機会があったので記事にまとめました。 フォントサイズの拡大

【命名規則】コンポーネントの名前はどうつけるべき？

はじめにアプリ開発に携わってから10年以上の月日が経ちましたが、思い返すと数年前はこんな課題がありました。 Design Systemやコンポーネントを使わない場合、開発面でも、対象範囲の把握が難しかったり、一括変更できなかったりなど、課題が多くありました。 上記の課題は、UI制作が成熟してきていて、Design Systemを作成することで解消できるようになりました。 Design Systemを活用することで、 「よりスピーディーに」 「高品質なものを」 「誰でも作

Figmaで個別URLの該当箇所に飛ばない現象〜原因と解決策〜

最近よく起こっていた事象で、Figmaの共有URLをクリックしても、ファイルは開くけど該当箇所に飛ばない現象。 修正箇所の共有時にとても困っていましたが原因がわかったので記載しておきます。 その前に念の為個別リンクの説明を載せておきます。 Figmaの個別リンクとは Figmaはオンライン上でアクセスと管理が可能なデザインツールです。 オフラインデザインツールとは違い、URLを共有することで該当箇所にアクセスすることができます。 URLの種類はページリンクと個別リンク

Figma玄人向け 痒い所に手が届くTips　〜便利な設定〜

FigmaはUI設計で欠かせないツールになりました。 UI設計で必要なさまざまな機能が盛り込まれています。 主要機能でもかなり多くのことができるのですが、使っていなかった、知らなかった、新しい機能を駆使したデザイン作成について、私が知って作業スピードが倍増したTipsを紹介します。 知らなかった人はこれをすることで、作業効率がかなり上がること間違いなしです。 Auto Layout編▼ テキスト範囲を可変状態でAuto Layout化する もはや、なくてはならない主要機

STUDIOのヘッダー背景をスクロールで変える方法

Webサイトでファーストビューではヘッダーに背景がないのに、スクロールしていくと背景に色が乗る、、という実装をよく見かけますが、STUDIOでその実装が可能なのか？ 色々調べてみましたが、擬似的にそれっぽいものは作れるものの、透過の背景を色付きにするというのは今の所出来なさそうです。 ただ、背景の色をスクロールによって変えるということはできそう。 構造としてはこんな感じにします。 まず構造としては4つのレイヤーを作ります。 3rd layer：ヘッダーの要素（※背景

Figma新機能のまとめ〜2022年5月アップデート版〜

今回のFigmaのアップデートはかなりUIの変更もあり大幅に機能が追加されました。 今までできなかった痒い所に手が届く機能が多数リリースされていて嬉しい限りです。 特徴的なものや個人的に使えそうだと思ったものを載せておきます。 AutoLayout並び順やレイアウト方法の拡張 Autolayout機能はUIもかなりかわりました。 3点リーダーのメニューを開くと、Autolayoutの調整が可能です。 マイナス値の設定が可能 線を含む、含まないの選択 重なり順の変

〜Premire Pro〜書き出した動画がRGB強めで色が変わってしまう現象

動画編集は本職ではないのですが、たまに使うと 「なんじゃこりゃ！！」 ということがあります。 本職の方からしたら初歩的な内容かもしれませんが ドツボにハマるよくわからない現象の解決策を忘却メモとして記載しておきます。 編集中はいい感じの色味だったのに、書き出すと RGB強すぎ！ 白飛びしまくってる！ せっかく色調整したのに何これ！ の驚愕書き出しになってしまう現象の解決策です。 （なぜ起こるかの原因については調べ切れてません。ご存じの方は教えていただけると嬉しいで