Skip to main content
Community design

Community Design Template (available in Figma)


xiaoyu-shen

 Updated on Aug 2021 - The design templates are now available in Figma community: Figma.

The look and feel of your community matters. To help you to optimize your community design, we’d like to introduce the design templates to help kickstart your design process! It is a guide which will give you all the details you are looking for!

 

What’s in the templates exactly?

Get started with community design 

 A step by step guide for you to customise and style your community from scratch. 

 

Image dimensions

Find explanations of the most prominent images and their dimensions used in our platform. And you can try the image in the design file to make sure it looks perfect in your community. 

Design file with the specification of image dimensions

 

Platform page templates

Design for main pages in the community: homepage, community categories, and knowledge base categories. All templates are available in both desktop and mobile view. 

Template for homepage, community categories, and knowledge base categories

 

Did you find this topic helpful?

13 replies

timcavey
Forum|alt.badge.img
  • Helper ⭐️⭐️
  • 269 replies
  • September 15, 2020

This looks like a great tool, and it was super easy to sign up and have access to the Insided template!

 

So far I’ve been unable to find the right place to simply insert some custom CSS we’ve made, to test how it looks. Any tips or links to the right guide are welcome!


xiaoyu-shen
  • Author
  • Helper ⭐️⭐️
  • 341 replies
  • September 15, 2020

Hey @timcavey, glad to hear that you like the new template!

Here’s a guide about custom CSS: 

Please let me know if you have further questions, happy to help out. :)


timcavey
Forum|alt.badge.img
  • Helper ⭐️⭐️
  • 269 replies
  • September 15, 2020
xiaoyu-shen wrote:

Here’s a guide about custom CSS: 

Please let me know if you have further questions, happy to help out. :)

 

Thanks @xiaoyu-shen - my issue is that we have some custom CSS code written and ready for prod, but our dev wants to play it safe and test it first. 

 

I was hoping this Figma template would be the perfect place, but so far, I’ve been unable to C&P our lovely code onto the template. Any advice here would be appreciated! 


xiaoyu-shen
  • Author
  • Helper ⭐️⭐️
  • 341 replies
  • September 17, 2020

Hi @timcavey, Figma is purely a design tool. I’d recommend to test and try the changes on your staging environment first before applying them to your production community.


xiaoyu-shen
  • Author
  • Helper ⭐️⭐️
  • 341 replies
  • December 21, 2020

Hi all, I’m happy to announce that the inSided Design Template is out of beta now. 
What’s new:

  1. A new ‘Design Tasks’ page is introduced to help your design team to prepare visual assets and style your community platform step by step. 
    Design Tasks

     

  2. ​​​​​​In the latest update, ‘badge’, ‘favicon’, ‘share image’ was added to the image dimension overview.
    Badge, Favicon, Share image

    Please leave a comment if you have any feedback or questions on the template, we are happy to help. :)


  • Contributor ⭐️
  • 2 replies
  • March 9, 2021

It’s not possible to duplicate it. how can I acess the file 

 


xiaoyu-shen
  • Author
  • Helper ⭐️⭐️
  • 341 replies
  • March 18, 2021

Hey @nargesshab I’ve replied to your question in another post.

If you also have questions about how to download the design template, please check the last part ‘Need some help to download this template?’ for a step-by-step download guide. :) 


  • Contributor ⭐️
  • 2 replies
  • March 19, 2021

@xiaoyu-shen  Hi, thanks . I recieved the file through the Organization


xiaoyu-shen
  • Author
  • Helper ⭐️⭐️
  • 341 replies
  • March 19, 2021

Hey all, recently I’ve heard questions about how to download the template file.

As Figma lately added an advanced option for permission control and by default it was turned off, you may not be able to see the dropdown arrow after you log in. The setting has been updated, and the problem should be solved now. Sorry for the confusion :pray_tone1: .

 


xiaoyu-shen
  • Author
  • Helper ⭐️⭐️
  • 341 replies
  • August 3, 2021

Hey all, to make the templates easier to use, we’ve published the design templates in Figma community, please check it out here: http://figma.com/@insided

We are also curious to learn how you like these templates, or if there are any other design guidelines you’d like to see, please leave a reply and let us know.:wink:

Click on ‘Duplicate’ to make a copy in your draft

 


How do we retrieve the missing component libraries for these templates?


DannyPancratz
Forum|alt.badge.img+7
  • VIP ⭐️⭐️⭐️⭐️⭐️
  • 963 replies
  • July 25, 2024

Is this still up-to-date? 


Kenneth R
Forum|alt.badge.img+5
  • Gainsight Community Manager
  • 432 replies
  • July 29, 2024

Hey @DannyPancratz I believe it’s still quite up-to-date, despite the inSided branding.  I’m double-checking with our Product folks to be sure.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings