How to Hand-off Photoshop and Sketch Designs With Sympli_part2(end)

Sharing the Project

Once the project has been exported it’s ready to be handed off to the dev team. Collaborators can access the project via a link which can be copied and emailed directly from the Sympli web app, or from the plugin in Sketch or Photoshop.

Downloading Assets

During the export process Sympli will have prepared and uploaded all the assets you defined in your source design document. These assets can be downloaded all at once via the Download All button in the Sympli app, or individually by hitting the grey downward pointing arrow icon to the right of the item.

Each asset can be downloaded as a bitmap (PNG) or a vector (SVG) file.

When downloaded as bitmaps the images will be downloaded at each of the resolutions specified during project setup, e.g. 1×, 2×, 3×.

Once exported to Sympli you can also use “mapping” to rename assets on the fly. The “mapping” system will remember the old name of the asset and associate it with the new one you have added, so if the source file is re-exported assets will be updated correctly but retain their new names.

Web App Tools

Inside the web app you’ll see a little bar running down the left side that provides you with some helpful tools.

Layers
By expanding the layers tool you’ll get a complete representation of the layers in your original source document. This is particularly helpful for selecting layers that might be obscured behind other layers and hence difficult to select with a mouse.

Rulers
The second tool is a set of two intersecting rulers whose crosshair you can drag around the page to measure the distance between the UI’s edges and the rulers’ center point.

Adding Comments
The third tool provides the ability to add comments through which you can communicate with your team. Activate the comments tool, click a position on the design, then type your message in and click Send.

Sympli CSS Generation

One of the features available in Sympli’s web app is automatically generated CSS. You will probably want to write your own responsive layout code given that Sympli’s CSS is pixel perfect and absolutely positioned, but when working from Sketch designs there is some great copy & paste CSS generated for things like gradients, backgrounds, text settings, shadows, borders and so on.

Allow me to share a couple of quick tips that may be helpful when creating UI elements to be converted into CSS by Sympli.

• The first is to be mindful that CSS can’t handle blending modes in the same way as a design app. For example, CSS drop shadows don’t support the typical design app shadow blending mode of “Multiply” so they should instead be set to “Normal”.
• The second is that when creating borders I found setting them to the “Inside” position gave the most accurate reproduction in Sympli’s CSS.
• Thirdly, if you do want to have Sympli generate CSS for you I recommend working with Sketch; in my experience thus far it will give better results than working from Photoshop documents.
• And finally, with designs from both apps sometimes linear gradients can run in an unintended direction, so double-check on your generated CSS as you go.

Getting Dimensions

Sympli makes it quite easy to get the size of different design elements as well as the spacing around them. Click on an element in the design, or select it via the “Layers” tool, and you’ll see rulers appear with dimension readouts as seen below:

You’ll get the dimensions of the element itself as well as its distance from the edges and near neighbors in the layout.

Text and Font Info

When you select any text element, if you look at the display on the right side of the web app you’ll see a readout providing the font family, font size, alignment and text color. You’ll see code with all these items in the auto-generated CSS section as well.

Below the read out, it’s also possible to click the button labelled Copy to grab the content of the text item, ready to be pasted into code.

If you select the third tab on the right labelled Aa you can see all the font families used in the current design.

Additionally all the fonts used in the overall project are visible in the Summary section, which we’ll talk about shortly.

Color Extractions

Color are automatically extracted from your documents and can be accessed in RGB or Hexcode form.

You can view the colors used in any element of your design by clicking it to select then viewing the information in the panel on the right.

You can also see a complete color palette detected from your design by ensuring nothing is selected, then clicking the second tab on the right panel with the droplet icon.

As with fonts, all the colors across the entire project can be accessed from the Summary area. Let’s take a look at that now.

Summary and Brandbooks

To reach the project Summary screen go to the top level page of the project then select the Summary tab, located after the Designs tab. Here you can see all the colors and fonts used throughout the entire project.

This selection of colors and fonts can be saved out into what is referred to by Sympli as a “Brandbook”. Brandbooks are comparable to style guides, allowing you to keep track of colors and fonts associated with particular brands.

Handling Changes

If changes need to be made to the source documents, adding them to the corresponding Sympli project can be done in essentially the same way as the initial export. Select the artboard that has been modified, then run the export process we described earlier.

If you are viewing a design via the Sympli web app when a modification is uploaded it will detect the changes and prompt you to open the updated version.

Written by Kezz Bracey
If you found this post interesting, follow and support us.
Suggest for you:

The Complete Web Developer Course - Build 14 Websites

Bootstrap 4 Rapid web development framework HTML CSS JS

Learn Responsive Web Development from Scratch

Create Complete Web Apps without Coding

Build Apps with React Native