タグ

ブックマーク / qiita.com/xrxoxcxox (7)

  • [LT スライド & 原稿] variables を既存データにどう適用する？ - Qiita

    この記事の概要 2023 年 7 月 6 日に開催される Config2023 Recap in Goodpatch で発表する内容です。 内容 「variables を既存データにどう適用する？」という内容で発表します。 全体の説明 新機能が色々出た中で、1 番みんなが沸いているのが variables だと思っています。 これから新しくデータを作るなら、デモの内容を参考にして綺麗に作っていけそうなイメージは湧きますよね。 ただ、 90% 以上の方は「既に作ってあるデザインデータがある」と思います。 そのため、今あるアセットをできるだけ活かして、漸進的に移行するには……という話をします。 また Figma の Recap ですが今回のアップデートはエンジニアとの協業がより大事になる話だと思ったので、コードに絡めた話も一部します。 補足として、あくまで「多分こんな感じが良いんじゃないかな」

    [LT スライド & 原稿] variables を既存データにどう適用する？ - Qiita

  • Figma上でAIによる画像生成ができるプラグイン、Andoが出たので試してみた - Qiita

    ログインが完了した上でFigmaに戻ると、プラグインのウィンドウが変化しています。 これで導入は完了です。 使い方 サイトトップで見本として使われているfuturistic sneaker with translucent material, studio lighting, product photographyというプロンプトを拝借します。 Promptのテキストエリアに文章を入力するのみでOKです。 参考画像無しで生成したところ、このようになりました。 スクリーンショットには2つの画像を表示していますが、1度に生成されるのは1枚だけです。 次に、参考画像を指定します。 と言っても特にやることは無く、任意のFrameを選択すると自動でReferenceに指定されます。 指定する対象はパスでも画像でもなんでも大丈夫です。 強いて気を付けることと言えば、deep selectして間違った対

    Figma上でAIによる画像生成ができるプラグイン、Andoが出たので試してみた - Qiita

  • 徹底解剖！FigmaのBranching機能 - Qiita

    これは何 Qiitaのデザイナーをしています。綿貫といいます。 中の人としてもアドベントカレンダーを盛り上げるべくFigma Advent Calendarを作成し、初日の記事を書きました！ 今回取り上げるのはOrganizationプラン限定であるBranching機能。 「すぐにプラン変更に踏み切れない、けど機能が気になる……」という方は結構いるのではないでしょうか？ この記事では基本的な使い方と、具体的なユースケースへの検証結果をまとめます。 Branching機能とは？ Gitを使った開発でのブランチとほぼ同じ概念です。 メインのファイルからブランチを切り、データを変更し、レビューとともにメインのファイルへマージする……というフローがFigmaでも実現可能に。 全体的なイメージを得るには文章を読むより公式のYouTube動画を見る方が早いと思われます笑 （5分弱の動画なのでパパッと

    徹底解剖！FigmaのBranching機能 - Qiita

  • 新規プロダクトを立ち上げるときに作る、小さなデザインシステム - Qiita

    本文と見出しに共通 font-familyを決める 和文だけでいくのか、欧文も混ぜるのか OSによってデフォルトで入っているフォントが違うため、和文と欧文で別フォントを指定するなら有り得る組み合わせを確認しておく必要がある Webフォントを使うのか使わないのか 和文Webフォントは2020年の今でもある程度ページスピードが遅くなってしまう 作っているプロダクトの性質や決定したテーマに合わせて選ぶ必要がある いずれにしても「ブランドが大事だから」と和文Webフォントを2種類x3ウェイト使用する……みたいなのは絶対やめた方が良い 本文 最小サイズを決める ブラウザで表示できる限界もあるため、かなり機械的に決められる 年齢層の高いユーザーも多くいるなら最小を13px デザイナーからは「最小が13pxなんてかなり大きいのでは？」と思われそうだけど、年齢が高ければ13pxでも相当小さい部類 かなり洗

    新規プロダクトを立ち上げるときに作る、小さなデザインシステム - Qiita

  • CSSフレームワークやライブラリを素振りするためのFigmaファイルを作った - Qiita

    この記事の概要 筆者はCSSフレームワークやCSS in JSのライブラリを素振りすることが多いです。 その際、それなりに精度の高いモックアップを組んでみないと使用感が掴めません。 しかし毎回1からモックアップを用意するのも時間がかかるので、さっと検証するためのデータを作りました。 せっかく作ったので公開します。 見本 desktop mobile 実物 FigmaのCommunity fileとして公開しています。 以下のような要素を盛り込んでいます。 色やタイポグラフィー、グリッドなど最低限のデザイントークン VariantsやComponent propを用いたComponent ある程度状態が変化するPrototype desktop, mobileそれぞれのビュー flex, gridを用いそうなレイアウト positionを用いそうな要素 header, nav, footer

    CSSフレームワークやライブラリを素振りするためのFigmaファイルを作った - Qiita

  • コーディングしやすいFigmaデータの作り方 - Qiita

    これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません ツール名称などを適宜読み替えていただければSketchやXDでも使える考え方だと思います 対象読者 コーディングを依頼する人 主にUIデザイナー チームによってはディレクターやプロダクトオーナーも該当するかもしれません 作業しやすいデータ作成を理解するために読んでもらえたら嬉しいです コーディングをする人 フロントエンドエンジニア・マークアップエンジニア チームによってはデザイナーも該当するかもしれません 余りにもコーディン

    コーディングしやすいFigmaデータの作り方 - Qiita

  • 2022年5月現在 Figmaで実施しない方が良いハック - Qiita

    この記事の概要 Figmaは最近注目を集めているデザインツールです。 アップデートが早いのも特徴の1つなのですが、結果的に「以前は有用だったハックが今ではアンチパターン」になり得ます。 2022年5月11日に実施されたアップデートを踏まえ、それ以前に紹介されていたテクニックのうち、今はもう実施しない方が良いものをまとめました。 将来、ここで紹介したようなハックが検索でヒットして「なんだこれ？不要では？」と感じる人も出てくるでしょうから、経緯を知れるための記事になれば良いなと思っています。 一辺だけのborderを再現するのにDrop shadowを使う これまでFigmaでborderを指定する場合、四辺すべてに一律で適用されていました。 そのため、一辺だけにborderを指定したい場合はBlurやSpreadを0にしたDrop shadowをかけて再現しているケースがありました。 アップ

    2022年5月現在 Figmaで実施しない方が良いハック - Qiita
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.