タグ

2020年7月2日のブックマーク (5件)

  • Figmaでライブラリ運用📚🙆|chaki

    こちらは「Design Tools Advent Calendar 2018」22日目の記事です。 はじめにこんにちは。GIGという制作会社でモバイルアプリ、web制作のデザイナーをしています。 ここ1年は客先に常駐しデザイナー2名、エンジニア3名、ディレクター3名のメンバーで既存のアプリの改修をしつつ新規でも2つリリースしました。 その全てを同じシリーズとして制作しています。つまり、見た目の一貫性はアプリ単体のみではなく全て横断して統一する必要があります。 じゃあ将来のためにも、ライブラリをつくろうじゃないか!という流れになりました。 というわけで今回はチームでの制作を前提として、Figmaでのライブラリ運用について書いていこうと思います。 理想的なライブラリプロダクト間で一貫性を出さなきゃいけないし、使いまわせるUIパーツは使いまわしたい。ただ闇雲にライブラリを作って運用できなくなって

    Figmaでライブラリ運用📚🙆|chaki
    sdmmm
    sdmmm 2020/07/02
    Figmaでライブラリをつくる
  • 【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする|nozoe | conoito

    【まずやること編】 デザインデータをSketchからFigmaにお引越ししよう もあわせてドウゾ ・・・ ノゾエ(@conoito)です。 今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。 約半年が経った9月現在、特に大きな問題もなく快適に運用を行なうことができています。 今日は、Figmaに移行してから行なった、 コンポーネントの整備からスタイルの最適化、 さらには、最適化したデザインシステムをアプリに適用するまでを、もりっとお話します。マルマルのもりだくさんです!!!!!!!!1 ● この記事をお勧めする人 - Figma使ってる人たちのその後ってどうなんですかね => 快適です!!!(快適になるための努力はしました) - 移行した後ってまず何をしたらいいんですかね => 1. コンポーネントをFigmaのチームライブラリに対応させる をやるとよいで

    【チームライブラリ活用編】 デザインシステムを #Figma でもっと強くする|nozoe | conoito
    sdmmm
    sdmmm 2020/07/02
  • Figmaによるデザインデータ運用|ノムジュン

    Figma Advent Calendar 2018の14日目記事です) 業務でFigmaを導入したので、その話をしたいと思います。 Figmaの導入を迷っている人や、その運用方法を検討している人のご参考になれば幸いです。 ※ (2023年追記)このnoteは、2018年に書かれたものであり、Figmaの機能がまだまだ少なかった頃の情報です。正直言って「もはや役に立ちゃしない」情報なのですが、こんな時代もあったんだと参考になるかもしれないので、特に情報の更新もせずに残しておきます。 Figma使い始めの、「まずは基機能の活用方法を知りたい」みたいな人に普通に有益かもしれません。 社内向け資料を適当にアレンジしつつnote記事化したんですが、かなりの長文(4000字くらい)になっちゃったんで、ダーっとスクロールしながら興味ありげなところだけ掻い摘んで読んでいただけたら幸いです。 【トピッ

    Figmaによるデザインデータ運用|ノムジュン
    sdmmm
    sdmmm 2020/07/02
  • ニューモーフィズム?CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ

    Neumorphism(ニューモーフィズム)は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。 この記事では、ニューモーフィズムの基や作成上の注意点、コピペで実装できるHTML/CSSスタイリング、参考スニペットまでまとめてご紹介します。 ニューモーフィズムって何? ニューモーフィズムは、一昔前に流行った「スキューモーフィズム」のリアルな質感と、フラットやマテリアルデザインのようなシンプルさを組み合わせた新しいスタイル。言葉の由来も、New(新しい)+Skeumorphism(スキューモーフィズム)からきた造語。 dribbbleで4500以上のいいねが付いている、ニューモーフィズムの火付け役となった作品 Skeuomorph Mobile Banking by Alexander Plyuto 少し前までは、マテリアルデザインの登場によって「

    ニューモーフィズム?CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ
  • OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 - OPTPiX Labs Blog

    こんにちは、ウェブ担当の嶋です。 Twitterと並んでSNSの代表格となったFacebook。ウェブテクノロジでは公式ページとともに「OPTPiX SpriteStudio ユーザー助け合い所」というグループも開設し、ユーザー様と情報を相互にやりとりしています。 Facebookは、URLを含む投稿やシェアをすると、自動的にそのURLからタイトルや概要、画像などを取得して表示してくれます。リンクをクリックする前にどんなサイトなのかなんとなくわかるのは非常に便利なのですが、こういう形でシェアされているのをよく見かけませんか? ページのタイトルや見出しは適切なのですが、サムネイル画像として表示されている画像の左右が切れてしまっています。また、表示されている画像もサイトのトップページを紹介する画像としては適切ではありません。 これはOGP(Open Graph Protocol)の設定が行われ

    OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 - OPTPiX Labs Blog
    sdmmm
    sdmmm 2020/07/02