Sketchと1対1を目指すAtomic designなSwiftUIの作り方 - Qiita
はじめに 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 (昨年の実装) で
デザインツールをSketchからFigmaに移行した話｜nana
夏那です🌝 先月iOS13新機能「ダークモード」が発表され、この波に乗るべく電源カフェもダークモードを実装する運びになりました。 それに伴い、色々あってデザインツールをSketchからFigmaに移行しました。 まだ使い始めて半月程度しか経っていないのですが、Sketchとの違いや気づきが多々あるのでnoteに書きとめたいと思います！ よければ最後までご閲覧ください〜 ( 1 ) 以前までDENGEN CAFEで使っていたツールFigma移行前はDENGEN CAFEでは「Sketch」というデザインツールを使用していました。簡単な造形作業はイラレではなくこれで作成するくらいとても使いやすく、私自身デザインの勉強を始めた頃から愛用しています。 チーム内にデザインを共有するプロセスとしては、 ①SketchでUIを設計 ②MTG or Slackでのコミュニケーションを通して細かい部分を調
PMにデザインツールの使い方を共有したら、作業効率と精度が飛躍的に上がった話。｜Mercari Design Blog
こんにちは、メルペイデザイナーの東野です。 デザイナーの皆さんは、普段の業務でディレクターやPM（プロダクトマネージャー）とのやりとりをどのように行っていますか？ 私たちのチームでは、デザイン・ワイヤーフレーム作成ツールとして、Sketchを使っています。そのため、Sketchを介して、PMとデザイナーがコミュニケーションをとる場面が多くなります。 そんな中、PMのとある一言がきっかけとなって、Sketch共有会を開くことにしました。今回の記事ではそこからの学びを共有します。 きっかけの一言きっかけはPMから、思いもしなかった一言を聞いたことでした。 まず、シンボルを解除することからはじめます Sketchをご存じない方にとってはなんのことやら？ですが、シンボルというのは、デザインの骨格にあたるパーツのようなもの。それを解除してしまうと、デザインの基盤が崩れかねません。 ツールの使い方を我
SketchからFigmaにしました｜【公式】Lovegraph
こんにちは、ラブグラフのデザイナーの大野（@kikai_no_ki）です。 ラブグラフはカップル、お友達、家族など大切な人とのひとときをプロカメラマンに写真に残してもらう出張撮影サービスです。 今回はラブグラフのデザイナーのデザインツール環境について、タイトルにあるとおり Sketch + Invision + Abstract + Zeplin 体制から Figma に移行してよかった話をします。 Sketch + Abstract + Invision + Zeplin の運用昨年、UIデザイナーが新しく増えたのもあり、今後デザイナーが増えたときのために盤石なデザイン体制をつくることにしました。 そこで、デザイン作成は基本Sketchで行い、Abstractには共通コンポーネントをまとめているSketchのlibraryデータを管理しました。全ての画面のデザインデータを管理しないのは、
Responsive Design in Sketch — Part 1
With the latest version of Sketch (v.44), the group resizing feature has been updated. Even though there is no fundamental change, we have a little bit more control over the feature now. I have written about this feature before in detail. In this article I will cover the updates and give some new tips. In the next part of this article, I will compare the group resizing feature with Anima’s Auto-la
「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話 - BASE開発チームブログ
この記事は、「BASE Advent Calendar 2018」の21日目の記事です。 devblog.thebase.in はじめまして。2018年2月にBASE株式会社へデザイナーとして入社した小山です。 技術ブログを書くのは初めてなのですが、今回は私が2月に入社してから今日までネットショップ作成サービス「BASE」で「Sketchを用いたデザインシステム」を作ってチームでのデザイン作業を効率化した話について書こうと思います。 入社当時の状況 私が入社した当時、デザインチームは人数が増え始めた時期で、大きな課題が2つありました。 デザインデータの管理 私が入社する前まではプロダクトに対してデザインデータを作るデザイナーが少なく、各デザイナーが個人のローカルでファイル管理をしていました。その為、誰がどの画面のデザインデータを持っていて、最新のデータがどれなのかを毎回メンバーに確認をして
理想のデザインツールとは？ -PhotoshopからFigmaへ｜といとい｜note
この記事は Design Tools Advent Calendar 2018 15日目の記事です。 こんにちは。@toi_toi_y です。サイボウズ株式会社で自社プロダクトであるkintoneのデザイナーをやっています。 ところで、最近SketchからFigmaにデザインツールを移行しました。コラボレーション機能最高ですね。 Figmaについてはこちらのまとめが参考になると思います。 いまやデザインツール戦国時代で、InVision StudioやFramer Xなど新しいツールが日々登場し、どれが最強のデザインツール？みたいな議論が来年もバンバン湧いてきそうです。 ところで理想のデザインツールってなんですか？ - みんなが使っている。デファクトスタンダードが正義。 - 機能が豊富にある。これで全てが可能になる。 - 尖ったすごい機能がある。これで勝つる。いろんな観点がありそうで
2018年末に考えるSketchデザインデータ
前置き 本編の前に、現在の環境について少しだけ前置きを書きたいと思います。 仕事は主にC向けサービスのデザイン（WEB版）をしております。 ツールは普段からSketch+Abstractを使用しており、担当デザイナーは私だけで、他のデザイナーと共同作業することはほぼありません。またHTML+CSS(+見た目に関わるjsなど)は自分で書くことが多いです。 なので、Abstractはバージョン管理＆クラウド＆たまに他の人への共有として利用しています。（インスペクタ機能もアルよ!!使ってない!!） サービスの規模は中〜大向けの記事になるかと思います。 それでは早速本編に入りたいと思います！ 使用アプリケーション Sketch Abstract Sketchのライブラリ機能を使う ライブラリ機能が実装される前に始まったプロジェクトの場合は特に、ライブラリを使用するかどうかが悩むポイントになるかもし
「AbemaTV」におけるSketchとAbstractの運用フロー | CyberAgent Developers Blog
AbemaTVの開発組織では、UIデザインツールはSketchとAbstractを使用しています。 今回は2018年11月現在での運用方法について紹介したいと思います。 Sketchは言わずと知れたUIデザインに特化したツールです。 様々なデザインツールがありますが、複数人での共同作業やバージョン管理をする際には、SketchとあわせてAbstractを導入する組織も多いのではないでしょうか。 私たちは、2017年12月にAbstractを導入する以前はGitHubやGoogleDriveでSketchデータを管理していました。 しかし、それらのツールは「デザイン作業」に特化しておらず、どうしても痒いところに手が届かない状態でした。 AbemaTVには現在6人のUIデザイナーがおり、マルチデバイスへの対応のため多くのSketchファイルを運用しています。 ・モバイルアプリのiOS・Andr
SketchのシンボルをAtomicDesignで設計する。 - Qiita
概要 デザイン界隈でよく聞くAtomicDesignですが、 普段エンジニアの僕はReactのコンポーネント設計時にAtomicDesignに出会いました。 ReactやCSS(SCSS)側でも、AtomiDesignを採用しているのですが、 Sketchでも徐々にAtomicDesignを採用しています。 AtomicDesignは賛否両論あると思いますが、 賛成派の意見でAtomicDesignでのシンボル切り分けについて書きます。 AtomicDesignとは AtomicDesignとは、様々なパーツを合体させて、繰り返し可能なエレメントやテンプレートが作成できるシステムを構築することをいいます。 AtomicDesignのメリット Sketch/CSS/React全てで言える事だと思いますが、以下の様なメリットがあります。 保守性の高いUIを作る事ができる。 デザイン仕様の変更に
SketchからFigmaに移行してチーム間でのコミュニケーションがしやすくなりました - クックパッド開発者ブログ
こんにちは、メディアプロダクト開発部のデザイナ若月 ( id:puzzeljp ) です。 現在関わっている、一緒につくれるクックパッド | cookpadTV のアプリ開発上のチーム間のやりとりについて今回は書きたいと思います。 cookpadTV は料理上手な有名人や料理家がクッキング LIVE を生配信しているサービスです。クッキング LIVE を見られるのは、iOS アプリ・Android アプリ・FireTV アプリとなっています。 cookpadTV のデザインデータを Figma に乗り換えました cookpadTV に私がジョインしたのは、今年の8月です。 cookpadTV アプリがリリースされたのは3月なので、デザインを引き継ぐ形でジョインをしました。 私がジョインしたタイミングで、社内で Figma が使われる事例が増えてきたので、 Figma に移行を行ってみました
こんなSketch(Zeplin)はイヤだ #dxel /Anti pattern of sketch and zeplin
某カレンダー作成アプリを開発している会社で受け取ったデザインファイルがもっとこうだったら良かったなぁというものをまとめた発表です。 https://engineers-x-designers.connpass.com/event/103562/
Atomic DesignとSketchの活用 | ajike switch
こんにちは。 デザイナーの原です。 さて、皆さんは「Atomic Design」をご存知でしょうか？ 今回は、Sketchを活用した「Atomic Design」の実践方法についてご紹介したいと思います。 Atomic Designとは パーツ・コンポーネント単位でデザインを行っていくデザインシステムのことです。 通常のページ単位のデザイン方法とは異なり、パーツ同士を組み合わせて制作していく方法を指しています。 原子（Atomic）を一番最小のパーツとし、分子（Molecules）、有機体（Organisms）、テンプレート（Templates）、ページ（Pages）の5つの単位に分けられています。 原子（Atomic） パーツの中で一番最小のパーツを指し、UIの基礎的な要素になります。 他の原子と組み合わさることで、分子になります。 分子（Molecules） 2つ以上の原子から構成され
Sketch + InVision + Zeplin + Abstractで効率化するデザインフロー
デザイナーの西田です。 弊社では目的に応じて、複数のデザインツールを使い分けてUIデザインを作成しています。 昔は各々好きなデザインツールを使っていたのですが、事業がどんどん拡大し、メンバーが増えていくと、チームで統一されたワークフローがないと回らない状況になっていきました。各ツールの長所＆短所を何度も議論した結果、現在はSketch + InVision + Zeplin + Abstractの組み合わせで進めています（2018年9月時点） 今回の記事では、現状のデザインツール＆フローに至った経緯を紹介していきます。 目次 1. プロダクト＆チーム プロダクト チーム 2. ワイヤーフレーム：自由 3. モックアップ：Sketch vs AdobeXD vs Photoshop Zeplin連携 Sketch Librariesによるコンポーネント化 4. プロトタイプ：InVision
2018-bonfire-design-komerco-design-system
2018/04/20で発表したBonfire Design #3 の登壇資料です。
“Atomic Design”を導入するときに便利な Sketchプラグイン – Coiney Product Team – Medium
デザインしちゃったあと、“Atomic Design”を導入するときに便利だった Sketchプラグインをまとめてみました。 目次はじめに ・社内管理画面のリニューアル ・Atomic Design…いきなり「原子」と言われても。 あってよかった便利なSketchプラグイン ・1. シンボルを整理整頓「Symbol Organizer」 ・2. リネイムの定番「Rename It」 ・3.レイヤー探すなら「Sketch Search Everywhere」 ・4. 空のフォルダ一斉削除!!「Cleanup Useless Groups」 ・6. おまけ はじめに社内管理画面リニューアル弊社では約1年前から社内管理画面のリニューアルをしています。ほぼ新管理画面へ移行が完了。 でも実は画面のデザインはかなり前に完成していました。 すでにリニューアルはほぼ完了しています。とはいえ、機能面のPDC
開発スピードを上げるため、Sketchを辞めてFigmaに移行した話 - fujiken design blog
こんにちは、ふじけん (@kenshir0f) です。 普段はモバイルアプリを主としたサービス開発のデザイナーを担当しております。 業務ではSketchを使ってアプリのUIを組んでいるのですが、 先日チームの開発体制を見直すときにFigmaというデザインツールに移行しました。 Figmaに乗り換えるに至った経緯やプロコンなど、ざっくりまとめてみます。 なぜsketchから乗り換えたのか 今まで他の人と共同で同じsketchデータを作業することがなかったのですが、メンバーが増えてからはabstractで共同で作業していました。 ライブラリを分けたりbranchを切ったりしながらデザインを行っていたのですが、しばらく経つと不満点がいくつか見えてきます。 影響範囲がでかいライブラリを更新するとコンフリクトしやすい branchを切って作業してマージするなどスピードが遅くなりやすい デザイナーにb
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 | スペースマーケットブログ
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは！ 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました（毛まみれ） 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、１ページにつき１ファイル、スマートフォンもPCも別フ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【デザイン勉強会】私たちが今知りたいことを学ぶ！UI設計ナイト - DMM inside
【sketchユーザー必見】仕事を大幅に効率化！オススメの最新Sketchプラグイン7選【WEBデザイナー/UIデザイナー】2021年版
