タグ

figmaとdesignに関するcolissのブックマーク (4)

  • Figmaでデザインする時に作業効率がアップする便利なテクニックのまとめ

    私の周りでも、Figmaを使用する人がだいぶ増えてきました。 Figmaでデザインする時に役立つ、便利なテクニックを紹介します。Figmaでの日常的な作業から、デザインシステムや巨大なデザインファイルを扱う場合に作業効率がアップします。 9 Figma Design System Tips. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 一括でカラーを変更する場合は、選択色を使用する 2. この便利なショートカットで、レイヤーを整理できます 3. テキストのスタイルを見つけるには、検索を使用する 4. カラースタイルをすばやくナビゲートするには、リストにする 5. レイヤーをすばやくナビゲートするには、ショートカットを使用する 6. コンポーネントの交換は、このショートカットが便利

    Figmaでデザインする時に作業効率がアップする便利なテクニックのまとめ
    coliss
    coliss 2021/10/19
    Figmaでデザインする時に役立つ、便利なテクニックのまとめ。
  • ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法

    ニューモーフィズムとは、要素が背景と同じ素材で作られており、シャドウを与えて押し出されたような窪んだようなスタイルです。最近注目されているUIデザインのトレンド「ニューモーフィズム」を簡単な手順でデザイン・実装する方法を紹介します。使用するソフトウェアは、FigmaでもIllustratorでもAdobe XDでもSkecthなど、なんでもOKです。 ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなど、すぐに実践できます。 Neumorphism (Soft UI) in User interface design - Tutorial by Kanhaiya Sharma 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 新しいトレンド「ニューモーフィズム」 ニューモーフィズム

    ニューモーフィズムとは、デザインする時に知っておきたいポイント、CSSでの実装方法
    coliss
    coliss 2020/03/03
    ニューモーフィズムのデザイン方法、使用するカラーの選び方、UIデザインに適用するCSSの実装コードなどをやさしく解説。
  • プロのUXデザイナーから学ぶ!デザインをする時にグレースケールで始めると、デザインがよくなる4つ理由

    Webページやアプリをデザインする時、空白スペースが効果的に使えない、要素のグループ化や情報の構造化が苦手、そんなデザイナーの人にお勧めなのが、カラー無しのグレースケールでデザインを始めることです。 カラーを使用する前に、グレースケールでデザインを作成すると、レイアウトを明確に考えることができ、UXデザインの優先順位を決めることができます。 4 Reasons Why You Should Design Without Color First by Anand Satyan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レイアウトとスペースの扱いに集中できる 2. クライアントは適した質問をするようになる 3. デザインを作成する時の重要なポイント 4. デザインに一貫性を作り出す 1. レイアウトとスペースの扱いに集中

    プロのUXデザイナーから学ぶ!デザインをする時にグレースケールで始めると、デザインがよくなる4つ理由
    coliss
    coliss 2019/02/21
    空白スペースが効果的に使えない、要素のグループ化や情報の構造化が苦手、そんなデザイナーの人にお勧めです。
  • Zeplinがかなり便利!Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス

    Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。 Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイン指示書を自動生成できますが、Zeplinの方が一枚上手だと思います。 ZeplinはAdobe XD, Photoshop, Sketch, Figmaに対応しており、ここではAdobe XDを使用して解説します。基的な使い方は同じです。 準備: Adobe XDとZeplinのインストール Adobe XDでデザインを開く Adobe XDからZeplinにファイルをインポート Zeplinでデザインの指示書・スタイルガイドを作成 準備: Adobe

    Zeplinがかなり便利!Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス
    coliss
    coliss 2018/10/26
    デザインの指示書やスタイルガイドを自動生成。1プロジェクトまでは無料。
  • 1