じゅん

ゆるゆるWEBデザイナー ゆるく勉強したことをゆるく記していきます。 pintere…

じゅん

ゆるゆるWEBデザイナー ゆるく勉強したことをゆるく記していきます。 pinterest→https://pinterest.jp/junjun96677/

バリアブルを使ってモックアップ作成 -ラジオボタン-

バリアブルを使用してモックアップを作成する練習をします。まずは簡単なラジオボタンを作成してみます。 1.ラジオボタンのコンポーネントを作成する バリアントで選択されている状態と選択されていない状態のラジオボタンを作成します。 選択された状態→「true」 選択されていない状態→「false」 と値を設定します。 2.バリアブルを作成し、値を保存する バリアブル作成のボタンをクリックし、「ブーリアン」を選択します。名前をラジオボタンにし、トグルボタンの初期値をfalse

じゅん

    • バリアブルを使ってダークモードを設定

      こちらの記事でバリアブル機能について学んだことを応用して、ダークモードの場合に自動的に切り替えができるように設定していきます。 Free Banking Mobile App Ui Kit With light & Dark Mode High Quality Ui 43+ Screen template こちらのUIキットを使用します。 1.バリアブルモードを作成 light / dark のバリアブルモードを作成し、それぞれにテキスト・背景の色を設定しました。

      じゅん

      • ポケモンでFigmaバリアブルを学ぶ

        バリアブル（variable）とはバリアブルとは2023年6月にFigmaに追加された新機能の一つで、オブジェクトに割当てることのできる変数の事です。 バリアブルとして設定できる属性 カラー 数値 文字列 ブーリアン カラー 色の数値（Hex値）を保存できます。塗りやストロークに適用できます。 数値 数値を保存できます。横幅や高さ、マージンやパディング、角丸などの数値に適用できます。 文字列 文字列を保存できます。テキストレイヤーやバリアント(variant）

        じゅん

        • ヒーローセクションってなに？メインビジュアルとは何が違うの？

          最近ヒーローセクション、ヒーローエリアなどの言葉を耳にしますが、恥ずかしながら意味がよくわかっていなかったので調べ、、、ChatGPTに聞いてみました。 ヒーローセクションとは？メインビジュアルと意味が似ているように感じますが意味は同じなのでしょうか？ メインビジュアルとは？つまり、ヒーローセクションはウェブページの入り口であり、訪問者を引きつけるための重要な「部分」、そしてメインビジュアルはそのヒーローセクションを彩る「要素」のことでした。 どちらもサイトの第一印象を

          じゅん

        バリアブルを使ってモックアップ作成 -ラジオボタン-

        じゅん

          アイトラッキング調査できるツール「clueify」をつかってみた

          ①サインアップするhttps://app.clueify.com/login にアクセスし、サインアップします。 ②調査したい画像をアップロードするお試しとしてビズリーチのLPを検証してみます。 ③調査結果を確認するこのような結果が出ました。 色による指標はこのような感じみたいです。 人の顔や数字は数値が高いみたいです。 モード切替もできる画像の上部にあるタブでモード切替ができます。 Focus Map 穴が開いたようなマップになり、よく目につくエリアがフォーカ

          じゅん

          アイトラッキング調査できるツール「clueify」をつかってみた

          じゅん

          XDでガラスっぽい表現をしたい。【グラスモーフィズム】

          こんばんは。最近暇な時間にdribbbleを見ているのですが、ガラスのような透き通ったシェイプの表現が多かったので少し気になり、自分でも作れないかと思い挑戦してみました。 どうやらこの表現はグラスモーフィズムというみたいです。 XDで作成することが可能！ということで作ってみました。 ①シェイプを作る ②背景のぼかしという項目にチェックを入れる ③質感を出すための数値の設定 感想 このような表現はフォトショでしかできないと思っていたのでＸＤで手軽にできてびっくりしまし

          じゅん

          XDでガラスっぽい表現をしたい。【グラスモーフィズム】

          じゅん

          上司の嫌いなところを箇条書きでまとめるとなんだかすっきりする

          社会人として働いていると上司にイライラして爆発しそうな瞬間があります。そんな時、私は 「嫌いなポイントを箇条書きにしてまとめる」 ということをしました。 これがなかなかスッキリしたのです。 なぜよかったのかというと ①まとめる自分の気持ちを整理することで、なぜモヤモヤイライラしているかを理解することができ、気持ちを落ち着けることができました。 ②考えるさらに箇条書きをもとに嫌いポイントに どう対処すればいいかを考えました。 ③行動するそして仕事中に上司の行動や 気持ち

          じゅん

          上司の嫌いなところを箇条書きでまとめるとなんだかすっきりする

          じゅん

          偶然見つけたおしゃれなフリー素材

          ネットサーフィンしたら偶然見つけたので備忘録としてここに記しておきます。 無料写真素材「O-DAN」 おしゃれな写真しかない。 入口の検索バーで商用利用可の素材を絞ることができます。 線画イラスト素材「Linustock」 シンプルで使い勝手良さそー。 ベクターデータ＋線画をアウトライン化していないそうなので 加工もしやすい！ PNG、EPSデータでダウンロード可能。 線画のみと思いきや… カラーイラストのバリエーションもあります！ 下のボタンを押すと表示されます

          じゅん

          偶然見つけたおしゃれなフリー素材

          じゅん

          おうち時間で挑戦！手書きイラストを素材サイトに投稿してみた

          おうち時間、暇ですね。 私は少し絵が描けるので、このスキルを活かして、手書きイラストからaiデータを作成し、素材サイトに投稿してみました！ 準備したもの ●adobeイラストレーター ●スマートフォン、携帯 ●コピー用紙、画用紙などの白い紙 ●黒いマジックペン※コピックマルチライナーっぽいものを使いました 手順①白い紙にイラストを描くパソコンデータに取り込みやすくするために 周りに余白をあけて書くようにしました。 手順②イラストの写真をスマホで撮る パソコンデータに取

          じゅん

          おうち時間で挑戦！手書きイラストを素材サイトに投稿してみた

          じゅん

          学生・金欠クリエイター必見！無料で使える！イラレとフォトショっぽいソフト

          Adobeのソフトって高いよね… 私は金欠社会人なので、Adobeのソフトは手を出しずらい価格であると思ってしまいます(´;ω;｀) そこでクリエイターには欠かせないソフト、Illustrator、Photoshopに代わるソフトをまとめました。 イラレっぽいソフト「Inkscape」 ▼「Inkscape」ダウンロードサイト WindowsかMacか黒いメニューから選択してダウンロードしてください 「Inkscape」使用感 このようにパスをイラレのように操る

          じゅん

          学生・金欠クリエイター必見！無料で使える！イラレとフォトショっぽいソフト

          じゅん