往期回顾
「教程 | Figma」三步创建你的第一个 Figma 设计稿
「教程 | Figma」五分钟熟悉 Figma 的设计工作台
紧接上一篇，咱们熟悉了 Figma 的设计工作台，发现工具栏里有很多图层插入功能，这些功能既基础又核心。让我们掌声请出今天的主角 - 微信小程序「豆瓣评分」，一起通过对其首页的布局划分，来上手这些图层插入功能。
教程相关
  • Figma 地址：www.figma.com
  • 教材地址：戳这里
  • 阅读时长：3分钟
  • 操作时长：10分钟

第一步，插入 Frame

其实 Frame 就是 Sketch 里的 Artboard（画板），点选以后不要着急在画布上拖拽鼠标，右侧检视窗中可以选择现成的市面上设备的尺寸。在这里我们选择 iPhone X。调用 Frame 的快捷键是 F。

第二步，插入矩形

使用 Rectangle 插入一个矩形，选中后按快捷键「6」设置其透明度为60%（请依此类推1～9，0为100%）。然后我们在画板上拖拽该矩形，把整个页面的布局划分出来。调用 Rectangle 的快捷键是 R。

第三步，插入文字

大概划分好页面模块以后，开始用文字进行标记。点击 Text 插入文字图层，双击该图层可以更改文字内容。调用 Text 的快捷键是 T。本系列教材主要讨论 what 和 how，如果想知道为什么这么划分，大家可以读一下 Apple 的 HIG。
  • 头部三 Bar 分别为 NaviBar、SearchBar、StatusBar；
  • 身体为内容区，由若干行 MovieList 组成；
  • 尾部则是 TabBar 和全面屏自带的 HomeIndicator。
欢迎和我讨论 Figma，微信号heiheilaugh。也请关注我的个人项目whose.design - 发现更多设计工具。
BorderDesign交流群，加微信号：qawsedr0125 备注交流群
继续阅读
阅读原文