Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Support
  • Download

›Extracting CSS from Designs

Publishing Axure RP Prototypes

  • Publishing Axure RP Projects
  • HTML, CSS, and JavaScript Plugins

Publishing Artboard Projects

  • Creating Artboard Projects
  • Publishing from Sketch
  • Publishing from Adobe XD
  • Publishing from Figma
  • Building Prototypes from Artboard Projects

Sharing and Organizing Projects

  • Sharing Axure RP Projects
  • Sharing Artboard Projects
  • Workspaces
  • The Mobile App

Project Discussions

  • Discussion Comments
  • Discussion and Activity Notifications

Extracting CSS from Designs

  • Inspect Your Designs

Troubleshooting

  • Troubleshooting Connection Issues

Business Cloud: End Users

  • User Guide

Business Cloud: Administrators

  • Accounts and Permissions
  • Creating a Private Instance
  • Installing On-Premises
  • Upgrading On-Premises V8 to V9
  • On-Premises customsettings.json
  • SAML Setup: Microsoft Azure
  • SAML Setup: Google Workspace
  • SAML Setup: Okta

Inspecting Your Designs on Axure Cloud

When working with a project inside its workspace on Axure Cloud, you can click Inspect on a page's thumbnail or in the prototype player to view style, content, and layout information about the elements on the page.

For Axure RP 10 projects and Axure Cloud artboard projects, you can also inspect when previewing the project’s public share link as well, by selecting the Inspect tab at the top of the prototype player.

Note

You cannot inspect Axure RP files created with versions prior to RP 9.

To convert files from previous versions of Axure RP, open them in RP 9, save, and re-publish to Axure Cloud.

Inspecting Your Designs in Axure Cloud

To get started, log in to app.axure.cloud or the Axure Cloud desktop app and click on a project's name. On the project's Overview screen, hover over the thumbnail of a page or artboard you want to work with and click Inspect.

Inspecting Your Designs from the Share Link

Once you load a published project’s share link in a web browser, click the Inspect tab at the top of the prototype player.

Redlines

You can view detailed redlines for any element on the page by hovering your cursor over it. To view relational redlines between two widgets, select one widget and hover your cursor over the second.

Size and Position

In the Info pane to the right, you'll see the following size and position information for the currently selected element:

  • X and Y page coordinates
  • Width and Height
  • Rotation, listed in degrees
  • Corner Radius
  • Opacity, as a percentage

Assets

The Assets section of the Info pane is visible when the selected element contains image assets you can download. These include the source image files for image widgets as well as previews of a widget's style effects, if any.

Each asset is represented by a thumbnail preview, and its pixel dimensions are listed below it.

You can download an individual image asset by clicking the down arrow at its bottom-right corner, or you can download all assets listed by clicking Download All at the top of the section.

Content

The Content section of the Info pane is visible when the selected element contains text content you can copy. You can select the listed text directly or use the Copy to clipboard icon.

Typography

The Typography section of the Info pane lists the following information (whether the selected widget contains text content or not):

  • Typeface
  • Font Size
  • Text Align
  • Font Color, as a hex code

Fill Color

This section of the Info pane lists just the element's fill color, as a hex code, along with a preview of the color.

CSS

The CSS section of the Info pane lists style and positioning information about the selected element as CSS declarations. You can copy the entire rule set with the Copy to clipboard icon, or you can select and copy individual declarations.

Note

When you're inspecting a widget in an Axure RP project, the ID selector for the rule set refers to the parent <div> that contains the widget's HTML.

← Discussion and Activity NotificationsTroubleshooting Connection Issues →
  • Inspecting Your Designs in Axure Cloud
  • Inspecting Your Designs from the Share Link
    • Redlines
    • Size and Position
    • Assets
    • Content
    • Typography
    • Fill Color
    • CSS
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
Axure RP 10Axure CloudEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense Portal
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 9 Documentation and Tutorials
Copyright © 2002–2023 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.