Posts from "August, 2015"

How to … create custom font styles with custom stencils

If font style matters for your prototype, we have some great news. Pidoco’s custom stencils are a great way to create unique templates that you can reuse throughout a project. Combined with the rich text stencil you can easily create your custom font templates, for example to style headlines, subheadings, paragraphs or navigation – a unique font template library. This may not only help you save a lot of time but also ensure a consistent design language throughout your project. And here is how it goes …


1. Create your custom stencil

First, you will need to define your custom font styles. To do so, you can create several custom stencils – one for each font style. The custom stencils will be added to your stencil palette and instead of the standard text stencil, you can use them to create text elements with the desired style. In one of our previous posts, we explained how to create a custom stencil. In brief: the easiest way to start building your custom stencil is a click on the “CREATE STENCIL” button in the stencil palette. This will open a new canvas where you can design your stencil.

Creating a new custom stencil in Pidoco


2. Add a text element

Depending on the type of content you want to style, drag the corresponding text element into your custom stencil, e.g. HEADLINE 1 to define a title, HEADLINE 2 for a subheading, TEXT BLOCK for a paragraph or even a LIST stencil. It is worthwhile changing the content to something that will immediately tell you what type of content is represented by a certain style. For instance, you might call a title something like “This Is A Title”.

Adding a text element to the custom stencil by dragging and dropping it to your canvas.


3. Style your text

Once you have added the right text element to your custom stencil, start styling it. You can do this by double clicking the text element and adjusting the font size, font weight or alignment. Pidoco even offers a number of font and highlight colors.

In this example I created a headline and used bold and capital letters, a font size of 42px and grey text.

Editing a text element using the inline editing function.

Once you are done styling your font template, just click outside the text.


4. Use and reuse your custom styled fonts

When you are finished editing your custom stencil, click on “Done”. Of course you can create multiple custom stencils if you have several font styles you need for your prototype. All your custom stencils will be added to the end of the stencil palette. (Hint: Make sure to give each custom stencil a unique name for easy recognition!)

Using custom stencils to work with pre-defined font styles

Instead of using the standard text stencil, you can add your font templates. Once added to the canvas, you should break the link of that instance to the template using the context menu and clicking on “Detach from custom stencil”. Now you can edit the content of the custom stencil.

Detach the custom stencil to start adding your individual content


5. Examples

Styling your text within a custom stencil always works the same. So just give your creativity free rein! To get some inspiration, here is a small gallery with a few examples.


That’s it! You have successfully created your very own custom font styles!


Do you need help working with custom stencils? Then do not hesitate and drop us a line via or Facebook and Twitter.


Happy Prototyping!

Size matters! New release features multi-resize and improved icon scaling

The Berlin summer is treating us very well this year, but that’s no reason for us to take it easy as we’ve been working on a host of new features for improving your prototyping experience. With the latest release we are introducing multi-element resizing and an improved way to scale icons freely. In addition, we have redesigned the breadcrumb navigation and have made it easier to access page options. So here’s what’s new…


#1 Time saver multi-element resizing
Adjusting the size of multiple elements individually can be really tiresome. The new multi-element resizing option will save you lots of time: Just select all the elements that need to be resized and resize them all at once. This works with any scalable element.

Selecting multiple, but similar elements for further editing

Selecting and resizing multiple elements at once


#2 Better scaling of icons
With the latest release, all icons have become freely scalable, allowing you more flexibility in how you use them: Make them tiny, fit them exactly to a button, or blow them up to giant size – it’s your choice. But worry not, the convenient default sizes (16px, 24px, 36px, 48px, 64px) are still available to make it easier to match icon sizes.

Scaling icons to flexibly adapt their size

Free icon scaling combined with convenient default sizes


#3 Easier navigation
The breadcrumb navigation has been redesigned and now takes up less screen real estate giving you even more space for your creative work. We have also made it easier to access other projects and pages via the breadcrumb navigation: Hovering your mouse over the respective breadcrumb will give you a dropdown with all available items.

Using the breadcrumbs facilitates the navigation between the different prototype parts

Using the breadcrumbs facilitates the navigation between the different prototype parts

To keep things clean, common browser options like browser back and forward or opening items in a new tab are now only accessible in the usual manner via the respective browser controls or using right click or shortcuts (e.g. Ctrl + click).


#4 Better access to page setup
The context menu that was previously accessible via the breadcrumbs has moved directly to the page canvas with the latest release. This makes it much easier to access the page options. Simply use the “Change” link to adjust page size or background images or rename the page.

Accessing the page options via the editing panel

Easy access to page options directly at the canvas


Defining the most important values in the page options

Changing page options directly at the canvas

Note: Double-clicking on a breadcrumb item to rename it still works as before.


#5 Prototypes are now projects
A small change you will hardly notice is the renaming of prototypes to projects. To avoid confusion we are moving to the more neutral projects.


How do you like our new features? Drop us a comment here or via FacebookTwitter or Google+ or contact us via We look forward to hearing from you!


By the way, did you know that you can submit feature requests and other ideas via the Pidoco Forum? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status.


Happy Prototyping!


PS: You are not a Pidoco user, yet? Why not register for a free 31-day trial today?