标记狮实时预览教程

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

标记狮实时预览教程

01  适用条件

标记狮的实时预览功能适用于iOS/Android/iPadOS/macOS/Windows多个系统。适用于Figma\Sketch\XD。

实时预览功能需要预览设备和电脑同处一个局域网内。

实时预览功能需先下载标记狮客户端,且在设计软件中已安装有标记狮插件,Figma用户在使用实时预览功能时需保持标记狮插件开启。

02  使用方法

标记狮实时预览功能主要分为三个模块:APP实时预览、设备模拟器、在Web中预览实时预览设计稿

除此之外,标记狮还支持任意设备扫码即可预览。

下面将分别介绍三种功能的使用方法:

1. 标记狮APP预览功能

标记狮的APP预览功能允许您通过扫描二维码在手机上实时预览设计稿。以下是详细的使用步骤:

步骤 1:安装标记狮APP

  • 在您的手机应用商店中搜索并下载安装标记狮APP。

可直接扫描下方二维码或通过下方链接安装:

div.framer-2u2dbd.png

https://www.marklion.cn/mobileapp.shtml?invoke=MarkLion.Mac&ver=5.3.6090.0

iOS设备或可在APP Store中搜索并下载“标记狮”APP

标记狮iOS APP已上线,实时预览设计稿轻松搞定!1.png

  • 安装完成后,打开标记狮APP。

步骤 2:打开设计软件和设计稿

  • 打开您的设计软件(如Adobe XD、Sketch、Figma等)。

  • 打开您要预览的设计稿。

步骤 3:启动标记狮的实时预览功能

  • 点击标记狮客户端左侧实时预览菜单

  • 找到想要实时预览的文件,点击打开实时预览开关,Figma用户可直接在插件中开启实时预览

在Figma文档中打开标记狮插件,点击底部的实时预览按钮

  • 开启后将在右侧生成一个实时预览二维码

标记狮iOS APP已上线,实时预览设计稿轻松搞定!2.png

步骤 4:扫描二维码进行预览

  • 打开标记狮APP,点击扫一扫按钮

  • 使用手机相机扫描生成的二维码。

  • 扫描完成后,您将能够在手机上实时预览、查看和调整设计稿。

2. 设备模拟器功能

标记狮的设备模拟器功能允许您在不同屏幕尺寸和分辨率下预览设计稿。以下是详细的使用步骤:

步骤 1:开启设备模拟器

  • 在标记狮的实时预览界面中,点击设备模拟器按钮。将会弹出一个新的独立窗口

标记狮5.3版本更新:实时预览新增设备模拟器!3.jpg

  • 在独立窗口中,您可以选择或自定义不同的屏幕尺寸和方向(横向或纵向)。

步骤 2:预览设计稿

  • 在设备模拟器中,您可查看设计在不同设备上的适应性。

  • 可对窗口进行顶置操作,点击最右侧画板对齐按钮可以将画板垂直方向对齐。

3. 在浏览器中打开,Web预览设计稿的功能

标记狮允许您通过浏览器在Web中预览设计稿。以下是详细的使用步骤:

  • 选择要预览的文档,开启实时预览开关

  • 在实时预览右侧面板中,点击在浏览器中打开预览链接的按钮

标记狮实时预览教程2.png

  • 在默认浏览器中,您将能够实时预览查看设计稿。


通过窗口右下方切换按钮实现画板切换,或在Figma/Sketch/Adobe XD中切换画板。


4. 多设备同时预览

可以通过分享预览的二维码来实现多端预览,或通过复制标记狮预览链接地址给团队成员也可以实现多端预览。

只要预览设备处于同一局域网下就可以。

标记狮实时预览教程1.png

以上就是标记狮实时预览的全部内容了。

如未下载标记狮APP使用手机扫码功能即可在手机浏览器中浏览设计稿,推荐使用Chrome浏览器。