Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Figmaを使ったAtomic Designのワークフロー

fumi
August 22, 2019

Figmaを使ったAtomic Designのワークフロー

Figma ✕ Atomic Designの良さを語りながら、
ビザスク lite リニューアル時のデザインフローについて説明したスライドです。

fumi

August 22, 2019
Tweet

Other Decks in Design

Transcript

  1. ×

  2. Label Status Status Status Status Status Status label label label

    label label label User Image Atoms   Right Center Left Right  Center  Left  Center Top Bottom Center  Top  Bottom  Form Place holder  Place holder Value  Text :focus error Button 1 2  on  off label label label :hover :active :hover :active :hover :active label :hover :active label label label :hover :active :hover :active :hover :active label :hover :active  1 2 3 :hover  label  Place holder Text Heading List Heading  List Heading Card Heading label  Card Heading label Section Heading  label label label label Section Heading
  3. label label Page Heading label  Table Heading すべて見る List

    YYYY/MM/DD hh:mm NewsTitle YYYY/MM/DD hh:mm :hover Name  ComapnyName :hover  ComapnyName TopicTitle  :hover Name CompanyName ¥00,000 Alert YYYY/MM/DD Type Status ステータス アラート 更新日時 タイプ 金額 相談相手 タイトル IssueTitle Name CompanyName ¥00,000 Alert YYYY/MM/DD Type Status 編集 期限: YYYY/MM/DD Title 応募数: N人 Status 編集 期限: YYYY/MM/DD :hover 応募数: N人 Status YYYY/MM/DD hh:mm NotificationTitleNotificationTitleNotificationTitleNotificationTitleNotificationTi tleNotificationTitle YYYY/MM/DD hh:mm :hover YYYY/MM/DD hh:mm     UnreadNotificationTitle UnreadNotificationTitle Unread Notification Title UnreadNotificationTitle 未読 MenuLabel :hover ChildMenuLabel :hover ExperienceTitle ¥15,000〜  ExperienceTitle ¥15,000〜  ExperienceTitle ¥15,000〜  ExperienceTitle ¥15,000〜  Heading Card texttexttexttexttexttexttext texttexttexttext texttexttexttexttexttexttexttexttext texttexttexttexttext label Form キーワード(例:サイト集客 SEO) すべての業務  すべての業界  label 任意 必須 label 任意  label label Topic title ¥00,000〜  Topic title ¥00,000〜  Topic title ¥00,000〜  BiographyBiographyBiographyBiographyBiographyBiographyBiographyBiography BiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyBiographyB… Company name Position Name  候補に入れる label label Molecules
  4.  無料会員登録 ご利用方法  ログイン   北島 安結 個人プラン

     1 アドバイスする  依頼する  案件管理  案件管理  YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 YYYY/MM/DD hh:mm   双葉 杏 さんから「ランディングページにおける数 値検証と改善...」にメッセージが届きました。 YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 YYYY/MM/DD hh:mm 「ピザ屋の経営のビジネス経験についてのアンケー ト」が届いています。 あなたへのお知らせ  すべて見る プロフィール編集 支払い履歴 受け取り履歴 アカウント設定 ログアウト チーム 株式会社ビザスク よくあるご質問 お問い合わせ ご利用ガイド アドバイスする 依頼する ヘルプ  フッター (現状UIをベースに、まとめら れそうなメニューはまとめる) Organisms