簡単で便利！Sketch, Figma, AdobeXDなどにコピペで利用できるUIデザイン用のカラーパレットを生成 -CopyPalette
最近のUIデザインでよく使用されている、一貫性のある単色のカラーパレットを簡単に生成でき、そのカラーパレットをSketch, Figma, AdobeXDなどにコピペで利用できるオンラインツールを紹介します。 CopyPalette CopyPaletteは1つのカラーをベースに、濃淡のバリエーションでカラーパレットを簡単に生成できるオンラインツールです。生成されるカラーパレットはSVGなので、さまざまなソフトウェアにコピペで利用できます。 CopyPaletteの使い方は簡単、登録など面倒なことも一切不要です。 まずは、サイトにアクセスします。
SketchとAtomic Designという強力なツールと方法を組み合わせれば、デザイナーはデザインシステムを作成して、ワークフローを標準化し効率化することができます。 デザインシステムとは デザインシステムとはチームがプロダクトを制作し運用する際に共通の言語で繋がれるように、再利用できるコンポーネントとガイドラインをまとめたものです。 ほとんどの場合、デザインシステムはスタイルガイドとコンポーネントライブラリから構成されています。加えて、ブランドバリューや、口調や雰囲気といった要素を含めることもあります。デザインシステムを導入する際のポイントは、プロダクトやブランドについての唯一の正しいソースとして運用される基準を作ることにあります。 Googleのマテリアルデザインは構築されたUIデザインシステムの一例です。マテリアルデザインは2014年に、一貫したAndroidアプリをデザインし開
Webデザインは独学で習得可能？必要なスキルと独学のメリット・デメリット | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGの教育事業担当のペイです！ Webデザインの勉強がしたいけれど、仕事や育児などに時間をとられて、平日や日中はスクールに通えないという人もいるでしょう。 この記事では、独学でWebデザインのスキルを習得したいと考えている人に向けて、Webデザインに必要なスキルや独学に関する情報をご紹介いたします。ぜひ今後の学習計画に役立てていただければと思います！ また、本記事と同じ内容をYouTubeにもUPしています！動画や音声で楽しみたい方はこちらを参照してみてくださいね Webデザインは独学で習得可能なのか sty Webデザインは独学でも習得可能です。ただし、独学する場合に大切なのは、最初にゴールを決めるということです。 しっかりと目的を設定して、何をどのようにどういった形で学べばいいのかを確認し、モチベーションを高めたうえで、勉強時間をしっかり確保する必要があります。これはWe
月額使用料とおさらば！クリエイター向けの買い切りMacアプリ
作成：2019/08/19 更新：2021/04/01 Mac > 「いいかげんサブスクリプションや月額使用料じゃなくて買い切りにしてくれ！毎月いくら引き落とされているかよく分からなくなっているんだよ！」と怒っているクリエイターにおすすめの買い切りMacアプリ（もしくは無料版）をご紹介。コスパだけでなく、その美しさと使いやすさに喜悦するだろう。 エンジニア速報は Twitter の@commteで配信しています。 DaVinci Resolve（After Effects代替） Blackmagic Design社のDaVinci Resolve（ダヴィンチ・リゾルヴ）。無償の高性能動画編集ソフト。インターネット接続を必要とせず、月額使用料も発生しない、上位版のDaVinci Resolve Studioは¥33,980 (税抜価格)のみ。 DaVinci Resolve 16 Blend
デザインツール「Figma」を5名のデザインチームに導入して半年経った振り返りとビジネスメリットについて｜Marino yokoi
はじめまして＆こんにちは！株式会社スペースマーケットデザイン部マネージャーの横井 @rinoside です。 2019年4月にSketchからFigmaへの移行を行い、運用をはじめて約半年が経ちました。会社組織で移行を検討している方に少しでも参考になればと思い、移行した経緯やそのメリット・デメリットなどの振り返りをまとめてみました。 主に金銭面などのビジネス的なメリットや移行時・運用時の振り返りをメインとしているため、基本的な使い方などの解説は省いています。 ある程度Figmaの知識がある方で、組織導入を検討している方・どうやって導入・説得するか悩んでる方に参考にしていただければ幸いです。 ※この記事はスペースマーケットアカウントのマガジンにまとめられます Figmaの前に使っていたツールFigmaの前はSketchを使っていました。といってもSketchも実はその年にPhotoshopか
SketchとGoogleスプレッドシートを連携させてアプリの文言を管理する｜osanai / ui designer
アプリのボタンの文言を決めるとき、「体言止めにする？ 動詞にする？ あれ、既存画面の文言はどうしてたっけ？」ってなるときがあります。Kanmu のデザイナー小山内です。 アプリ内文言の一覧があれば、表記ゆれに気づきやすいかなって。あわよくば、それを Sketch にシームレスに取り込めたらラクかなって。そう思っていたら、Kanmu Tech Day がやってまいりました。 Kanmu Tech Day とは テクノロジーを使って業務の効率化や、何かおもしろそうな試みをやってみようという、月に1回おとずれる社内アクティビティ。 新しいツールを試してみるもよし。プログラムを書いてみるもよし。18:00頃から缶ビールをあけ、ひとり1〜2分で今日やったことをゆるく発表しあう会。文言管理のしくみが欲しいと思って、ぼくが作ってみたものがコレ↓ アプリのボタン文言を一覧するスプレッドシートと、 スプレッ
Paaatternsはアートライクな背景パターンを配布するプロジェクトサイトです。 いくつかのアートなパターンがSketch,やFigma、Adobe XD、Illustrator用のファイルやpng、svgなどで配布されています。 パターンは20種以上あり、それぞれデザインはほぼ完成されている印象です。元ファイルの配布なのでコンテンツに応じて変更する事も出来ますね。 ライセンスは独自ライセンスですが商用でも無料で利用できます。 Paaatterns
There’s no “I” in team. Sure, there’s one in design, but that doesn’t mean you have to do it alone. Every project is different, so our real-time collaborative design tools mean you choose what to share, when to share it and how you work together. Share a Workspace Bring your people, documents, Libraries and more together with a Sketch Workspace. You’ll always have full, instant control over who’s
はじめに VALU Advent Calendar 2019 11日目 (!) の記事です! VALU ではデザインに Atomic design (アトミックデザイン) を採用しています。 本記事では，VALU のデザイナーが作成した素敵な Sketch シンボルを差分なく反映し，かつ変更に耐えうる SwiftUI を運用するための方法をご紹介しようと思います。 昨年の VALU Advent Calendar にて，Sketchと1対1を目指すAtomic designなStoryboardの作り方 を投稿しました。本記事はそれを SwiftUI で行ったものです。まだご覧になっていない方は先にご覧ください。 Highlights SwiftUI を利用することで，「ファイル数増加」「子View更新時の伝播」「親ViewのConstraints破棄」など，UIKit (昨年の実装) で
この記事は、2019年7月に開催した「Affinity User Group JAPANミーティング #1」での大嶺 建さんと勝谷 元気さんの登壇内容の動画等をご紹介します。 Affinity Designerで簡単YouTube動画制作術 登壇者の大嶺 建さんはYMRchannelというYouTubeチャンネルをされていて、動画編集ではDaVinch Resolveを使用されています。 テロップ作成にAffinity Designer、サムネイル作成にAffinity DesignerとAffinity Photoを使用されているそうです。 個人的には、Affinity Publisherで制作した雑誌風スライドの完成度の高さが目を引きました。 このスライドのPDFは以下からダウンロードできます。 PDFをダウンロード Affinity Publisher形式のデータは以下からダウンロー
Awesome Design Plugins
How to Use and Contribute Now you are in Awesome Design Plugins section, if you need tools — go to Awesome Design Tools. To find the tool, go through the Table of Contents or search for a keyword (for example, "animation", "prototyping"). Ask Lisa on Twitter. If you found some great design tool or plugin, just send a Pull Request concerning our Contribution Guidelines (they're very simple, please
このブログではこれまで「文字サイズの比率と調和」や「音楽、数学、タイポグラフィ」といった記事で、調和数列をもとにしたスケールから文字サイズを決定する手法を紹介してきました。私たちのチームではこのスケールを「ハーモニック・モジュラー・スケール」と呼び、実際に多くのプロジェクトで採用しています。 このたび私たちは、ハーモニック・モジュラー・スケールにもとづくテキストのスタイリングを簡単にするためのツールとして、Sassライブラリ「Harmonic Modular Scale」とSketchプラグイン「Harmonic Modular Scale for Sketch」を公開しました。これらのツールはスケールにもとづく文字サイズを算出すると同時に、行の高さを一定のユニットの整数倍に揃える機能も持っています。 Harmonic Modular Scale Harmonic Modular Scal
結局どっちがいいの？Adobe XDとSketchを9項目で比較してみた【2019年最新版】 - Workship MAGAZINE(ワークシップマガジン)
2010年に発表されて以来、『Sketch』はその利便性から多くのUIデザイナーに愛されてきました。しかしその後『Adobe XD』が頭角をあらわすと、多くのデザイナーは「結局どちらを使えばいいの？」という問題に直面しました。 今回は2019年の最新の情報をもとに、これら二つのツールを9つのポイントから比較してみました。すでにどちらかのツールを使っている方も、まだどちらにするか決められない方も、ぜひ参考にしてください。 Adobe XD vs Sketch：9つの比較ポイント この記事では、以下の9つのポイントから両者を比較します。 UI リピートグリッド シンボルとアセットパネル レスポンシブデザインツール アドオンとプラグイン 自動アニメーションによるプロトタイピング 共有とコメント デザインスペック バージョン管理とマルチプレイヤーデザイン では、さっそく比較してみましょう！ 1.
Sketchそろそろ限界なのでは...と思うとき｜山本麻美
数年前はUIデザインツールとして先陣切っていた「Sketch」ですが、多機能、高機能になり、これから始めようという人にとっては難解になりすぎてしまったのではないかと思う今日この頃です。 まだここまで複雑ではなかった頃は、初心者向けハンズオン・イベントや講座を行うたびに、訪れる方々の笑顔を生み出せていたと思います。 1) 3年前にこんなSketchイベントに出たり、 Sketch 1dayブートキャンプ 2) 私のところに個人的に寄せられるSketch初心者の方々からの相談を公開して多くの人に役立てようというブログを開設したり、 Sketchたまご 3) ロクナナワークショップでSketch講座を開設したり、 山本麻美のSketch入門講座 4) 日本初のSketch公認イベントに出たり、 Sketch Tokyo 2019 Sketchの普及に熱意を持って活動していたこともありますが、限界
UI/UXデザインの定番ツールと言えば「Sketch」。このカリキュラムではSketchの基本的な使い方を学びながら、スマホアプリのデザインについて学ぶことができます。
Compatible Sketch & Figma Wireframe and Design Starter Kit Speed up your design process with the most innovative UI Kit — Root.
Create avatar illustrations in Sketch App with this free library. Combine clothes, hair, emotions, accesories, and colors. Video 📺
Color System Plugin Light and Dark Mode directly in your design with one click Download the plugin Document Colors Tint Tint – Dark On Tint Label – Primary Label – Secondary Background Seperator Lightning fast Built to be as lightweight and fast as possible Simple setup Setting up your color system takes less than 10 seconds Seamless integration Completely integrated into the Sketch document color
Don’t make the mistakes I did moving your design system from Sketch to Figma
We set out to move our UX tools stack from Sketch, Invision, Craft and Abstract to Figma, Figma, Figma and Figma. After months of planning to replace our UX tool stack, we were finally ready to take the leap. We jumped into a boardroom on a Friday bright-eyed and rosy-cheeked imported every sketch file of every project just to realise: Oh snap our entire design system doesn’t work like it used to…
The most powerful data visualization plugin Create charts with random, tabular or JSON data inside Sketch, Figma or Adobe XD. The richest collection of chart types 16 of the most popular chart types out-of-the-box. Didn't find what you want? Just let me know and I will add it to the collection.
Apple、これまでBeta版として公開していたデザインテンプレート「iOS 14 and iPadOS 14 Sketch/Adobe XD Kit」を正式にリリース。
AppleがこれまでBeta版として公開していたデザインテンプレート「iOS 14 and iPadOS 14 Sketch/Adobe XD Kit」を正式にリリースしています。詳細は以下から。 Appleは現地時間2021年01月28日、2020年06月にオンラインで開催されWWDC20と同時に公開したデザインテンプレート「iOS 14 (Beta) for Skech/iOS 14 (Beta) for Adobe XD」をアップデートし、「iOS 14 and iPadOS 14 Sketch/Adobe XD Kit」として正式にリリースしています。 iOS 14 and iPadOS 14 Sketch Kit : 89.6 MB iOS 14 and iPadOS 14 XD Kit : 147.7 MB January 28, 2021 Apple Design Resou
Sketch 58 — Smart Layout!
This is the most important feature since Symbol Overrides. Finally, you can make Symbols that behave in the same way as its final implementation — everything thanks to Smart Layout. In this story, you will learn what Smart Layout is and what kind of more granular features it includes. I will also show you how to use it in practice. But first…. let’s see what’s new or improved in Sketch 58: Smart L
Magicul - Design-to-anything converter engine - Convert Adobe XD, Figma, Sketch and more
New Automatically Backup your Figma designs in independent formats like Sketch or XD. Learn more >
CC0で配布されている、髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクト・「Open Peeps」
Open Peepsは髪型や顔などのパーツの組み換え可能な人物イラストを配布するプロジェクトです CC0で配布されており、商用でも個人でも無料で自由にクレジット不要で利用する事が出来ます イラストは全体的にゆるい感じ。最近よく見るテイストですね
前回の記事から半年ほど経ったため、あらためプラグインを棚卸しました。 前回から2019/12/31までに、Plugin Directoryへプルリクエストおよびマージされたものから、「インストールしたプラグイン」「候補に上がったプラグイン」「前回インストールしたけど使わなくなったプラグイン」「今回チェックしたその他のプラグイン」の順でお届けします。 インストールした新しいプラグイン Cluse https://cluse.cc/ WCAG 2.0をベースとしたカラーコントラストの計測や色の変更ができるプラグインです。 テキストレイヤーと塗りのあるレイヤーを選択してプラグインを実行すると、パネルが表示されます。色に関しては明度を軸にした色変更と前面色・背景色の入れ替えができます。 現在扱いがとてもピーキーでして、テキストレイヤーと塗りのあるレイヤーの組み合わせ以外のレイヤーを選択していると、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sketchを使ったAtomic Designのワークフロー
アートライクな背景パターンを配布する・「Paaatterns」
Sketch · Collaborative Design for Everyone
Sketchと1対1を目指すAtomic designなSwiftUIの作り方 - Qiita
Affinity Designerを動画に活用、Sketch, Figmaとの使い分けなどイベントの登壇内容まとめ
ハーモニック・モジュラー・スケールのためのSassライブラリとSketchプラグイン
UI/UXデザインツール『Sketch』入門 | chot.design
Root - Website Wireframe and Design Starter Kit
Avataaars — Avatar Illustrations Sketch Library
Color System Plugin for Sketch
Chart — the most powerful data visualization plugin
新しくリリースされたSketchプラグインを紹介します（2020.01版） | DevelopersIO