[SalesForce] Lightning Experience: Open a Visualforce page from a record detail page

I would recommend you look at the 'Build a Lightning App with the Lightning Design System' Trailhead project which walks through all the steps in detail.

Specifically, refer to the last step - 'Build the AccountList Component' which builds out an Account Listing. Sample component code

<aura:component controller="AccountsController">
   <aura:attribute name="accounts" type="List" />
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
   <!-- Use the Apex model and controller to fetch server side data -->
   <table class="slds-table slds-table--bordered slds-table--striped">
      <thead>
        <tr>
           <th scope="col"><span class="slds-truncate">ID</span></th>
           <th scope="col"><span class="slds-truncate">Name</span></th>
           <th scope="col"><span class="slds-truncate">Type</span></th>
           <th scope="col"><span class="slds-truncate">Number Of Employees</span></th>
           <th scope="col"><span class="slds-truncate">Ticker Symbol</span></th>
           <th scope="col"><span class="slds-truncate">Phone</span></th>
           <th scope="col"><span class="slds-truncate">Details</span></th>  
        </tr>
      </thead>
      <tbody>
        <aura:iteration items="{!v.accounts}" var="account">
         <tr>
           <td>{!account.Id}</td>
           <td>{!account.Name}</td>                 
           <td>{!account.Type}</td>
           <td>{!account.NumberOfEmployees}</td>                 
           <td>{!account.TickerSymbol}</td>
           <td>{!account.Phone}</td>
           <td>
              <c:button class="slds-button slds-button--neutral"
                 label="Details"
                 svgXlinkHref="/resource/SLDS090/assets/icons/standard-sprite/svg/symbols.svg#account"
                 svgClass="slds-icon slds-icon-text-default"
                 onclick="{!c.showDetails}"
                 data="{!account.Id}"
              />
           </td>
         </tr>
        </aura:iteration>
      </tbody>
   </table>
</aura:component>

Refer to the provided link for complete source code.

This looks to be a namespace issue similar to the one described here - currently in review.

It can be reproduced using these steps as mentioned on the link

• Create an namespace on your Developer Org and a Managed Package
• Add the two Visualforce Pages to the package and upload it copying the link
• Log into another organization and install the package.
• Override the Account View with TestPage1 and then switch to Lightning Experience.
• Navigate to any Account page and click on either the A href link or OutputLink, clicking OutputLink will work as expected maintaining the correct namespace, clicking on A href link will navigate to your default org namespace which results in either URL "No Longer Exists" or "Page namespace__TestPage1 does not exist". (Behavior varies on how the page will display)

The suggested workaround is not ideal, but it works

1) Right click on the link and select "Open Link in New Tab";
2) Disable Lightning Experience;
3) Change the tag references to make use of the Visualforce tag