iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

UI設計師之工具學習指南系列 第 4

【Day4】Sketch篇 : 原來Sketch跟Html也滿像的

上一篇我們大概提到Sketch跟網頁切版的Html、css概念很像,今天我們則是先來看看Symbol的部分。

Symbol特色 1:替換

替換這個功能,就是讓我們可以一次創立好幾個 Symbol 並在 Artboards(畫布) 上替換。

  1. 首先我們可以先想像 Artboards(畫布) 是 html 的環境,Symbol 是 class

  2. 今天我做了2個symbols,分別為 Primary 和 Secondary

    .Primary{
      width: 200px;
      height:52px;
      color:#fff;
      background: #FF9A9A;
      font-size: 25px;
      text-align:center;
      line-height:52px;
    }
    
    .Secondary{
      width: 200px;
      height:52px;
      color:#fff;
      background: #FF9A9A;
      font-size: 25px;
      text-align:center;
      line-height:52px;
    }
    
  3. 我在 Artboards上放了一個名為 Primary 的 symbol

     <html>
      <div class="Primary">
        button
      </div>
     </html>
    

    https://ithelp.ithome.com.tw/upload/images/20200918/20112563V8OmniAMhS.png

  4. 然後我可以替換 PrimarySecondary,就是跟 Symbol 的替換是一樣的意思

     <html>
      <div class="Secondary">
        button
      </div>
     </html>
    

    https://ithelp.ithome.com.tw/upload/images/20200918/20112563PfyBoUVFPj.png

  5. 最後我們實際把這個觀念帶入我們的Sketch操作上:


上一篇
【Day3】進入Sketch篇
下一篇
【Day5】Sketch篇 : Overrides是什麼神奇的小東西
系列文
UI設計師之工具學習指南30

尚未有邦友留言

立即登入留言