Figma 是 線上介面設計工具,只需網路即可且不佔電腦空間,可和團隊進行多人協同合作,在瀏覽器中進行設計,共同繪製編輯,其版本歷史功能可直覺切換。
Figma = Sketch(UI設計)+ InVision(原型設計) + Zeplin(標註)+ Dropbox(雲端同步)+ Abstract(版本歷史)+ Craft-Freehand(實時討論) + Liveshare(實時分享)+ Team Library (團隊組件庫)+ Web API(第三方接入)+ …Figma是線上協作式UI設計工具,Figma從推出至今越來越受到UI設計師的青睞
Design features
It’s time to design on your terms
Figma is the only platform that brings together powerful design features you already love and a more efficient workflow to boot.
Design for the web made easy
Figma was built for the future of web. That’s why you’ll see features you won’t find elsewhere.
- A modern pen tool: Draw in any direction with Vector Networks. No more merging or needing to connect to the path's original point.
- Instant arc designs: Design clocks, watch screens, or pie charts easily with the Arc tool.
- Be expressive with OpenType: Tap into advanced font features to fully express your brand.
Design responsively with Auto Layout
Spend more time iterating and less time moving things around.
- Less manual resizing: Buttons can resize with their text and lists can rearrange themselves when items are moved around.
- Stretch to fill: Auto Layout components can now stretch left and right (or top and bottom) for easier responsive design.
- Design speaks development: Auto Layout’s padding, direction, and spacing settings translate directly into code, simplifying developer handoffs.
Automate and augment your work with Plugins
Remove repetitive tasks, bring in data, and power custom workflows.
- Plugins for everything: Stock imagery, flow diagrams, color accessibility, charts, icons, and more.
- Easy development: If you can build a website, you can build a plugin.
- Private plugins: Organization customers can create and distribute private plugins within their company.
Be efficiently consistent and consistently efficient
With your design system in the cloud, all the goodies in your libraries are always one click away.
- Flexible Styles: Create consistent Styles—color, text, grid, or effect. Apply them to any text or object across all your projects.
- Design systematically: Speed up design with components. Edit and override on the fly.
- Accessible libraries: A quick search surfaces the assets you seek. Simply drag and drop them into your file.
Turn developer handoff into a handshake
Bring developers into your process early and often. Let them get the specs and assets they need.
- Unlimited viewers: Invite as many teammates as you want to view and comment (psst, it’s free).
- Inspect design files: Any viewer can grab snippets of generated code for CSS, iOS, and Android.
- Easy export: Export the exact assets you need in the formats you need them in.
Built with all the benefits of any good cloud software
* Access files anywhere with Internet access
* Goodbye PDFs and outdated exports; share files with a live link
* Never have to save files again with
auto-save
* Worry-free editing and collaboration with version history
Prototyping features
Prototype while you design, and vice versa
Bring your ideas to life in animated prototypes. Test concepts earlier and more often. Create a better blueprint for development.
Create prototypes that feel like the real experience
Turn your static design files into an interactive experience—no coding required.
- Intuitive build: Simply connect UI elements and choose your interactions and animations.
- Interactions: Define subtle interactions, like on click, while hovering, while pressing a button, and more.
- Mobile-optimized: Details like device frames and momentum scrolling make your prototypes feel like the real experience.
Show, don’t tell your interaction vision
Take the guesswork out of development by spelling out the interaction details you envision.
- Advanced transitions with Smart Animate: Automagically animate similar objects and create detailed transitions.
- Dynamic overlays: Create multiple layers of interactive content overlays.
- Animated GIFs: Use GIFs to represent motion designs, video elements, and subtle animations.
Do it all in one single tool
No more jumping between tools. Design, prototype, share, and collect feedback all in Figma.
- All-in-one platform: Toggle between your design file and live prototype. Design edits appear instantly in your prototype.
- Shareable prototype: Share a link to your prototype. View it anywhere with Internet.
- Embedded commenting: Comment in a prototype. They carry over into the design file—so nothing gets lost.
Other ways to use Figma prototypes
*Observe a test subject in research sessions
*Interact with live prototypes in Notion or Dropbox
*Create presentation slides to pitch your work
*Integrate with third-party prototyping tools
Design systems features
A system everyone can contribute to
Power up your design systems with Figma. Build libraries that are always up-to-date, aligned with code, and easy to evolve as you grow.
Where all your design assets call home
Increase design consistency with a powerful design system that’s accessible to your entire company.
- Searchable assets: A quick search surfaces the assets you seek. Drag and drop into your file.
- Shareable styles Create styles that anyone can use and apply to any object.
- Everything in one place: Publish libraries filled with all your shareable assets—icons, backgrounds, images, avatars, fonts, and more.
Where your teams share the same language
Figma scales with your ever-evolving design system and growing team.
- Reusable components: Implement consistent designs with shared elements that are intuitive to use and easy to swap.
- Aligned with code: Create responsive components that map closer to code, making developer handoff more seamless.
- Copy, code, and go: Inspect files, review documentation, and quickly find the values developers need to build out features.
Where design system folks find peace of mind
Figma scales with your ever-evolving design system and growing team.
- Refine, publish, and track: As you make updates to components, styles, and assets, rest assured that changes are recorded in a detailed version history.
- Built with structure and scale in mind: Add structure and bring order to even the most complex and growing systems.
- Control user permissions: Manage who can view, edit, and contribute to team libraries.
Where design systems meet data
Take the guesswork out of building and maintaining your design systems with built-in analytics.
- Understand library usage: Get visibility into how teams are using your design systems.
- Make updates that matter: See which components are most used and detached to find new opportunities to improve your libraries.
- Measure the impact of design: Easily demonstrate adoption and reach across your organization.
Collaboration features
Collaboration is hard. We make it easier.
Team up to move design work forward, faster. Figma removes all the bad parts of collaboration and gets everyone on the same page—literally.
Discover the most important design work
Figma is where design work gets the visibility it needs across teams.
- Get the latest updates: Project Pages serve as your team’s hub. Pin files for easy access. Add notes for context.
- Centered around people: Easily see contributors and projects on Team and Organization Pages.
- Discover work by creator: Browse the latest files each user has contributed to on their profile.
Jump into a file as a team. Bring people on your journey.
Figma makes the design process transparent, which means everyone gets aligned fast—and stays aligned.
- Edit together in real-time: Co-design alongside your co-workers. Run global design critiques.
- Follow along with Observation Mode: Shadow the presenter’s every move and never get lost.
- Worry-free version history: See who changed what and go back in time as needed.
Invite folks into your design process
Enable others to add copy, grab specs, and give you feedback, so you ship better work.
- Invite the people you want: Figma puts you in the driver seat. Control who can view, add comments, and edit.
- Share links to files: Send a link to your Figma file. View from anywhere with the Interwebs.
- Share or embed prototypes: Send a link to your prototype or embed it in your preferred tool.
Design better products with better feedback
Figma helps you get the right feedback, so you can make decisions and move forward, faster.
- Embedded commenting, clearer feedback: Leave comments directly within the design or prototype.
- Have a conversation: Reply to questions. @Mention folks to notify. Mark as complete to close the loop.
版本介紹
Starter
– Figma editor
– 3 collaborative design files
– Unlimited personal drafts
– Basic file inspection
Figma Professional Design Dev Mode Basic admin |
Figma Organization Design Dev Mode Centralized admin |
Figma Enterprise Design Dev Mode Advanced admin |
版本比較
Starter | Professional | Organization | Enterprise | |
Design | ||||
Version history | 30 days | v | v | v |
Figma Editor | v | v | v | v |
Advanced drawing tools | v | v | v | v |
Auto layout | v | v | v | v |
Plugins and widgets | v | v | v | v |
Unlimited file storage | v | v | v | v |
Cross platform | v | v | v | v |
Sketch import | v | v | v | v |
View properties and variables | v | v | v | v |
Basic codegen | v | v | v | v |
Asset export | v | v | v | v |
Collaboration | ||||
Multiplayer | v | v | v | v |
Unlimited viewers | v | v | v | v |
Shareable links | v | v | v | v |
On-canvas commenting | v | v | v | v |
Observation mode | v | v | v | v |
Private projects | v | v | v | |
Prototype sharing permissions | v | v | v | |
Audio conversations | v | v | v | |
Team and project transfer | v | v | v | |
Unlimited teams | v | v | ||
Branching and merging | v | v | ||
Custom workspaces | v | |||
Prototyping | ||||
Interactive prototypes | v | v | v | v |
Video in prototypes | Choose videos from the Figma Community | Upload your own videos | v | v |
Overlays | v | v | v | v |
Transitions | v | v | v | v |
Advanced animations | v | v | v | v |
Set variable and variable mode | v | v | v | |
Conditional logic | v | v | v | |
Multiple actions | v | v | v | |
Expressions | v | v | v | |
Design systems | ||||
Variables | v | v | v | v |
Components | v | v | v | v |
Styles | v | v | v | |
Modes | 4 modes | 4 modes | 40 modes | |
Team libraries | v | v | v | |
Shared fonts | v | v | ||
Organization-wide design systems | v | v | ||
In-app Library Analytics | v | v | ||
Library Analytics API, in beta | v | |||
Default libraries by workspace | v | |||
REST API for variables | v | |||
Approved libraries | v | |||
Dev Mode | ||||
Advanced inspection | v | v | v | |
View section and frame statuses | v | v | v | |
Compare changes | v | v | v | |
Annotations | v | v | v | |
Asset export | v | v | v | |
Advanced codegen | v | v | v | |
Dev resources | v | v | v | |
VS Code extension | v | v | v | |
Plugins | v | v | v | |
View detached components | v | v | v | |
Component playground | v | v | v | |
Private plugins | v | v | ||
Code Connect beta | v | v | ||
Syncing or automatingworkflows via REST API | v | |||
Admin controls for inspect panel | v | |||
Developer platform | ||||
REST APIs | v | v | v | v |
Third-party integrations | v | v | v | v |
Live embeds | v | v | v | v |
Webhooks | v | v | ||
Private plugins and widgets | v | v | ||
Admin & security | ||||
Password protection | v | v | v | |
Default roles | v | v | v | |
Plugin and widget approval | v | v | ||
Centralized administration | v | v | ||
Domain capture | v | v | ||
Link access controls | v | v | ||
Centralized content management | v | v | ||
Single sign-on (SSO) | v | v | ||
Activity logs | v | v | ||
Workspace administration | v | |||
Guest access controls | v | |||
Default teams | v | |||
Role assignment via SCIM | v | |||
Password protection required | v | |||
Team creation controls | v | |||
Network access restrictions | v | |||
External content controls | v | |||
Activity logs API | v | |||
Windows Installer | v | |||
Idle session timeout | v | |||
EU data hosting | v | |||
Expiring public links | v | |||
Plugin and widget analytics | v | |||
Support | ||||
Figma Support Forum | v | v | v | v |
Figma Help Center | v | v | v | v |
Onboarding planning and support | v |
Figma browser requirements
Browsers and operating systems
Figma uses WebGL (Web Graphics Library) to handle rendering. This has very low graphical requirements which means it runs well on most browsers.
The minimum browser requirements are:
- Chrome 72+
- Firefox 78+
- Safari 14.1+ (Must use MacOS 11+)
- Microsoft Edge 79+
Note: To use Figma on Microsoft Edge, you'll need to make sure the Strict mode privacy setting is disabled for Figma.com. Visit Microsoft's help center for information.
The minimum operating system (OS) requirements are:
- Windows 8.1 or later
- Apple MacOS 11 (MacOS Big Sur) and later
- Any Linux OS that supports the browsers mentioned above
- Any Chrome OS that supports the browsers mentioned above
Tip! You can find out what browser and operating system version you're using via What's my Browser.
Graphics cards
On Windows and Linux, OS and device driver updates are often required to keep performance optimal. On MacOS (Apple), any OS releases will update Safari and provide any bug fixes related to WebGL.
While Figma doesn’t restrict the use of specific graphics cards, individual browser support may prevent you from using Figma on a specific browser. We recommend using the minimum operating system requirements as a guide instead.
Integrated and dedicated graphics cards
Some newer laptops will have both a dedicated card (Nvidia or AMD) and an integrated graphical processor (Intel or AMD).
If you have a dual-GPU laptop, you can choose to use the dedicated GPU over the integrated GPU. This will result in improved performance in Figma, but will increase your battery consumption.
Figma is unable to provide support or troubleshooting around dedicated graphics cards. For help with using a dedicated GPU, we recommend the following resources:
- MacOS: Apple provides the following information around using a dedicated GPU:
- Find out which graphics processor is in use on your MacBook Pro
- Set graphics performance on MacBook Pro (Disable Automatic switching)
- Other Figma users have had success with gfxcardstatus app, which allows you to switch between dedicated and integrated GPU. gfxCardStatus card is not endorsed by Figma.
- Windows (Nvidia): In the Nvidia control panel set chrome.exe to use discrete graphics card.
- Windows (AMD): In the AMD control panel set chrome.exe to use discrete graphics card.
Unsupported graphics cards
The following GPUs have known bugs and may cause rendering glitches when using Figma. Behavior with these GPUs may vary from browser to browser:
- Intel HD Graphics 3000
Mobile requirements
Figma relies on web technologies that aren't fully supported on mobile operating systems. We recommend using Figma on devices that offer a full desktop operating system. This includes MacOS, Windows and ChromeOS.
If you are using a mobile device, then you can access a View Only version of your Figma Files. This applies to iPads, tablets or mobile devices running mobile operating systems e.g. iOS.
Tablets that run a full desktop OS, like the Microsoft Surface, don't have the same limitations.
You will also be able to view prototypes on a mobile browser. To do so, you can open a prototyping link on your mobile device. Keep in mind that the browser address bar may obstruct or prevent some actions.
The minimum requirements to view Figma Files on mobile browsers are:
- Safari on iOS 11.4+
- Chrome on Android 7.0 - 9.0
Tip! For live device previewing, we recommend downloading the Figma mobile app. The Figma mobile app is available on both iOS and Android devices. Learn more about the Figma mobile app.
If your device isn't supported by the mobile app, you can mirror frames and prototypes to your mobile browser.
FigJam
FigJam 使團隊能夠共同打造更好的產品。定義想法、協調決策並推動工作——所有這些都在一個地方完成。
特色
適合任何工作的正確工具
從頭腦風暴到構建以及其間的一切,FigJam 使團隊可以輕鬆地進行實時協作。
Brainstorming
Riff and build on ideas in real time to discover new ways to tackle tough problems.
Diagramming
Work through complex user flows, processes, and systems with shapes and connectors that snap to the grid.
Meetings & workshops
Add some fun and excitement to team rituals or facilitate cross-functional conversations in large group settings.
Agile workflows
Add some fun and excitement to team rituals or facilitate cross-functional conversations in large group settings.
Strategy & planning
Add some fun and excitement to team rituals or facilitate cross-functional conversations in large group settings.
使用模板開始運行
使用300 多個現成的模板啟動對話和項目,或者創建您自己的模板。
Project kickoff
Flow chart
Weekly team meeting
Customer journey map
Standup
Retrospective
Roadmap review
Project timeline
讓每個人都保持同步的功能
使整個產品開發過程中的每個人都能更快地做出貢獻、提供反饋並做出更好的決策。
Keep conversations going
Talk things out with audio and live chat, or use comments to give feedback on the go.
Express yourself
React to ideas with stamps, emotes, and high fives for quick responses in real time.
Give everyone a say
Invite people from other teams or companies to contribute to your files free for 24 hours—no login required.
Facilitate dynamic conversations
Guide meeting participants to focus on the content that matters most with Spotlight mode.
與 Figma 無縫協作
在 Figma 和 FigJam 之間共享資源,輕鬆從早期思考過渡到最終修訂。
在 iPad 上繪製草圖並探索想法
使用 FigJam 應用程序收集靈感並獨自重複早期的想法,然後與您的團隊成員合作將其變為現實。
創建適合您的工作流程
無論您是要打破僵局還是規劃項目,FigJam 都擁有您的團隊推進工作所需的所有集成、小部件和插件。
版本介紹
FigJam Professional | FigJam Organization | Enterprise |
Unlimited FigJam files Open sessions Sharing permissions Team libraries Audio conversations Voting |
Everything in Professional, plus... Org-wide libraries Centralized content management Custom templates Custom color palettes Unified admin and billing Private plugins and widgets Single sign-on |
Everything included in Figma Organization, plus... Dedicated workspaces Advanced design systems Guest access controls Role setting via SCIM Idle session timeout Enforced password links Network access restrictions Onboarding and account support Expiring public links |
FigJam Professional | FigJam Organization | Enterprise | |
FigJam features | |||
Code blocks | V | V | V |
Templates | V | V | V |
Exports | V | V | V |
Timer | V | V | V |
Widgets and plugins | V | V | V |
Engagement features | V | V | V |
Cursor chat | V | V | V |
Ready-made templates | V | V | V |
Diagramming tools | V | V | V |
Music player | V | V | V |
Tables | V | V | V |
Asana & Jira widgets | V | V | V |
Audio conversations | V | V | V |
Open sessions | V | V | V |
Voting | V | V | V |
Custom templates | V | V | |
Custom color palettes | V | V | |
Admin & security | |||
Password protection | V | V | V |
Plugin management | V | V | |
Centralized administration | V | V | |
Domain capture | V | V | |
Link access controls | V | V | |
Centralized content management | V | V | |
Single sign-on (SSO) | V | V | |
Activity logs | V | V | |
Widget management | V | V | |
Workspace management | V | ||
Guest access controls | V | ||
Default roles | V | ||
Role assignment via SCIM | V | ||
Team creation controls | V | ||
Network access restrictions | V | ||
External content controls | V | ||
Activity logs API | V | ||
Idle session timeout | V | ||
EU data hosting | V | ||
Expiring public links | V |