Figma Layout Tips
When working with layouts in Figma (which will be often) you’ll need to be comfortable with resizing, measurements, spacing, alignment, and masking. Here are five tips to help you out!Watch Tips 1. Skew Shapes For Easy Isometric ResizingIf you’re working with isometric illustrations in Figma, there is a great way to skew your shapes and help resize things more intuitively. To do so, take an object (for example, a square) and rotate it 45°–hold SHIFT and drag the corner to incrementally rotate it.In order to squash this up-ended square you first need to group it (by itself), effectively resetting the boundary box in the process. Now when you select it you’ll be able to flatten it on the X and Y axes.To change its dimensions whilst remaining true to its isometric lines, ungroup it, then resize it with the handles. 2. Quick Column LayoutsYou can quickly generate a column layout by using snapping and distribution. For example, snap two squares to the sides of an artboard, then nudge each one inward slightly. Add some other shapes between them, then select the whole lot and go the Main menu > Arrange > Distribute Horizontal Spacing. Bingo! A perfect column layout to work from. 3. Remove Space Between ItemsIt’s possible to quickly remove all space between a series of objects. Select the objects in question, then go Main menu > Arrange > Pack Horizontal to get rid of...
How to Create a Mobile App Landing Page With Templates
As you’re getting ready to launch your app and release it onto the app marketplaces, you need to start planning for the promotion and marketing of your app. When the time comes to promote your app, look into using an app landing page. App landing pages are better for marketing than a regular website because they focus on getting the visitors to take a specific action.You can tailor your landing page based on your needs—drive downloads via app store links or encourage them to leave reviews/sign up to be notified when the app launches, and more.App landing pages are quick and easy to create with the help of a template. Another benefit of using app landing page templates is that you can focus on finishing your app and promoting it rather than designing a landing page for it.In this post, we’ll explain what to look for in an app landing page template, the features you've got to include on your landing page, and we’ll show you how to create a landing page from a template.What to Look For in an App Landing Page TemplateThere's no shortage of beautifully designed app landing page templates, which means that when it comes to choosing the right landing page template for your app you might spend a lot of time going through all the options. Here are the most important features to look for in an app landing page template:Responsive and attractive design. Having a responsive and attractive...
How to Customize Your WordPress Website With Elementor
In the previous part to this tutorial miniseries How to Build a WordPress Website With Elementor I showed you how to set up a WordPress website using the Elementor page builder. We installed the plugins needed, including the Envato Elements WordPress plugin, then used a template kit to prepare a simple four page website.In this, the second and final part, we’ll be customizing those pages. So let’s get started!Refresher: What is Elementor?Elementor is a page builder plugin for WordPress. It allows you to define layouts; add, edit, and remove elements; and use various templates to create websites of all kinds. It comes in both a free and Pro version, depending on your needs. In this tutorial I’ll be showing you how to customize what we’ve already built with Elementor, by changing the colors, typography, and layout of various pages, as well as uploading a logo, and creating navigation for the site.Customizing Pages With Elementor 1. Customizing Our WebsiteLet’s begin by looking at customizing the colors of our website. We’ll select a page to edit by going to Pages, then choosing the home page. We create a new section (for demonstration purposes) at the top of the page by hitting the + icon on the tab of the hero element:Using the option presented to us in our new section, we select a two column layout. We can then drag some widgets into the columns we’ve created.To...
What is Figma?
Figma is an interface design application that runs in the browser–but it’s actually much more than that. I would go so far as to say it’s probably the best application for team-based collaborative design projects. Let’s take a look! Figma gives you all the tools you need for the design phase of the project, including vector tools which are capable of fully-fledged illustration, as well as prototyping capabilities, and code generation for hand-off.Figma Runs OnlineEven though Figma is browser-based there are desktop version for both Windows and Mac OS. Presumably these are wrap applications which are running a browser inside them, but whether that’s the case or not, Figma is always running online within those apps. Note: If you do lose connectivity you can still keep working on any document you already had open.CollaborationThe “always online” nature of Figma actually provides some of the greatest strengths of the tool. One of those strengths is that Figma allows for live, real-time collaboration. You and your team members can all log into a design at once, simultaneously making changes to it. And the fact that these designs are all saved online means that you never have to worry about any team members falling out of sync with the project. The latest changes are always right then in the file, and you needn’t worry about transferring files between team members, or pushing...
New Course: Using Figma for SVG Design
Figma is becoming very well known as a UI design tool, but on top of its excellent performance in this arena, it is also becoming a favorite for its robust vector design tools and SVG capabilities.In our new short course, Using Figma for SVG Design, you’ll learn how to use Figma for vector editing with SVG in mind, and how to generate SVGs that reproduce exactly what you see in your design document.What You’ll LearnIn this short course of just seven bite-sized video lessons, Kezz Bracey will take you on a tour of Figma and its SVG design capabilities.
You'll learn all about Figma’s vector drawing tools: the pen, pencil, and primitive shape tools. Then you'll see how vector editing is done in Figma, and how you can manipulate nodes, curves, and segments.You'll move on to learn how to apply fills and strokes in Figma, including gradients. And then you'll see how to export SVGs while making sure the output looks exactly the way you want it to.Watch the Introduction Take the CourseYou can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. Plus you now get unlimited downloads from the huge Envato Elements library of 730,000+ creative assets. Create with unique fonts, photos, graphics...
How to Build a WordPress Website With Elementor
Creating your own website without learning how to code, or hiring your own developer, used to be almost impossible. Nowadays, however, almost anyone can use a platform such as WordPress and a builder plugin like Elementor to create a website in no time.In this tutorial miniseries (available in both video and written form) I’m going to show you how to build a website using WordPress and Elementor, walking you through the entire process step by step. Here’s what we’re going to cover in this tutorial:Technical setupCreating website pagesGetting to know ElementorBuilding WordPress Websites With Elementor 1. Technical SetupTo get a website up and running you’ll need a few things:A domainHosting for your website filesA working installation of WordPressNote: For the purposes of this tutorial I will assume you already have these, so I’ll just be focusing on the Elementor plugin. If you need help with any of these points we have a complete beginner’s guide to using WordPress which you can watch on the Tuts+ YouTube channel.Install the Elementor PluginFirst we need to install the Elementor plugin. There are two versions, a free version, and a Pro version. The Pro version will make a number of pro features available to you, including some premium templates and blocks to help you build exactly what you want. To get the plugin visit; the free version is...
Figma Component Tips
Figma allows us to design with components; repeatable objects which behave according to sets of rules which we define. Let’s run through some tips and tricks to help you make the most of components.  Watch Tips 1. Combine Components to Propagate Changes EasilyA button, for example, might be a component comprising a shape object and a text object. We might have multiple instances of that button, each one slightly different but all adhering to some basic layout and display rules. On some instances, we might choose to remove the fill, leaving just a stroke, in which case we would override the fill color. When this happens, if we alter the component’s fill color all instances would reflect that change, except the one where we chose to override the fill.
But if we alter a property which hasn’t been overridden, those alterations would be visible across all instances of the button.This manner of working with instances can be a really helpful mindset to get into when building UI designs. 2. Create Symmetry by Flipping ComponentsIf you want to create symmetry or mirroring, create a component out of one half of whatever it is you want to use. Create a second instance by holding down ALT and dragging the original, then press SHIFT + H to flip the duplicate. Now, whenever you alter the original, the duplicate will also be altered, but in reverse. 3. Create Repeating Patterns by...
How to Build a Full-Screen Responsive Page With Flexbox
In this tutorial, we’ll learn how to build a full-screen responsive page with flexbox. Our page will include a full-screen background image, vertically centered content, and a sticky footer.Here’s a quick look at the page we’re going to build (the full screen version might give you a better idea): Note: this tutorial assumes you have some understanding of flexbox. For beginner resources, take a look at these tutorials and courses: Flexbox A Comprehensive Guide to Flexbox Alignment Anna Monus Flexbox A Comprehensive Guide to Flexbox Ordering & Reordering Anna Monus Flexbox CSS: Flexbox Essentials Craig Campbell CSS 6 Flexbox Projects for Web Designers Craig Campbell 1. Define the ContainerWe begin by defining a container, in which we place three elements. A header, a main, and a footer. Here’s the page structure:<div class="wrapper"> <header class="page-header"> <!-- content here --> </header> <main class="page-main"> <!-- content here --> </main> <footer class="page-footer"> <!-- content here --> </footer> </div>We want the page to be at least full-screen, but when the page height is greater than the browser window height, we want a scrollbar to appear.Thanks to flexbox, we’re able to create this functionality very easily. Here’s the required CSS:.wrapper { display: flex;...
How to Design a Great Landing Page Quickly Using Templates
A landing page is a useful marketing tool that makes it easy to promote a specific product or service and increase the chances of visitors signing up or purchasing it. They can be used to promote free lead magnets as well as paid offers such as courses, digital or physical products, and services.An easy way to create a landing page, even if you've got no design experience, is to use an HTML landing page template. In this post, we’ll discuss why you should consider using HTML landing page templates, what makes a great landing page, and walk you through the process of how to design a landing page using a template.Why Use HTML Landing Page Templates?While there are several ways to create landing pages for your marketing campaigns, an HTML landing page template is the easiest way. Here are several reasons why you should consider using an HTML landing page template such as those available from Envato Elements.1. Ease of UseHTML landing page templates are easy to use because they don’t require you to learn how to code in order to use them. All the elements are already in place so all you have to do is edit the contents. There's no complicated installation process involved as all you've got to do is upload them to the hosting server.  2. Faster Loading TimesWhen you design a website or a landing page, you’ll benefit from faster loading times than if you designed your website with a...
Figma Vector Tips
Vectors are an important part of any UI or prototyping design application, and Figma has its own powerful and unique set of vector tools. Here are some quick tips and tricks to help you use them more efficiently.Watch Tips 1. Use Vector Networks for Complex ShapesFigma has some outstanding unique vector features, not least of which being its “vector networks”. For example, if you have a complex polygon like a star, select it, then hit the Edit Object button to edit its nodes and paths. Normally, in all other vector design applications, a node can have no more than two lines originating from it. Figma, however, allows us to use the Pen Tool to draw extra lines from each point, perhaps even joining two points together. Take a look at the screenshot below to see how each one of the inner nodes has three lines originating from it, effectively creating an additional shape within the original polygon. 2. Paste SVG Code DirectlyThis feature is really helpful. Figma will allow you to copy SVG code from an external source, then paste it into Figma–it will create a vector layer for you containing the SVG.Pasted 3. Copy Vectors as SVG CodeChoose any vector in your design, then right-click it to bring up a contextual menu. Go to Copy as > Copy as SVG and you’ll then have the SVG code on your clipboard, ready to paste into whatever web project you’re working on.CopiedFigma Learning...
The Best Free Figma Resources: Templates, Icons, UI Kits, and More
Figma came out as a strong new player in 2016 allowing design and software development teams to collaborate on any platform.
This browser-based application eliminated problems such as updating software, syncing screens, and waiting for a team member to upload the latest design.Real-time collaboration is where Figma shines most. It launched with features like multiplayer editing and easy file-sharing on Mac, Windows, Linux, and Chrome. Features similar to existing UI design tools also minimized the learning curve. Microsoft, Slack, and Uber are some of the top companies using Figma to build websites and mobile interfaces today.Free Figma Resources To give themselves (and others) a productivity boost, brands and designers across the industry have curated a ton of Figma resources–here are some of the best places to find them!FigmaCrushTouting itself as “The biggest collection of free resources for Figma” FigmaCrush is a carefully-curated list of over a hundred resources from the Figma community. There are website templates, mobile templates, and UI kits, as well as social media icons and credit card icons. Nifty mockups for Nintendo Switch, iPhone X, and Samsung S8 are also available.Design newbies can use FigmaCrush freebies to create E-commerce, cryptocurrency, and event landing pages easily. Each freebie links to its creator for proper attribution. All downloadable...
Launching Ad Monetization for AMP stories
We’ve seen steady growth over the past year in AMP Stories and we are delighted to see the various ways content creators have taken advantage of the rich, immersive canvas for storytelling. We’ve been testing this with a handful for pilot partners and today, we are excited to give all content creators an opportunity to monetize their stories. A CNN AMP Story showing a Google Pixel Story Ad Introducing Story Ads Story Ads are fullscreen ad placements that appear in AMP stories. When we set out to create the advertising experience for story ads, we built it on top of three principles:   1. Immersive
We wanted to ensure that story ads were immersive and engaging. Like AMP story content, story ads use the entire screen to convey a brand or message using a combination of video, image, or animations. A user continues the tap gesture to skip over the ad if uninterested but also has a consistent way to explore the ad using the call to action button. In addition, every ad has a ‘consistent’ ad attribution label, so users are easily able to distinguish between an ad vs organic content inside a story. Ad placement & insertion are orchestrated by the runtime and therefore story ads are shown to the user only once they have fully loaded. As a result, story ads by definition are 100% viewable. 2. Performant & Secure
Story ads leverage the open source AMPHTML ad...

Total Twitter Followers
Tweets Impressions Monthly
Facebook Followers
Total YouTube Views


Alexa Global Rank
Alexa Rank in United States
Unique Visitors Last 28 Days
Pageviews Last 28 Days


Total External Backlinks
Keywords Tracked
Keywords Analyzed

15 Jan 2019