Design your Drupal website with Figma

Before I start to build a Drupal website I always create a conceptual design in Figma. Before I discovered Figma I used Photoshop to create a design. But Figma works a lot faster and is more geared to web designers where Photoshop is more of photo editing suite never intended to design websites. 

If you mostly work alone, like me, Figma is totally free. You can create an unlimited amount of designs, or drafts as Figma calls them. 

It's also possible to export JPEG, PNG or SVG files from elements you've created. You can even copy and paste CSS code that is generated by Figma, but I tend to write my CSS from scratch.

When I've designed some important pages, usually a customer journey beginning with a blog post and resulting in a conversion, I go straight to theming.

Test your forms with the Fake Filler browser extension

Sometimes I need to build a big form for  a client. Such as a member registration form for the Dutch Radiology Society.  This form had over fifty different fields. Testing this would mean filling in the form over and over again. A cumbersome and boring task. Luckily I found this browser extension Fake Filler (available for Chrome, Firefox and Edge) which can automatically fill in all the fields with just one click. 

Fake Filler also recognizes different field types, such as an e-mail input and correctly fills it with a [email protected] address. The extension even offers more customization, but I have not yet needed this.

Quickly make screenshots or screencasts with the Nimbus browser extension

If you, like me, mainly communicate with clients by text (such as email or a project management tool) then you know how hard it can be to explain something just with words alone. How to place a block on a specific node for example. For these situations I try to use screenshots as much as possible. Clients can easily see what they have to do instead of deciphering a block of text. This Nimbus browser extension (available for Chrome, Firefox and Edge) makes it easy to take screenshots of your browser window and gives you the option to immediately edit it. So you can add arrows to point to out specific parts of the screenshot.

When I have to show multiple actions I usually create a screencast which is also possible with this plugin.

Stay up to date of all the latest Drupal and design news with Feedly

Feedly is an online RSS reader and also has a great Android or iOS app. Almost all sites publish their latest news to an RSS Feed. You can add this RSS feed to Feedly which will display the items in a readable format and gives you extra options such as saving or sharing the item. 

If you're looking for good Drupal RSS feeds to follow, I recommend the following:

• Drupal Planet: A collection of Drupal related RSS feeds. This can be a mixed bag with hardcore development tutorials, but also more global marketing tips.
• TheWeeklyDrop: A weekly Drupal newsletter curated by Bob Kepford which is also available as an RSS feed.
• roose.digital: And while you're at it, you can follow my feed as well ;)

Create and modify your theme with Sublime Text

Sublime Text is a source code editor. I use it to create and modify my Drupal themes. It has some cool features like:

• Syntax highlighting: So it's easy to see the difference between element names (such as classes), properties and values because they have their own colour. Also, when you make a mistake it's easier to spot because the colour will be off.
• Auto completion: This saves me a lot of time. Instead of typing out 'padding-left' every time, I can  just type 'pad' and select the property I want to use.
• Dark theme: Staring at a white screen with black text all day can be tough. Sublime text comes with multiples themes such as a dark theme, which is easier on the eyes in the long run.

You can even enable Twig syntax highlighting by installing some plugins.

Create Favicons (and more) with the Favicon Generator

The Favicon (the little icon displayed next to the title of your site in a browser tab) is something not to forget. But then you also have the touch icons on Android and iOS, and much more. Creating all the icons by hand can be a tricky task. Luckily, we Drupal web designers, can generate them easily with the Favicon Generator. 

The only thing you need to do is create a 260 x 260 image and upload it to the generator. After uploading you have to option to customize some icons and upload a different picture for a specific icon. After the code is generated you can paste it in the <head> of the html.html.twig file of your theme and upload the icons to the folder you specified.

If you like this tool you can make a donation to the creator, as the tool in itself in free.

Share the tools you use as a Drupal web designer

Are any of these tips helpful to you? Or do you have some tools you want to share? Let me know in the comments. Also don't forget to subscribe to my newsletter for more tools, tips and tricks for Drupal web designers.